ScaleRocket/Web

AI-Assisted Development Setup

Set up your development environment for AI-assisted coding with Claude Code, Cursor, Windsurf, or Codex.

AI-Assisted Development Setup

ScaleRocket is designed to work with AI coding assistants. Whether you use Claude Code, Cursor, Windsurf, or Codex, the project includes everything your AI needs to understand and modify the codebase.

How It Works

ScaleRocket includes two files at the root of the project that AI assistants read automatically:

  • CLAUDE.md — Read by Claude Code and Cursor. Contains the full project guide, architecture, conventions, and dangerous commands to avoid.
  • AGENTS.md — Read by Codex, Windsurf, and other tools. Contains a condensed version with the same safety rules.

You don't need to configure anything for basic usage. Just open your project and start prompting.


Choose Your AI Tool

Best for: Terminal-based development, full codebase understanding, MCP integrations.

Claude Code runs in your terminal and reads CLAUDE.md automatically on launch.

# Start Claude Code in your project
cd your-project
claude

Claude Code has native MCP support — it reads .mcp.json and connects to your services automatically.

First prompt to use:

Read CLAUDE.md first. Then give me an overview of this SaaS boilerplate
and what I need to set up to start developing.

Best for: Visual IDE experience, inline editing, Composer for multi-file changes.

Cursor reads CLAUDE.md automatically when you open the project folder.

  1. Open the project folder in Cursor
  2. Open Composer (Cmd+K / Ctrl+K) for multi-file changes
  3. Open Chat (Cmd+L / Ctrl+L) for questions

First prompt to use (in Composer):

@CLAUDE.md Read this file first. Then give me an overview of this SaaS
boilerplate and what I need to set up to start developing.

Tip: In Cursor, use @filename to reference specific files in your prompts. For example: @packages/config/src/pricing.ts update the pricing plans.

Best for: IDE experience with Cascade flow for step-by-step guidance.

Windsurf reads AGENTS.md automatically.

  1. Open the project folder in Windsurf
  2. Open Cascade (the AI panel) on the right
  3. Start prompting

First prompt to use:

Read AGENTS.md and CLAUDE.md in this project. Then give me an overview
of this SaaS boilerplate and what I need to set up.

Best for: Terminal-based development with OpenAI models.

Codex reads AGENTS.md automatically.

# Start Codex in your project
cd your-project
codex

First prompt to use:

Read AGENTS.md and CLAUDE.md. Then give me an overview of this SaaS
boilerplate and what I need to set up to start developing.

Git Basics (for Beginners)

Git tracks changes in your code. Think of it as an "undo history" that also lets you upload your code to GitHub.

First-Time Setup

Run these once on your computer:

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Daily Workflow

# See what changed
git status

# Save your progress
git add .
git commit -m "added user dashboard"

# Upload to GitHub
git push

Push to GitHub (first time)

Ask Claude to do it for you:

Create a private GitHub repo called "my-saas" and push this project to it.

If you have the GitHub MCP configured, Claude will create the repo and push automatically.

Without MCP:

git remote add origin https://github.com/you/my-saas.git
git push -u origin main

Open the terminal panel (Ctrl+`) and run:

git remote add origin https://github.com/you/my-saas.git
git push -u origin main

Or use the Source Control panel (Ctrl+Shift+G) to commit and push visually.

Open the terminal and run:

git remote add origin https://github.com/you/my-saas.git
git push -u origin main

Or ask Cascade:

Help me push this project to a new GitHub repo called "my-saas".

Ask Codex to do it:

Create a private GitHub repo called "my-saas" and push this project to it.

Or run manually:

git remote add origin https://github.com/you/my-saas.git
git push -u origin main

Emergency: Undo mistakes

# Undo uncommitted changes (careful — this discards your work!)
git stash                # Saves changes, can recover later with "git stash pop"

# Go back to last commit (WARNING: loses all uncommitted changes)
git checkout .           # Only use if you committed recently

# See your commit history
git log --oneline

Important: Always git commit before asking your AI to make big changes. If something goes wrong, you can always go back.


Setting Up MCP Servers

MCP (Model Context Protocol) lets your AI assistant connect directly to services like your database and GitHub. Instead of copying and pasting keys and schemas, the AI can read and modify things directly.

ScaleRocket includes a .mcp.json at the project root, pre-configured for all the services you need.

Claude Code reads .mcp.json natively. Just configure the tokens:

Supabase MCP

  1. Go to supabase.com/dashboard → avatar (top right) → AccountAccess Tokens
  2. Click Generate new token, name it "Claude Code"
  3. Open .mcp.json and replace YOUR_SUPABASE_ACCESS_TOKEN with your token

Convex MCP

  1. Run npx convex dev to start your Convex project
  2. Your deployment name is shown in the terminal (e.g. your-app-123)
  3. Open .mcp.json and replace YOUR_DEPLOYMENT_NAME with your deployment name

GitHub MCP

  1. Go to github.com/settings/tokensFine-grained tokensGenerate new token
  2. Select your repos, grant Contents + Pull Requests read/write
  3. Open .mcp.json and replace YOUR_GITHUB_TOKEN with your token

Stripe MCP

  1. Go to dashboard.stripe.com/apikeys
  2. Copy your Secret key (starts with sk_test_ in test mode or sk_live_ in production)
  3. Open .mcp.json and replace YOUR_STRIPE_SECRET_KEY with your key

Security: Use your test mode key during development. Never share or commit your secret key.

Restart Claude Code after saving .mcp.json.

Cursor supports MCP via its settings:

  1. Open Cursor Settings → MCP
  2. Add each server manually:

Supabase:

  • Command: npx
  • Args: -y @supabase/mcp-server-supabase@latest --access-token YOUR_TOKEN
  • Get your token: supabase.com/dashboard → Account → Access Tokens

Convex:

  • Command: npx
  • Args: -y @anthropic-ai/convex-mcp-server@latest
  • Env: CONVEX_DEPLOYMENT=YOUR_DEPLOYMENT_NAME
  • Get your deployment name from npx convex dev output

GitHub:

  • Command: npx
  • Args: -y @modelcontextprotocol/server-github
  • Env: GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_TOKEN
  • Get your token: github.com/settings/tokens → Fine-grained tokens

Stripe:

Windsurf supports MCP via its settings:

  1. Open Windsurf Settings → AIMCP Servers
  2. Add each server with the same configuration as the .mcp.json file
  3. Get your tokens from:

Codex can read .mcp.json if supported by your version. Otherwise, configure MCP via the Codex settings or environment.

Get your tokens from:

What MCP enables

Once configured, your AI can:

  • Supabase MCP: Read your database schema, create tables, manage RLS policies, run queries, check migrations
  • Convex MCP: Read your schema, manage functions, query data, debug deployments
  • GitHub MCP: Create repos, push code, create pull requests, manage issues
  • Stripe MCP: Create products and prices, manage subscriptions, check webhook events, read payment data

Starter Prompts

Copy-paste these prompts directly into your AI tool. Replace [BRACKETS] with your own details.

Initial Setup

Read CLAUDE.md first. Then help me set up this ScaleRocket boilerplate:
1. Create a Supabase project and configure all .env.local files
2. Push the database schema with npx supabase db push
3. Create Stripe products in TEST mode and update pricing.ts
4. Start the dev server with pnpm dev
Walk me through each step. Ask me before running any dangerous commands.

Building Your First Feature

I want to add [DESCRIBE YOUR FEATURE] to my SaaS.
Read CLAUDE.md first for the project structure.
- Create a new route in apps/app/src/routes/_authenticated/
- If I need a new database table, create a migration in supabase/migrations/
- If I need credits, use the use-credits Edge Function
- Show me the complete code for each file.

Customizing the Landing Page

Read apps/web/app/components/ to understand the current LP.
I want to customize the landing page for my [DESCRIBE YOUR PRODUCT]:
- Update the Hero heading and description
- Update the Features section with my product's features
- Update the FAQ with relevant questions
Keep the same design and layout.

Deploying to Production

Read CLAUDE.md deployment section. Help me deploy my SaaS to production:
1. Create 3 Vercel projects (web, app, ops)
2. Set up all environment variables
3. Switch Stripe to LIVE mode and recreate products
4. Configure Stripe webhook with the Supabase Edge Function URL
5. Set up Supabase Auth redirect URLs
6. Deploy Edge Functions
Walk me through each step. Warn me about anything that could break.

Adding a New Database Table

I need a new table called [TABLE_NAME] with these columns: [DESCRIBE].
1. Create a migration in supabase/migrations/ (use the next number)
2. Add RLS policies so users can only access their own data
3. Add the TypeScript type in packages/types/src/index.ts
4. Push with npx supabase db push

Tips for AI-Assisted Development

  1. Always start with "Read CLAUDE.md first." This gives the AI full project context.
  2. Be specific. "Add a page at /dashboard/analytics showing daily signups" beats "add analytics."
  3. Paste error messages. Copy the full error — the AI can usually fix it immediately.
  4. Commit before big changes. Run git add . && git commit -m "before AI changes" first. If something breaks, you can go back.
  5. Test after each change. Run pnpm dev and check the browser. Fix issues one at a time.
  6. Don't skip the checklist. Use the Ship Checklist (bottom-right button in these docs) to track your progress.

Done reading? Mark this page as complete.

On this page