Using LaunchKit with Cursor: Complete Setup Guide for AI-Assisted Development

Why Cursor + LaunchKit Is the Ultimate Stack

Cursor is an AI-first code editor built on VS Code. LaunchKit is a production-ready Next.js starter. Together, they're the fastest path from idea to shipped product.

Cursor understands your entire codebase. LaunchKit provides the foundation—auth, payments, CRM, blog. You provide the product vision. The AI handles the implementation details.

This guide covers everything: initial setup, brand customization, effective prompting, and the workflow that lets you ship in days, not months.

Step 1: Clone and Open in Cursor

Start by cloning LaunchKit and opening it in Cursor:

git clone https://github.com/your-org/launchkit-template.git my-saas
cd my-saas
cursor .

Cursor will index your codebase automatically. This takes 30-60 seconds. Once complete, Cursor understands every file, component, and pattern in LaunchKit.

Enable Codebase Context

In Cursor Settings → Features, ensure "Codebase" is enabled. This lets @codebase queries search your entire project.

Step 2: Install Dependencies

Open Cursor's integrated terminal (Ctrl/Cmd + `) and run:

npm install

Copy the environment template:

cp .env.example .env.local

Step 3: Add Your Brand Assets

Before writing any code, brand your template. This makes it yours immediately and motivates the work ahead.

Replace Icons and Images

Drop these files into the /app folder:

• favicon.ico — Browser tab icon (32x32 or 16x16)
• icon.png — App icon (512x512, used for PWA)
• apple-icon.png — iOS home screen icon (180x180)
• opengraph-image.png — Social sharing image (1200x630)
• twitter-image.png — Twitter card image (1200x600)

Pro tip: Use RealFaviconGenerator to create all icon sizes from one image.

Update config.ts

Open config.ts and update your brand details. Ask Cursor:

"Update config.ts with my brand:
- App name: [Your Product]
- Description: [One-line pitch]
- Domain: [yourdomain.com]
- Support email: [hello@yourdomain.com]"

Cursor will update all relevant fields while preserving the structure.

Step 4: Configure Services with AI Help

LaunchKit needs Supabase and Stripe credentials. Use Cursor to guide you through setup:

Supabase Setup

Ask Cursor:

"@codebase What Supabase credentials do I need and where do I put them?"

Cursor will explain exactly which keys to copy from your Supabase dashboard and which .env.local variables to set.

Then run the database seed:

npm run seed:supabase

Stripe Setup

Ask Cursor:

"@codebase How do I configure Stripe? What products do I need to create?"

Cursor will walk you through creating products in Stripe and updating the price IDs in config.ts.

Step 5: Run the Dev Server

Start the development server:

npm run dev

Open http://localhost:3000 and you should see your branded landing page.

Vibe Coding: Effective Cursor Prompts

Now the fun part. Here are battle-tested prompts for common tasks:

Understanding the Codebase

"@codebase Explain how authentication works in this project"
"@codebase Where is the Stripe webhook handled? Walk me through the flow"
"@codebase How do I add a new page to the dashboard?"

Customizing Components

"Update the Hero component headline to say '[Your Value Prop]'
and the subheadline to say '[Your supporting copy]'"

"Change the pricing cards to show monthly prices instead of one-time"

"Add a new testimonial with name '[Customer]', role '[Role]',
and quote '[Their quote]'"

Adding Features

"@codebase Add a new API route at /api/feedback that accepts
{ message, rating } and saves to Supabase"

"Create a new dashboard page at /dashboard/settings that lets users
update their profile name and email"

"Add a contact form to the landing page that uses the existing
lead capture API"

The Magic of @codebase

Always start exploratory questions with @codebase. This tells Cursor to search your entire project for relevant context before answering.

For edits to specific files, select the code first, then use Cmd+K (Edit) with your instruction. Cursor will modify just that selection.

Cursor Composer for Multi-File Changes

Cursor's Composer (Cmd+I) can edit multiple files at once. This is perfect for features that span components, APIs, and types.

Example prompt:

"Add a 'priority' field to leads:
1. Update the leads table type in types/
2. Add the field to the lead capture form
3. Update the API to accept and save it
4. Show it in the leads dashboard table"

Composer will show you all the changes across files before you accept them.

Pro Tips for AI-Assisted Development

1. Be Specific About Patterns

LaunchKit has established patterns. Tell Cursor to follow them:

"Create this following the same pattern as the existing
/api/lead/route.ts endpoint"

2. Review Before Accepting

Always review Cursor's changes before accepting. Look for:

• Correct imports and type usage
• Proper error handling
• Consistent styling with existing code
• No hardcoded values that should be in config

3. Iterate in Small Steps

Instead of one massive prompt, break work into steps:

Step 1: "Create the database schema for feature X"
Step 2: "Build the API endpoint"
Step 3: "Create the UI component"
Step 4: "Wire it all together"

4. Use Chat for Planning

Before building, ask Cursor to plan:

"@codebase I want to add [feature]. What files would I need to
modify and what's the best approach given the existing architecture?"

Common Tasks: Copy-Paste Prompts

Add a New Blog Post

"Add a new blog post to app/blog/_assets/content.tsx:
- Slug: [your-slug]
- Title: [Your Title]
- Description: [Meta description]
- Category: tutorial
- Content: [Paste your content or describe what to write]"

Customize the Dashboard

"@codebase Add a new sidebar item called 'Analytics' that links
to /dashboard/analytics, using the same pattern as existing nav items"

Add Email Notification

"@codebase When a new lead is captured, send an email notification
to the admin. Use the existing Resend setup and email patterns."

Create a New Landing Section

"Create a new landing page section called 'HowItWorks' with
3 steps: [Step 1], [Step 2], [Step 3]. Follow the styling patterns
of existing sections like Features."

Deploying Your SaaS

When you're ready to ship, ask Cursor:

"@codebase What environment variables do I need to set in Vercel
for production deployment?"

Then push to GitHub and import to Vercel:

git add .
git commit -m "Initial customization"
git push origin main

Connect your repo to Vercel, add environment variables, and deploy.

Troubleshooting with AI

When things go wrong, Cursor is your debugging partner:

"I'm getting this error: [paste error]. @codebase What's
causing it and how do I fix it?"

"The Stripe webhook isn't firing. @codebase Walk me through
debugging the webhook handler"

"My styles aren't applying. @codebase How does Tailwind work
in this project?"

The Vibe Coding Workflow

Here's the workflow that gets products shipped:

• Morning: Brand the template (30 min)
• Afternoon: Configure services (1-2 hours)
• Evening: Customize copy and landing page (2 hours)
• Next day: Add your core feature with AI assistance (4-6 hours)
• Day 3: Polish, test, deploy

Three days from clone to launched product. That's the power of LaunchKit + Cursor.