AI-Assisted Development

LaunchSaaS is optimized for AI-assisted development. This guide covers how to configure and use popular AI coding tools effectively with the project.

Supported AI Tools

Quick Setup

Claude Code

Claude Code reads CLAUDE.md and AGENTS.md automatically. For enhanced capabilities, install plugins and skills:

Installing Plugins

Plugins enhance Claude Code's capabilities. To install:

1. Open Claude Code in your terminal
2. Run /plugins command to open the plugins manager
3. Enable the recommended plugins listed below

See Claude Code Plugins Documentation for more details.

Recommended Plugins:

After enabling, your .claude/settings.json should look like:

{
  "plugins": {
    "context7@claude-plugins-official": true,
    "feature-dev@claude-plugins-official": true,
    "typescript-lsp@claude-plugins-official": true,
    "code-simplifier@claude-plugins-official": true
  }
}

Installing Skills

Skills are reusable prompt templates. To install from vercel-labs/agent-skills:

npx add-skill vercel-labs/agent-skills

This will prompt you to select which skills to install. Recommended skills for this project:

Cursor / VS Code

Cursor automatically reads AGENTS.md in the project root. No additional configuration needed.

For best results:

1. Open the project root folder
2. Cursor will index AGENTS.md and understand project patterns
3. Reference specific files in your prompts for better context

GitHub Copilot

GitHub Copilot reads AGENTS.md for project context. For additional customization, create .github/copilot-instructions.md.

Configuration Files

AGENTS.md

The primary configuration file for all AI tools. Contains:

• Project architecture and patterns
• Tech stack overview
• Coding conventions
• Database schema patterns
• Server Actions patterns
• Payment integration patterns
• Auto-update rules for AGENTS.md when making architectural changes
• Auto-update rules for user documentation when making user-facing changes

CLAUDE.md

Claude Code-specific configuration. Contains:

• Reference to follow AGENTS.md guidelines
• Claude-specific exploration strategies (Task tool, Explore agent)
• Tool usage preferences (Glob, Grep, Read)
• Recommended skills from vercel-labs

.claude/settings.json

Claude Code plugins configuration.

Common Tasks with AI

Creating a Server Action

Prompt:

Create a server action to update user profile with email and name fields.
Use userActionClient since it requires authentication.
Follow the pattern in src/actions/user.ts

Expected behavior: AI will:

1. Create Zod schema in src/schemas/
2. Create action in src/actions/ using userActionClient
3. Follow existing patterns from the codebase

Creating a Protected Page

Prompt:

Create a new protected page at /dashboard/settings that allows users to update their preferences.
Follow the pattern in src/app/[locale]/(protected)/

Adding a Payment Provider

Prompt:

Add Polar as a new payment provider.
Follow the factory pattern in src/lib/features/payment/
Check existing providers like Stripe for reference.

Creating an Email Template

Prompt:

Create a new email template for order confirmation.
Follow the pattern in src/components/email/
Use React Email components.

Database Migration

Prompt:

Add a new "preferences" column to the users table.
Create proper migration using Drizzle.
Remember: don't edit auth.ts manually - it's auto-generated.

Best Practices

Provide Sufficient Context

• Reference specific file paths
• Mention the expected behavior
• Include relevant constraints

Good prompt:

Create a checkout action in src/actions/billing.ts using userActionClient.
It should create an order record and redirect to the payment provider.
Follow the pattern in the existing createCheckoutSession action.

Bad prompt:

Add checkout functionality

Follow Project Patterns

LaunchSaaS uses consistent patterns. Always remind AI to:

• Use factory pattern for new providers (payment, email, storage)
• Use next-safe-action for Server Actions with Zod validation
• Use shadcn/ui components for UI
• Follow App Router conventions (Server Components by default)

Verify AI Output

After AI generates code:

1. Check type safety - Run pnpm run build to catch type errors
2. Check patterns - Ensure code follows AGENTS.md conventions
3. Run lint - Execute pnpm run lint for style issues
4. Test manually - Verify the feature works as expected

Troubleshooting

context7 Plugin Issues

If context7 cannot fetch documentation:

1. Check if library ID is correct (use resolve-library-id first)
2. Common library IDs:
   • Better Auth: /better-auth/better-auth
   • Drizzle ORM: /drizzle-team/drizzle-orm
   • Next.js: /vercel/next.js
   • Stripe: /stripe/stripe-node

AI Not Following Project Patterns

If AI generates code that doesn't match project conventions:

1. Explicitly reference AGENTS.md in your prompt
2. Point to existing similar code as example
3. Be specific about which pattern to follow

Example:

Follow the Server Actions pattern documented in AGENTS.md.
Use userActionClient like in src/actions/user.ts

TypeScript Errors

Use the typescript-lsp plugin for real-time type checking:

1. Ensure plugin is enabled in .claude/settings.json
2. AI will catch type errors before generating code
3. If errors persist, run pnpm run build for detailed output

Optional: Additional Plugins and Skills

Additional Plugins

These plugins are optional but can be useful for specific tasks:

Additional Skills

For creating custom project-specific skills:

See Agent Skills Specification for more details on creating custom skills.

Resources

• Claude Code Documentation
• Claude Code Plugins
• Agent Skills Specification
• Cursor Documentation
• GitHub Copilot Documentation