.cursorrules Cursor AI with Next.js, Vercel AI, Supabase

Next.js Vercel Supabase .cursorrules prompt file

100

JackFinnegan

Save

Saved

NEW

Next.js Vercel Supabase .cursorrules prompt file

# Cursorrules

## Intro

I am building 'BA Copilot', where BA stands for Business Analysts.
I will sometimes refer to it as bacp.

## BA Copilot MVP

### Overview

It 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:

- additional discussion
- editing the diagram directly (bpmn-js supports this)

### UI Description

Here is a hierarchical, indented bullet description of the BA Copilot MVP, focusing on its functionality for creating and iterating on BPMN diagrams:

BA Copilot Interface

Question Input Section
Users can input questions or requests related to business processes.
Example: "Based on the doc content what have I missed?"
Process Section (Optional)
Allows 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.
Documents Section (Optional)
Users 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.
Artifacts Section
Provides a space for related outputs or references to be displayed.
Example: Diagram suggestions based on uploaded content.
Iterative BPMN Diagram Creation and Modification

Input Process
Users can pose questions or requests for modifications to existing processes.
Example: Asking for missing steps in the process based on document content.
AI-Powered Suggestions
The 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.
Diagram Editing
Users 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".
Documentation and References
The 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.
User Workflow

Start with a Question
User initiates the process by asking a question or making a request.
Upload Process Diagrams and Documents
User uploads existing diagrams and documents for context.
Receive AI-Generated Suggestions
System provides suggestions to enhance or correct the process flow.
Modify BPMN Diagram
User edits the BPMN diagram based on the received suggestions.
Iterate Until Satisfied
User continues to ask follow-up questions and modify the diagram until the desired outcome is achieved.
This BA Copilot MVP allows users to efficiently create, modify, and iterate on BPMN diagrams with contextual suggestions, leveraging uploaded documents and user queries.

## BA Copilot Vision

### Overview

The 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

### UI Description

This UI for the Business Analyst (BA) Copilot is designed to facilitate various tasks related to business analysis. Here's a description of its features:

Header Section

The top navigation bar displays the application name "BA Copilot" and provides options like sharing the prototype and accessing user settings.
Left Sidebar Navigation

Home: 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.
Main Content Area

Central Interaction Box
A 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.
Quick Action Buttons
Below 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.
Overall Layout

The 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.

## Technical

### Overview

The following elements of the stack are ones I'm confident I'll build with:

- 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
- Vercel AI
- Supabase - db, including their type safety
- Supabase - auth
- Tanstack query
- Material UI
- Potentially Orval for API calls (typing, tanstack query, and mock service worker testing)
- Quokka

I 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

### Devias Template

This workspace contains: - the repo that I'm building in (ba-copilot-main, or ba-copilot) - a repo that I'm building from: nextjs-template-typescript

nextjs-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.

stack:

No items found.

Next.js Vercel Supabase .cursorrules prompt file

JackFinnegan

About .cursorrules prompt file

What you can build

BA Copilot AI Chatbot: An AI-driven chatbot specifically designed for business analysts to create and iterate BPMN diagrams. It utilizes natural language processing to understand user queries and provides intelligent diagram suggestions and modifications.
BPMN Visualization and Editing Platform: A web app where users can upload BPMN diagrams in various formats, visualize them, and make real-time edits using tools like bpmn-js.
Document-Based BPMN Enhancer: A service that analyzes uploaded documents like employee handbooks or policy guides to identify missing steps or enhancements in business process diagrams, providing users with AI-generated suggestions.
Collaborative BPMN Tool with Community Sharing: An online platform for business analysts to share their BPMN diagrams, receive feedback from a community, and apply collective insights to improve business processes.
BA Resources and Toolkit Library: A comprehensive resource hub for business analysts featuring templates, tools, and guides for various BA tasks with easy integration into the BPMN diagram process.
AI-Powered BA Career Advisor: A digital assistant that provides business analysts with career advice, skill development resources, and job board listings based on their profile and current industry trends.
Requirement and Flowchart Generator: An application that turns user input into requirements and flowcharts, automating the transition between written requirements and visual process representations.
Secure BA Data Vault: A secure document management system for business analysts, allowing them to store, organize, and access critical resources while ensuring data privacy.
BA Interaction History Analyzer: A tool that leverages interaction history to identify patterns, suggest improvements, and provide insights into past BPMN processes.
BA Virtual Networking Community: An online platform for business analysts to network, engage in discussions around best practices, share knowledge, and collaborate on challenges.

Benefits

Integrated AI suggestion system enhances BPMN diagrams using uploaded documents, fostering intuitive iterative development and process modifications.
Comprehensive UI with hierarchical layout supports BA-specific tasks, including diagram creation, interactive editing, documentation, and community engagement.
Tailored technical guidance leverages Next.js and Vercel AI, adapting to developer proficiency with recommended tooling; maintains structural integrity of the project folder hierarchy.

Synopsis

This prompt is ideal for developers building AI-powered BPMN diagram tools for business analysts, helping create a web-based platform leveraging Next.js, Supabase, Vercel AI, and Tanstack Query.

Overview of .cursorrules prompt

The .cursorrules file describes the development of 'BA Copilot', a tool aimed at assisting Business Analysts. The core feature of this Minimum Viable Product (MVP) is an AI-powered chatbot that can create and modify BPMN diagrams through user interaction and suggestions based on uploaded documents. The UI encompasses sections for inputting queries, uploading process diagrams and documents, and viewing AI-generated suggestions. Additionally, the broader vision of BA Copilot includes a comprehensive platform for business analysts with features like a toolkit, community discussions, and a job board, promoting growth through network effects and virality. The technical stack primarily involves Next.js, Vercel AI, and Supabase, emphasized with a React foundation and using a Devias template for project structure. The overall aim is to deliver an efficient and user-friendly tool tailored for business analysis tasks.

Next.js Vercel Supabase .cursorrules prompt file

Next.js Vercel Supabase .cursorrules prompt file

Next.js Vercel Supabase .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Go Backend Scalability .cursorrules prompt file

Angular TypeScript .cursorrules prompt file

React Native .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

TypeScript Tailwind Next.js SSR .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Next.js React TypeScript .cursorrules prompt file

Python FastAPI Scalable API .cursorrules prompt file

PyQt6 EEG Processing .cursorrules prompt file

TypeScript Node.js Next.js React UI CSS .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (syst

Cursor Tip

Cursor Tip

Cursor Tip

Build ChatGPT with Python: Cursor AI Tutorial Guide

Create a Chrome Extension Fast: Cursor AI Tutorial

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components