Google Stitch & Antigravity : Le duo explosif pour coder (presque) sans les mains

Tu as l’habitude de voir l’IA compléter ton code ou te suggérer une fonction. C’est pratique, c’est vrai. Mais imagine un instant que tu ne sois plus le simple ouvrier qui valide l’autocomplétion, mais le chef de chantier.

Et si je te disais que tu peux demander à ton terminal de « créer le design d’une app », de le visualiser, de récupérer le code et de lancer le serveur de dev, le tout sans quitter ton IDE ? C’est exactement ce que permet la combinaison de Google Antigravity et Stitch.

Aujourd’hui, on plonge dans le futur du « Vibe Coding » avec une stack qui change tout : des agents autonomes connectés à un moteur de design génératif via le protocole MCP.

1. Antigravity : Bienvenue à « Mission Control »

Oublie l’IDE classique. Google Antigravity, c’est ce qu’on appelle un environnement de développement « Agent-First ».

Contrairement à un assistant classique qui attend sagement que tu tapes du code, Antigravity fonctionne comme un centre de commande. Tu assignes une mission (ex: « Crée une Todo App »), et il déploie des agents autonomes capables de planifier, écrire du code, exécuter des commandes dans le terminal et même vérifier le résultat dans un navigateur intégré.

L’interface ressemble à un IDE (éditeur, terminal), mais avec une vue « Manager » où tu supervises tes agents qui bossent en parallèle. Ils génèrent des « Artéfacts » (fichiers, diffs, logs de tests) que tu peux auditer. C’est la fin du copier-coller depuis ChatGPT : ici, l’agent a les mains dans le cambouis.

2. Google Stitch : Ton designer personnel (et infatigable)

C’est bien beau d’avoir des agents qui codent, mais si c’est pour produire des interfaces moches, non merci. C’est là qu’entre en scène Stitch.

Stitch est un outil de design assisté par IA (Google Labs) qui génère des interfaces utilisateur (UI) complètes à partir de simples prompts textuels. Mais attention, ce n’est pas juste un générateur d’images.

Ce qu’il a sous le capot :

• Génération UI & Code : Il ne te donne pas juste un PNG. Il génère du HTML propre avec Tailwind CSS prêt à être intégré.
• Modes de Design : Tu peux choisir ton moteur. Besoin de logique complexe ? Utilise « Thinking with Gemini 3 Pro ». Envie de refaire un vieux design avec une vibe rétro-futuriste ? Le mode « Redesign » est là pour ça.
• L’arme secrète (MCP) : C’est la killer feature. Stitch agit comme un serveur MCP distant (Remote Model Context Protocol). Cela signifie que tes outils locaux (comme Antigravity ou ton terminal) peuvent « parler » directement à Stitch pour créer des écrans ou récupérer des assets sans que tu aies besoin d’ouvrir le navigateur.

3. Installation : Connecter Stitch via MCP

C’est ici que la magie opère. Pour que ton agent local puisse piloter le designer dans le cloud, il faut configurer le « handshake » (la poignée de main).

La méthode la plus simple depuis la dernière mise à jour est l’utilisation d’une Clé API.

Étape 0 : Récupérer ta clé

Rends-toi dans les paramètres de Stitch (Stitch Settings), section « API Keys », et génère une nouvelle clé.

Configuration dans Antigravity

1. Ouvre le « Agent Panel ».
2. Clique sur les trois points > MCP Servers > Manage MCP Servers.
3. Choisis « View raw config » et ajoute ceci à ton JSON :

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "TA-CLE-API-ICI"
      }
    }
  }
}

Redémarre l’agent, et c’est tout. Il voit maintenant tes projets.

Configuration pour Gemini CLI

Si tu es un puriste du terminal, tu peux utiliser Stitch directement via Gemini CLI. Attention, il y a une petite subtilité ici (on a testé pour toi !).

1. Installe l’extension : gemini extensions install https://github.com/gemini-cli-extensions/stitch.
2. Injecte ta clé API dans la config de l’extension (remplace TA-CLE-ICI par ta vraie clé) : export API_KEY="TA-CLE-ICI" sed "s/YOUR_API_KEY/$API_KEY/g" ~/.gemini/extensions/Stitch/gemini-extension-apikey.json > ~/.gemini/extensions/Stitch/gemini-extension.json Note : Sans cette deuxième étape, le CLI restera aveugle.

Et pour les autres (VS Code, Claude) ?

Le principe est le même. Pour Claude Code par exemple, tu utilises la commande claude mcp add avec l’URL de Stitch et le header X-Goog-Api-Key. Pour VS Code ou Cursor, tu modifies le fichier mcp.json global.

4. Workflow complet : Créer un site de A à Z

Maintenant que tout est branché, passons à la pratique. On va créer un site pour un « Podcast sur le Café » sans écrire une seule ligne de HTML manuellement.

1. L’Exploration Demande à ton agent : « Show me my Stitch projects ». Il va lister ce qui existe déjà. C’est le signe que la connexion MCP fonctionne.

2. Le Design (Prompting) Pas besoin d’aller sur l’interface web. Dans Antigravity ou Gemini CLI, lance : « Create a new screen for a landing page about a coffee podcast named ‘Raffinato’. Use a dark, elegant theme. ». Stitch va générer le design dans le cloud. Tu peux même demander des variations : « Make it more minimalist ».

3. La Récupération (Fetch) Le design te plaît ? Rapatrie-le. « Download the HTML code for the Landing Page screen. ». L’agent va créer un fichier local avec le code HTML et la config Tailwind. Il peut aussi télécharger les images générées.

4. La Transformation (Le « Stitch Loop ») C’est là qu’Antigravity brille. Tu peux installer des Agent Skills pour transformer ce HTML brut en composants React ou Vue. commande : npx add-skill google-labs-code/stitch-skills --skill react:components --global Ensuite, dis simplement : « Convert the Landing Page screen to React components ». L’agent va :

1. Lire le HTML de Stitch.
2. Le découper en composants React.
3. Lancer un serveur Vite local.
4. Ouvrir le navigateur intégré pour vérifier le rendu.

Si ça ne va pas ? Dis-lui simplement « Le bouton est trop petit », et l’agent modifiera le code ou demandera à Stitch de revoir sa copie. C’est une boucle autonome.

5. Conclusion

On est en train de passer d’une ère où l’on écrit du code à une ère où l’on orchestre la création.

Avec Antigravity et Stitch connectés via MCP, ton flux de travail change radicalement :

• Tu ne te bats plus avec le CSS, tu demandes un design.
• Tu ne copies plus du code, tu demandes à l’agent de l’implémenter.
• Tu gardes le contrôle total via le code généré qui reste propre et éditable.

C’est peut-être le moment de mettre à jour ta stack… et de prendre un café pendant que ton agent bosse pour toi. 😉