Next.js Vercel Supabase

1# Cursorrules
2 
3## Intro
4 
5I am building 'BA Copilot', where BA stands for Business Analysts. I will sometimes refer to it as bacp.
6 
7## BA Copilot MVP
8 
9### Overview
10 
11It is an assistant for business analysts. The MVP will be a an ai chatbot type tool, which will render BPMN diagrams using bpmn-js. The user can then iterate on them either with:
12 
13- additional discussion
14- editing the diagram directly (bpmn-js supports this)
15 
16### UI Description
17 
18Here is a hierarchical, indented bullet description of the BA Copilot MVP, focusing on its functionality for creating and iterating on BPMN diagrams:
19 
20BA Copilot Interface
21 
22Question Input Section
23 
24Users can input questions or requests related to business processes. Example: "Based on the doc content what have I missed?"
25 
26Process Section (Optional)
27 
28Allows users to upload or view BPMN diagrams in formats like .png, .vsdx, etc. Users can visualize and edit existing diagrams or create new ones. Example: A BPMN diagram showing a flow of "Register expense report", "Approve", and "Deny" processes.
29 
30Documents Section (Optional)
31 
32Users can upload relevant documents, such as PDFs, that might contain process details. Example: "Shelter - employee handbook.pdf" uploaded to provide context for the BPMN diagram.
33 
34Artifacts Section
35 
36Provides a space for related outputs or references to be displayed. Example: Diagram suggestions based on uploaded content.
37 
38Iterative BPMN Diagram Creation and Modification
39 
40Input Process
41 
42Users can pose questions or requests for modifications to existing processes. Example: Asking for missing steps in the process based on document content.
43 
44AI-Powered Suggestions
45 
46The system suggests additions or modifications to the BPMN diagram based on the content of uploaded documents or user queries. Example: Suggestion to add a task for checking the expense policy, citing specific sections from the uploaded handbook.
47 
48Diagram Editing
49 
50Users can interactively edit the BPMN diagram based on suggestions. Example: Adding a task "Check expense policy" with inputs and outputs like "Expense report" and "Checked expense report".
51 
52Documentation and References
53 
54The system references uploaded documents and highlights relevant sections. Example: Citing "Section 7. Claiming reimbursement for payments made on behalf of the company" from the employee handbook.
55 
56User Workflow
57 
58Start with a Question
59 
60User initiates the process by asking a question or making a request.
61 
62Upload Process Diagrams and Documents
63 
64User uploads existing diagrams and documents for context.
65 
66Receive AI-Generated Suggestions
67 
68System provides suggestions to enhance or correct the process flow.
69 
70Modify BPMN Diagram
71 
72User edits the BPMN diagram based on the received suggestions.
73 
74Iterate Until Satisfied
75 
76User continues to ask follow-up questions and modify the diagram until the desired outcome is achieved.
77 
78This BA Copilot MVP allows users to efficiently create, modify, and iterate on BPMN diagrams with contextual suggestions, leveraging uploaded documents and user queries.
79 
80## BA Copilot Vision
81 
82### Overview
83 
84The vision for this is that it will be the home for business analysts to get assistance relating to their jobs. It will protect itself network effects to increase the value of the product e.g. BA agencies posting their products in the toolkit section, and members discussing BA topics in community section. It will also protect itself via an ever improving model for BA tasks e.g. BPMN generation. Although it will never be trained on user data. It will grow via virality via a dropbox style 'refer a friend and you both get 100 AI credits'. Revenue will be via companies paying for it for their BAs. Revenue will also be via companies paying to list on the job board.
85 
86### UI Description
87 
88This UI for the Business Analyst (BA) Copilot is designed to facilitate various tasks related to business analysis. Here's a description of its features:
89 
90Header Section
91 
92The top navigation bar displays the application name "BA Copilot" and provides options like sharing the prototype and accessing user settings.
93 
94Left Sidebar Navigation
95 
96Home: The main dashboard or landing page of the BA Copilot. Assistant: A section likely dedicated to personalized assistance or guided help. Vault: A storage area for important documents or resources. Library: A collection of resources, templates, or reference materials. History: Access to past interactions, tasks, or saved work. Toolkit: Tools or utilities that support various BA activities. Community: A section for engaging with other users, discussing best practices, or sharing knowledge. Job Board: An area for job-related resources, possibly listing openings or career opportunities. Settings: User-specific settings, located at the bottom, allowing for customization of the BA Copilot experience. User Information: At the bottom, the user's email is displayed (e.g., alex@tesla.com), along with a security note indicating data is secure.
97 
98Main Content Area
99 
100Central Interaction Box
101 
102A prominent text box labeled "Ask anything..." invites users to enter questions, requests, or commands. This is the primary interface for interacting with the BA Copilot.
103 
104Quick Action Buttons
105 
106Below the interaction box, several buttons offer shortcuts to common BA tasks: Create flowchart from requirements: Generates a process flowchart based on a list of requirements. Create requirements from flowchart: Extracts and documents requirements from an existing flowchart. Create documentation from notes: Converts meeting notes or other informal documentation into formal documents. Create tests from documentation: Develops test cases or scripts based on existing documentation. Give me career advice: Provides personalized career guidance or resources. Recommend a toolkit: Suggests tools or software relevant to the user's current tasks or projects.
107 
108Overall Layout
109 
110The interface is clean, minimalist, and user-friendly, with a clear emphasis on functionality and ease of use. It is designed to guide users smoothly through typical BA tasks while providing easy access to tools and resources. This UI embodies the vision of a comprehensive yet streamlined tool tailored to assist business analysts in their day-to-day tasks, making their work more efficient and organized.
111 
112## Technical
113 
114### Overview
115 
116The following elements of the stack are ones I'm confident I'll build with:
117 
118- Next.js using App router, not Pages router always check that you have not made a recommendation that is for Pages router always check that your recommendation is appropriate for App router
119- Vercel AI
120- Supabase - db, including their type safety
121- Supabase - auth
122- Tanstack query
123- Material UI
124- Potentially Orval for API calls (typing, tanstack query, and mock service worker testing)
125- Quokka
126 
127I have intermediate experience with React. However, I am new to Next.js. So whenever implementing something with Next.js, teach me as if I don't know about it. Then offer to explain more. If you feel I should replace elements of my stack above, always tell me. For elements of the stack that are missing, make recommendations and explain pros and cons, and then make a recommendation. My app folder is src/app Never create app/Creating app/ will break things
128 
129### Devias Template
130 
131This workspace contains:
132 
133- the repo that I'm building in (ba-copilot-main, or ba-copilot)
134- a repo that I'm building from: nextjs-template-typescript
135 
136nextjs-template-typescript is a template made my Devias Kit Pro herein Devias. I will bring elements in from their repo to mine. So be aware of that, and consider recommending bringing elements in from there as well, and following their coding style and structure.
137 
138