ScaleRocket/Web
ENFR

Configuration pour le développement assisté par IA

Configurez votre environnement de développement pour le codage assisté par IA avec Claude Code, Cursor, Windsurf ou Codex.

Configuration pour le développement assisté par IA

ScaleRocket est conçu pour fonctionner avec les assistants de codage IA. Que vous utilisiez Claude Code, Cursor, Windsurf ou Codex, le projet inclut tout ce dont votre IA a besoin pour comprendre et modifier le codebase.

Comment ça fonctionne

ScaleRocket inclut deux fichiers à la racine du projet que les assistants IA lisent automatiquement :

  • CLAUDE.md — Lu par Claude Code et Cursor. Contient le guide complet du projet, l'architecture, les conventions et les commandes dangereuses à éviter.
  • AGENTS.md — Lu par Codex, Windsurf et d'autres outils. Contient une version condensée avec les mêmes règles de sécurité.

Vous n'avez rien à configurer pour une utilisation basique. Ouvrez simplement votre projet et commencez à prompter.

Choisissez votre outil IA

Idéal pour : Développement en terminal, compréhension complète du codebase, intégrations MCP.

Claude Code s'exécute dans votre terminal et lit CLAUDE.md automatiquement au lancement.

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

Claude Code a un support natif de MCP — il lit .mcp.json et se connecte à vos services automatiquement.

Premier prompt à utiliser :

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

Idéal pour : Expérience IDE visuelle, édition inline, Composer pour les modifications multi-fichiers.

Cursor lit CLAUDE.md automatiquement quand vous ouvrez le dossier du projet.

  1. Ouvrez le dossier du projet dans Cursor
  2. Ouvrez Composer (Cmd+K / Ctrl+K) pour les modifications multi-fichiers
  3. Ouvrez Chat (Cmd+L / Ctrl+L) pour les questions

Premier prompt à utiliser (dans 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.

Astuce : Dans Cursor, utilisez @filename pour référencer des fichiers spécifiques dans vos prompts. Par exemple : @packages/config/src/pricing.ts update the pricing plans.

Idéal pour : Expérience IDE avec le flux Cascade pour un guidage étape par étape.

Windsurf lit AGENTS.md automatiquement.

  1. Ouvrez le dossier du projet dans Windsurf
  2. Ouvrez Cascade (le panneau IA) sur la droite
  3. Commencez à prompter

Premier prompt à utiliser :

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.

Idéal pour : Développement en terminal avec les modèles OpenAI.

Codex lit AGENTS.md automatiquement.

# Start Codex in your project
cd your-project
codex

Premier prompt à utiliser :

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.

Les bases de Git (pour les débutants)

Git suit les modifications dans votre code. Voyez-le comme un "historique d'annulation" qui vous permet aussi de téléverser votre code sur GitHub.

Configuration initiale

Exécutez ces commandes une seule fois sur votre ordinateur :

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

Flux de travail quotidien

# See what changed
git status

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

# Upload to GitHub
git push

Pousser vers GitHub (première fois)

Demandez à Claude de le faire pour vous :

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

Si vous avez le GitHub MCP configuré, Claude créera le dépôt et poussera automatiquement.

Sans MCP :

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

Ouvrez le panneau terminal (Ctrl+`) et exécutez :

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

Ou utilisez le panneau Source Control (Ctrl+Shift+G) pour commiter et pousser visuellement.

Ouvrez le terminal et exécutez :

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

Ou demandez à Cascade :

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

Demandez à Codex de le faire :

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

Ou exécutez manuellement :

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

Urgence : Annuler des erreurs

# 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 : Faites toujours un git commit avant de demander à votre IA de faire de gros changements. Si quelque chose tourne mal, vous pourrez toujours revenir en arrière.

Configurer les serveurs MCP

MCP (Model Context Protocol) permet à votre assistant IA de se connecter directement à des services comme votre base de données et GitHub. Au lieu de copier-coller des clés et des schémas, l'IA peut lire et modifier les choses directement.

ScaleRocket inclut un .mcp.json à la racine du projet, pré-configuré pour tous les services nécessaires.

Claude Code lit .mcp.json nativement. Il suffit de configurer les tokens :

Supabase MCP

  1. Allez sur supabase.com/dashboard → avatar (en haut à droite) → Account → Access Tokens
  2. Cliquez sur Generate new token, nommez-le "Claude Code"
  3. Ouvrez .mcp.json et remplacez YOUR_SUPABASE_ACCESS_TOKEN par votre token

Convex MCP

  1. Lancez npx convex dev pour démarrer votre projet Convex
  2. Le nom de déploiement s'affiche dans le terminal (ex: your-app-123)
  3. Ouvrez .mcp.json et remplacez YOUR_DEPLOYMENT_NAME par votre nom de déploiement

GitHub MCP

  1. Allez sur github.com/settings/tokens → Fine-grained tokens → Generate new token
  2. Sélectionnez vos dépôts, accordez les permissions Contents + Pull Requests en lecture/écriture
  3. Ouvrez .mcp.json et remplacez YOUR_GITHUB_TOKEN par votre token

Stripe MCP

  1. Allez sur dashboard.stripe.com/apikeys
  2. Copiez votre Clé secrète (commence par sk_test_ en mode test ou sk_live_ en production)
  3. Ouvrez .mcp.json et remplacez YOUR_STRIPE_SECRET_KEY par votre clé

Sécurité : Utilisez votre clé en mode test pendant le développement. Ne partagez et ne commitez jamais votre clé secrète.

Redémarrez Claude Code après avoir sauvegardé .mcp.json.

Cursor supporte MCP via ses paramètres :

  1. Ouvrez Cursor Settings → MCP
  2. Ajoutez chaque serveur manuellement :

Supabase :

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

Convex :

  • Command : npx
  • Args : -y @anthropic-ai/convex-mcp-server@latest
  • Env : CONVEX_DEPLOYMENT=YOUR_DEPLOYMENT_NAME
  • Obtenir le nom de déploiement depuis la sortie de npx convex dev

GitHub :

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

Stripe :

  • Type : HTTP
  • URL : https://mcp.stripe.com
  • Header : Authorization: Bearer YOUR_STRIPE_SECRET_KEY
  • Obtenir la clé : dashboard.stripe.com/apikeys

Windsurf supporte MCP via ses paramètres :

  1. Ouvrez Windsurf Settings → AI → MCP Servers
  2. Ajoutez chaque serveur avec la même configuration que le fichier .mcp.json
  3. Obtenez vos tokens depuis :

Codex peut lire .mcp.json si votre version le supporte. Sinon, configurez MCP via les paramètres de Codex ou l'environnement.

Obtenez vos tokens depuis :

Ce que MCP permet

Une fois configuré, votre IA peut :

  • Supabase MCP : Lire le schéma de votre base de données, créer des tables, gérer les politiques RLS, exécuter des requêtes, vérifier les migrations
  • Convex MCP : Lire votre schéma, gérer les fonctions, requêter les données, déboguer les déploiements
  • GitHub MCP : Créer des dépôts, pousser du code, créer des pull requests, gérer les issues
  • Stripe MCP : Créer des produits et prix, gérer les abonnements, vérifier les événements webhook, lire les données de paiement

Prompts de démarrage

Copiez-collez ces prompts directement dans votre outil IA. Remplacez [BRACKETS] par vos propres détails.

Configuration initiale

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.

Construire votre première fonctionnalité

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.

Personnaliser la page d'accueil

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.

Déployer en 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.

Ajouter une nouvelle table de base de données

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

Conseils pour le développement assisté par IA

  1. Commencez toujours par "Read CLAUDE.md first." Cela donne à l'IA le contexte complet du projet.
  2. Soyez précis. "Add a page at /dashboard/analytics showing daily signups" est mieux que "add analytics."
  3. Collez les messages d'erreur. Copiez l'erreur complète — l'IA peut généralement la corriger immédiatement.
  4. Commitez avant les gros changements. Exécutez git add . && git commit -m "before AI changes" d'abord. Si quelque chose casse, vous pourrez revenir en arrière.
  5. Testez après chaque modification. Exécutez pnpm dev et vérifiez dans le navigateur. Corrigez les problèmes un par un.
  6. Ne sautez pas la checklist. Utilisez la Ship Checklist (bouton en bas à droite dans cette documentation) pour suivre votre progression.

Fini ? Marquez cette page comme terminée.

On this page

Configuration pour le développement assisté par IAComment ça fonctionneChoisissez votre outil IALes bases de Git (pour les débutants)Configuration initialeFlux de travail quotidienPousser vers GitHub (première fois)Urgence : Annuler des erreursConfigurer les serveurs MCPSupabase MCPConvex MCPGitHub MCPStripe MCPCe que MCP permetPrompts de démarrageConfiguration initialeConstruire votre première fonctionnalitéPersonnaliser la page d'accueilDéployer en productionAjouter une nouvelle table de base de donnéesConseils pour le développement assisté par IA