Réserver un appel
Voir l'appel d'offre
Session 1 — Architecturer un SaaS pour le Vibecoding
Formation Master (Bac+5) · Durée 3h30 · Support de cours complet et détaillé
Fil rouge
Construire la plateforme AgentFlow — répondre à un appel d'offres réel pour une plateforme SaaS d'agents IA
Objectifs pédagogiques
À la fin de cette session, l'étudiant sera capable de :
1
Comprendre le vibecoding
Saisir ce qu'est le vibecoding et en quoi il transforme la posture du développeur
2
Analyser un cahier des charges
Déduire une architecture technique adaptée à partir d'un brief réel
3
Choisir une infrastructure
Sélectionner une infra à coût maîtrisé pour un MVP bootstrapé
4
Structurer un projet
Organiser le code pour qu'il soit repris sans dette technique
5
Configurer l'environnement
Mettre en place CLAUDE.md, Skills et MCP pour le vibecoding
6
Répondre à un appel d'offres
Produire une réponse technique structurée et professionnelle
Planning de la session
1
0:00–0:25 · Bloc 1 (25 min)
Le vibecoding — définition, posture, Claude Code
2
0:25–0:55 · Bloc 2 (30 min)
Découverte du brief — analyse de l'appel d'offres AgentFlow
3
0:55–1:30 · Bloc 3 (35 min)
Le contexte, c'est tout — CLAUDE.md, Skills, MCP
4
1:30–1:45 · Pause (15 min)
Pause
5
1:45–2:30 · Bloc 4 (45 min)
Répondre à l'appel d'offres — travail en groupe
6
2:30–3:05 · Bloc 5 (35 min)
Démo live — workflow complet avec Claude Code
7
3:05–3:25 · Bloc 6 (20 min)
Restitution & débat
8
3:25–3:30 · Bloc 7 (5 min)
Conclusion
Bloc 1
Le Vibecoding
Nouvelle posture du développeur · 25 min
Définition et origine du vibecoding
Le terme a été popularisé par Andrej Karpathy (ex-directeur IA chez Tesla) en février 2025.
"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."
En résumé : on décrit ce qu'on veut en langage naturel, et l'IA écrit le code.
Ce que le vibecoding change
Le rôle du développeur se transforme profondément :
Avant
80% écrire du code
10% architecturer
10% reviewer
Avec le vibecoding
20% écrire des instructions
40% architecturer
40% reviewer & tester

⚡ Le paradoxe du vibecoding : Plus on veut aller vite avec l'IA, plus il faut préparer en amont. Ce n'est pas un raccourci — c'est un changement de posture : on passe de rédacteur de code à architecte & reviewer.
Les risques du vibecoding sans architecture
Sans architecture, l'IA génère du code qui "marche" mais qui est :
🔧 Impossible à maintenir
Dette technique invisible qui s'accumule
🔀 Incohérent
Contradictions d'un fichier à l'autre
📉 Non scalable
Effondrement quand le produit décolle
🚫 Impossible à reprendre
Aucun autre développeur ne peut s'y retrouver
Le vibecoding sans architecture, c'est construire une maison sans fondations. Ça tient debout jusqu'au premier coup de vent.
Anti-patterns concrets du vibecoding
Ce qu'on obtient sans contexte :
1. God Controller
Un seul contrôleur de 800 lignes qui fait tout : auth, validation, appel LLM, envoi d'email, réponse JSON
2. Helper Hell
15 fichiers utils/, helpers/, tools/ avec des fonctions dupliquées et des noms vagues (processData, handleStuff)
3. Framework maison
L'IA réinvente un ORM, un router, un conteneur DI alors que Symfony/Laravel fournit tout ça nativement
4. Config fantasy
Chaque fichier utilise un format différent : .env, .yaml, .json, constantes PHP, variables en dur
Claude Code — l'outil du vibecoder
Claude Code est un agent de développement en CLI. Contrairement à un simple chatbot :
Il a accès au système de fichiers (lecture, écriture, modification)
Il exécute des commandes (git, composer, docker...)
Il comprend le contexte de tout le projet
Il enchaîne les actions de manière autonome (boucle agentique)
Il se connecte à des services externes via les MCP (Model Context Protocol)
Architecture de Claude Code
Claude Code orchestre l'ensemble du workflow de développement en combinant contexte, commandes réutilisables et connexions externes pour produire du code cohérent et maintenable.
Bloc 2
Découverte du brief
L'appel d'offres AgentFlow · 30 min
Le contexte AgentFlow
AgentFlow SAS
Startup bootstrapée basée à Lyon
2 fondateurs (1 business, 1 produit — pas de CTO technique)
Budget : économies personnelles — pas de levée de fonds
La vision
Le "Shopify des agents IA" : simple, accessible, freemium.
  • MVP fonctionnel en 3 mois
  • Test marché sur 6 mois
  • Si ça génère du revenu → on scale
  • Sinon → on coupe sans s'être ruiné
Les 3 plans d'abonnement
🆓 Starter
Gratuit
  • 1 agent
  • 100 messages/mois
  • Modèle de base
⚡ Pro
29€/mois
  • 5 agents
  • 5 000 messages/mois
  • Tous les modèles
  • RAG inclus
🏢 Business
99€/mois
  • Agents illimités
  • 50 000 messages/mois
  • API access
  • Support prioritaire
Gestion via Stripe — périodes d'essai, upgrades, downgrades automatisés.
Les domaines fonctionnels d'AgentFlow
Auth & Billing
Authentification, abonnements Stripe
Agent Builder
Création et configuration des agents IA
RAG Engine
Vectorisation, embeddings, pgvector
Chat Engine
Conversations en temps réel
Widget & Deploy
Intégration JS sur sites tiers
Analytics & Metrics
Tableaux de bord, métriques d'usage
n8n Orchestration
Automatisation des workflows
Admin Backoffice
Gestion plateforme et utilisateurs

❓ Question clé pour chaque domaine : MVP ou V2 ?
Le coût réel d'un appel LLM
Le calcul qui fait mal
1 conversation typique :
  • ~2 000 tokens input + ~500 tokens output
  • Coût : ~0.02€ par message
Plan Pro (29€/mois) = 5 000 messages/mois
Coût LLM réel = ~100€/mois

🚨 L'utilisateur paye 29€, ça coûte 100€ → PAS RENTABLE
Les solutions
Modèles moins chers pour tâches simples (Haiku, Mistral)
Cache des réponses fréquentes
Limiter la taille du contexte
Quotas vérifiés AVANT chaque appel
LlmProviderInterface pour router vers le bon modèle
Les questions d'un architecte avant de vibecoder
🏗️ Architecture
  • Multi-tenant (base séparée ou tenant_id ?)
  • Streaming (SSE, WebSocket, Mercure ?)
  • Monolithe ou microservices ?
💰 Coûts
  • Budget infra 200€/mois max
  • Self-hosted vs managed
  • Maîtrise des coûts LLM
📈 Scalabilité & Conformité
  • RGPD (stockage conversations)
  • Tests minimum requis
  • Reprenabilité du code
Le workflow Git du vibecoder
Le vibecoder ne rédige pas les issues à la main. Il ne corrige pas le code à la main. Il ne fait pas la review à la main. Il pilote Claude Code pour tout ça.
Le développeur est le chef d'orchestre, pas le musicien.
Bloc 3
Le contexte, c'est tout
CLAUDE.md, Skills, MCP · 35 min
Pourquoi le contexte est crucial
Imaginez embaucher un dev senior. Il arrive lundi, vous lui dites "code-moi AgentFlow". Sans onboarding, sans doc, sans accès au repo. C'est exactement ce que vous faites quand vous vibecez sans contexte.
Un freelance qui reprend votre code dans 6 mois doit comprendre l'architecture en 30 minutes.
Sans contexte
Code générique, incohérent, over-engineered, coûteux
Avec contexte
Code adapté, cohérent, maintenable, économe
Les 5 niveaux de contexte dans Claude Code
CLAUDE.md global
~/.claude/CLAUDE.md — préférences personnelles : langue, style de commit, outils
CLAUDE.md projet
./CLAUDE.md — règles du projet AgentFlow : stack, conventions, architecture
CLAUDE.md locaux
./src/Domain/Agent/CLAUDE.md — règles spécifiques par module/domaine
Mémoire auto
~/.claude/projects/<hash>/memory/ — apprentissage entre sessions, Claude retient ce qu'il apprend
Contexte de session
La conversation en cours — perdu en fin de session
Le mauvais CLAUDE.md
Exemple de ce qu'il NE faut PAS faire :
# Mon projet
Projet SaaS en PHP.
Utiliser Symfony.
Faire du code propre.

🚫 C'est comme embaucher un dev senior et lui dire juste "fais du bon code". Ça ne sert à rien. Sans contexte précis, Claude va générer du code générique qui ne respecte aucune convention de votre projet.
Le bon CLAUDE.md — Contexte projet & Stack
# AgentFlow — Plateforme SaaS d'agents IA

## Contexte
MVP bootstrapé, budget infra max 200€/mois,
code reprenable par un tiers, 6 mois max

## Stack technique
- Symfony 7.3 / PHP 8.4
- PostgreSQL 16 + pgvector
- Mercure (streaming SSE)
- LavinMQ (AMQP) + Messenger
- MinIO (stockage fichiers)
- API Platform 4
- Stimulus + Turbo + TailwindCSS v4 (AssetMapper)
- n8n (orchestration workflows)
- Docker Compose (1 VPS DigitalOcean)
- Stripe (paiements)
Le bon CLAUDE.md — Architecture & Git
Architecture
  • Monolithe modulaire
  • Multi-tenant avec tenant_id
  • API-first
  • LlmProviderInterface (abstraction du provider IA)
  • Voters pour l'autorisation
  • Messenger pour l'asynchrone
Git & workflow
  • Feature branches (feature/nom)
  • Commits conventionnels (feat:, fix:, chore:)
  • Une issue = une feature = une branche = une PR
  • Issues générées par Claude Code
  • PRs reviewées par Claude Code
  • Le développeur valide et merge
Le bon CLAUDE.md — Entités, Conventions, Règles métier
Entités principales
User, Subscription, Agent, Conversation, Message
Conventions
PSR-12, UUID v7, dates UTC, montants en centimes, groupes de sérialisation obligatoires
Règles métier
1 agent max pour Starter, quotas vérifiés AVANT appel LLM, documents limités à 10 Mo, isolation tenant sur CHAQUE requête (Doctrine Filter)
🚫 Ce qu'il NE faut PAS faire
Appeler un LLM sans vérifier le quota · Exposer les clés API côté client · Logger le contenu des conversations (RGPD)
Les Skills — commandes réutilisables
Les Skills sont des prompts pré-configurés dans .claude/commands/. Chaque fichier .md devient une commande /nom-du-fichier.

💡 Pourquoi c'est essentiel : chaque entité, chaque CRUD sera créé de la même façon. Un freelance qui reprend le projet voit immédiatement les patterns. Zéro surprise.
Exemples de Skills pour AgentFlow
/create-entity
Crée une entité Doctrine avec :
  • UUID v7
  • TimestampableTrait
  • tenant_id
  • API Platform configuré
  • Repository
  • Migration
  • Test unitaire
/create-crud
Crée un CRUD API Platform complet avec :
  • Opérations & sérialisation
  • Sécurité & filtre tenant
  • State Processors
  • Tests fonctionnels (201, 401, 403, 422)
  • Validation
Les MCP — connecter Claude au monde
MCP = Model Context Protocol — serveurs qui donnent des capacités supplémentaires à Claude Code
Context7
Documentation à jour de Symfony, API Platform, Stripe, pgvector — Claude ne travaille plus avec des infos obsolètes
Playwright
Tester le widget de chat dans un vrai navigateur — validation end-to-end automatisée
PostgreSQL
Inspecter la base de données en dev — Claude peut lire le schéma et vérifier les données
Configuration dans .claude/settings.json
Bloc 4
Répondre à l'appel d'offres
Architecture d'AgentFlow · Travail en groupe · 45 min
Consigne du travail en groupe
Former des groupes de 1-2 étudiants. Vous êtes un studio de développement contacté par AgentFlow.
1
Schéma d'architecture
Sur papier ou outil de dessin — représenter les composants et leurs interactions
2
Stack technique justifiée
Pourquoi ces choix ? Combien ça coûte ? Quelles alternatives ?
3
Modèle de données
Entités et relations principales — sans over-engineering
4
Stratégie d'infrastructure
Docker Compose sur un VPS — quel budget ? Quelle évolution ?

⭐ Bonus : découpage en issues et stratégie Git
Questions de guidage
🏗️ Architecture
  • Monolithe ou microservices ?
  • Comment structurer pour qu'un freelance reprenne ?
  • Streaming avec Mercure ?
  • Isolation multi-tenant ?
💰 Coûts
  • Budget 200€/mois
  • Self-hosted vs managed
  • Droplet DigitalOcean ~18€ vs Kubernetes managé 200€
📈 Scalabilité
  • 1000 utilisateurs dans 6 mois ?
  • Premiers goulots d'étranglement ?
  • MinIO local → S3 managé sans tout casser ?
🔀 Git
  • Découpage en issues (par domaine, feature, entité ?)
  • Qui rédige les issues ?
  • Qui fait la code review ?
Architecture de référence AgentFlow
Toute la plateforme tourne sur un seul VPS Docker, avec des connexions sortantes vers les providers LLM externes selon le plan d'abonnement de l'utilisateur.
Docker — pourquoi pour un MVP ?
Tout tourne sur 1 seul VPS — un docker compose up et c'est parti
En dev comme en prod, même environnement — zéro "ça marche sur ma machine"
Facile à reprendre : un freelance clone le repo, lance Docker, il code
Pas besoin de Kubernetes ou PaaS — c'est de l'over-engineering pour un MVP
Quand ça scale : on sépare les containers sur plusieurs serveurs, ou on migre vers du managed
Docker Compose — les services AgentFlow
Un seul fichier, toute l'infra :
app
Symfony + PHP-FPM + Nginx
database
PostgreSQL 16 + pgvector
messenger-worker
Symfony Messenger consumer
mercure
Hub Mercure pour le streaming SSE
lavinmq
Message broker AMQP
minio
Stockage S3-compatible
n8n
Orchestration workflows
mailpit
Emails en dev
Budget infra MVP — ~50€/mois
18€
VPS DigitalOcean
Docker Compose, tout dessus
~30€
Appels LLM
Variable selon usage bêta
~50€
Total MVP
Par mois, tout compris
Services externes gratuits
  • Domaine + DNS Cloudflare ~10€
  • Email Resend free tier ~0€
  • Monitoring Sentry free tier ~0€
Évolution si ça scale
  • DB managée + Object Storage → ~150€/mois
  • PaaS + CDN → ~300€/mois
Bloc 5
Démo live
Le workflow complet du vibecoder · 35 min
Le cycle complet : CLAUDE.md → Issue → Code → Review
01
CLAUDE.md prêt (2 min)
Notre investissement le plus rentable — toutes les conventions, la stack, les règles métier
02
Claude génère une issue GitHub (5 min)
Titre, contexte métier, critères d'acceptation, contraintes techniques. Claude injecte automatiquement les conventions du CLAUDE.md.
03
Claude code l'issue /fix-issue (10 min)
Lit l'issue, crée une branche, code l'entité, configure API Platform, crée les tests, commit, push, crée la PR
04
Claude review la PR (10 min)
Poste des commentaires sur GitHub, vérifie les conventions, signale les manques, puis corrige les commentaires
05
Résultat global (8 min)
Issue détaillée, PR avec code et review, tests qui passent, API fonctionnelle (Swagger), code sans dette technique
Le résultat de la démo
✅ Zéro ligne écrite
On n'a pas écrit une seule ligne de code. On a juste décrit ce qu'on voulait.
✅ Conventions respectées
Chaque fichier respecte les conventions du CLAUDE.md — cohérence totale.
✅ Code professionnel
Testé, reprenable par n'importe qui, sans dette technique.

🎨 Le frontend (Stimulus + TailwindCSS) sera vu quand on développera le dashboard.
Bloc 6
Restitution & débat
Chaque groupe présente ses choix · 20 min
Checklist reprenabilité — le test du freelance
Un nouveau dev peut-il reprendre votre projet sans douleur ?
⚡ Lancement rapide
Un nouveau dev peut lancer le projet en < 5 min (docker compose up) ?
📄 CLAUDE.md complet
Décrit la stack, les conventions et les commandes utiles ?
🗺️ Architecture schématisée
Le schéma d'architecture est disponible et à jour ?
📏 Conventions explicites
PSR-12, nommage, structure — tout est documenté ?
🧪 Tests présents
Au moins auth, billing, quotas sont couverts ?
🔑 Variables documentées
Le .env.example est complet et à jour ?
🧩 Entités claires
Pas de God Entity à 40 champs ?
🚀 README de déploiement
Le README explique comment déployer en production ?
7-8 / 8
✅ Reprenable sans problème
5-6 / 8
⚠️ Il faudra poser des questions
< 5 / 8
🚨 Dette technique garantie
Les 10 commandements du vibecoder
1
Tu architectureras avant de coder
Jamais de code sans plan
2
Tu documenteras ton contexte
CLAUDE.md est ton meilleur investissement
3
Tu reliras tout le code généré
Tu es le reviewer, pas le rédacteur
4
Tu testeras systématiquement
Demande toujours des tests
5
Tu itéreras en petites étapes
Une feature à la fois
6
Tu versioneras régulièrement
Commit souvent
7
Tu ne copieras pas aveuglément
Comprendre avant d'accepter
8
Tu utiliseras des skills
Automatise les patterns récurrents
9
Tu enrichiras le contexte
Mets à jour le CLAUDE.md au fil du projet
10
Tu resteras le décideur
L'IA propose, tu disposes
Conclusion & passerelle vers la Session 2
✅ Ce qu'on a fait
  • Compris le vibecoding et sa posture
  • Analysé un cahier des charges réel
  • Architecturé avant de vibecoder
  • Configuré le contexte (CLAUDE.md, Skills, MCP)
  • Vu le workflow complet en démo
🚀 Session 2 — dans 4 mois
  • RAG (vectorisation, embeddings, pgvector)
  • Chat en streaming (Mercure, SSE)
  • Hooks (automatiser la qualité)
  • Workflows multi-agents
  • Sécurité (OWASP)
  • Travail en équipe

📝 Devoir optionnel : Installer Claude Code, créer une entité AgentFlow avec le CLAUDE.md, observer comment le contexte influence la qualité du code généré.