v0 par Vercel

Que fait v0 par Vercel ?

Vous êtes un expert en v0 (v0.app) — l'agent de développement alimenté par l'IA de Vercel qui génère du code prêt pour la production à partir de descriptions en langage naturel.

Aperçu

v0 transforme des prompts en code React/Next.js fonctionnel. Il prend en charge plus de 6 millions de développeurs et 80 000 équipes actives dans le monde. v0 opère comme un agent de codage universel avec des capacités de recherche, planification, débogage et itération.

Capacités principales

• Langage naturel → code : Décrivez ce que vous voulez, obtenez des composants React prêts pour la production
• Entrée visuelle : Téléversez des maquettes Figma, des captures d'écran ou des croquis → code
• Multi-frameworks : Produit du code React, Vue, Svelte, HTML, Markdown
• Intelligence agentique : Recherche, planification, débogage, itération autonome
• shadcn/ui + Tailwind CSS : Système de style par défaut
• IDE complet : Éditeur VS Code intégré, terminal et panel git dans l'interface web

Utilisation du CLI

CLI d'intégration de composants (package v0)

Installez et récupérez les composants générés par v0 dans votre projet Next.js :

# Initialiser v0 dans un projet Next.js existant (configuration unique)
npx v0@latest init

# Ajouter un composant spécifique généré par v0 via son ID
npx v0@latest add <component-id>

# Avec pnpm
pnpm dlx v0@latest init
pnpm dlx v0@latest add <component-id>

v0 init installe les dépendances nécessaires (@radix-ui/react-icons, clsx, lucide-react) et crée un fichier de configuration components.json.

"Ajouter à la base de code" (Interface Web → Local)

Depuis l'interface web v0.dev, cliquez sur le bouton "Add to Codebase" (icône de terminal) pour générer une commande :

npx shadcn@latest add "https://v0.dev/chat/b/<project_id>?token=<token>"

Exécutez cette commande à la racine de votre projet pour récupérer l'intégralité du projet généré dans votre base de code.

Flux de travail typique

# 1. Créer une application Next.js
npx create-next-app@latest --typescript --tailwind --eslint

# 2. Initialiser l'intégration v0
npx v0@latest init

# 3. Générer un composant sur v0.dev, récupérer son ID
# 4. Ajouter le composant localement
npx v0@latest add a1B2c3d4

# 5. Importer et utiliser dans votre application

CLI de création de projet

# Créer un nouveau projet à partir de modèles v0
npx create-v0-sdk-app@latest my-v0-app

# Utiliser le modèle v0-clone (réplique complète de v0.dev avec auth, BD, streaming)
npx create-v0-sdk-app@latest --template v0-clone

SDK v0 (API programmatique)

Installation

npm install v0-sdk

Authentification

import { v0 } from 'v0-sdk'
// Lit automatiquement depuis process.env.V0_API_KEY

// Ou créez un client personnalisé :
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

Obtenez votre clé API sur : https://v0.app/chat/settings/keys

Créer un chat et générer du code

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: 'Crée une barre de navigation responsive avec un bouton de changement de thème sombre utilisant Tailwind',
  system: 'Tu es un développeur React expert',
})

console.log(`Ouvrir dans le navigateur : ${chat.webUrl}`)

Flux de travail complet d'un projet (Créer → Chatter → Déployer)

import { v0 } from 'v0-sdk'

// Créer un projet
const project = await v0.projects.create({ name: 'Mon App' })

// Initialiser un chat avec du code existant
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: codeExistant }],
  projectId: project.id,
})

// Envoyer des instructions de suivi
await v0.chats.sendMessage({
  chatId: chat.id,
  message: 'Ajoute une barre latérale avec des liens de navigation et un avatar utilisateur',
})

// Déployer une fois prêt
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`En ligne sur : ${deployment.url}`)

Télécharger le code généré

// Télécharger les fichiers d'une version spécifique du chat
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Référence des méthodes du SDK

Chats :

• v0.chats.create(params) — Créer un nouveau chat
• v0.chats.sendMessage(params) — Envoyer un message à un chat existant
• v0.chats.getById(params) — Récupérer un chat spécifique
• v0.chats.update(params) — Mettre à jour les propriétés du chat
• v0.chats.findVersions(params) — Lister toutes les versions d'un chat
• v0.chats.getVersion(params) — Récupérer une version spécifique
• v0.chats.updateVersion(params) — Mettre à jour les fichiers d'une version
• v0.chats.downloadVersion(params) — Télécharger les fichiers d'une version
• v0.chats.resume(params) — Reprendre le traitement d'un message

Projets :

• v0.projects.create(params) — Créer un nouveau projet
• v0.projects.getById(params) — Récupérer un projet
• v0.projects.update(params) — Mettre à jour un projet
• v0.projects.find() — Lister tous les projets
• v0.projects.assign(params) — Assigner un chat à un projet
• v0.projects.getByChatId(params) — Obtenir le projet par ID de chat
• v0.projects.createEnvVars(params) — Créer des variables d'environnement pour un projet

Déploiements :

• v0.deployments.create(params) — Créer un déploiement à partir d'une version de chat
• v0.deployments.getById(params) — Obtenir les détails d'un déploiement
• v0.deployments.delete(params) — Supprimer un déploiement
• v0.deployments.find(params) — Lister les déploiements
• v0.deployments.findLogs(params) — Obtenir les logs de déploiement

API REST

URL de base : https://api.v0.dev/v1 Authentification : Authorization: Bearer <V0_API_KEY>

Méthode	Point de terminaison	Description
GET	/v1/projects	Lister les projets
POST	/v1/projects	Créer un projet
GET	/v1/projects/:id	Obtenir un projet
PUT	/v1/projects/:id	Mettre à jour un projet
DELETE	/v1/projects/:id	Supprimer un projet
POST	/v1/chats	Créer/initialiser un chat
GET	/v1/chats/:id/messages	Obtenir les messages
POST	/v1/chats/:id/messages	Envoyer un message
POST	/v1/deployments	Créer un déploiement

Limites de débit

• Requêtes API : 10 000/jour
• Messages de chat : 1 000/jour
• Déploiements : 100/jour
• Téléversements de fichiers : 1 Go/jour
• Projets par compte : 100

Modèles disponibles

• v0-1.5-md — Tâches quotidiennes et génération d'UI
• v0-1.5-lg — Raisonnement avancé
• v0-1.0-md — Modèle hérité

Intégration AI SDK

Utiliser v0 comme fournisseur IA

npm i @ai-sdk/vercel

import { vercel } from '@ai-sdk/vercel'
import { generateText } from 'ai'

const { text } = await generateText({
  model: vercel('v0-1.5-md'),
  prompt: 'Crée un formulaire de connexion avec des champs email et mot de passe',
})

Outils IA v0 (Intégration Agent)

Utilisez toutes les capacités de v0 comme des outils au sein d'un agent AI SDK :

npm install @v0-sdk/ai-tools ai

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { v0Tools } from '@v0-sdk/ai-tools'

const result = await generateText({
  model: openai('gpt-5.2'),
  prompt: 'Crée un nouveau projet de tableau de bord React avec des graphiques et un tableau de données',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

Pour un contrôle granulaire, importez des ensembles d'outils spécifiques :

import { createChatTools, createProjectTools, createDeploymentTools } from '@v0-sdk/ai-tools'

L'export v0Tools inclut plus de 20 outils : createChat, sendMessage, getChat, updateChat, deleteChat, favoriteChat, forkChat, listChats, createProject, getProject, updateProject, listProjects, assignChatToProject, createEnvironmentVariables, createDeployment, getDeployment, deleteDeployment, listDeployments, getDeploymentLogs.

Serveur MCP

Connectez v0 à tout IDE compatible MCP (Cursor, Codex, etc.) :

{
  "mcpServers": {
    "v0": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.v0.dev",
        "--header",
        "Authorization: Bearer ${V0_API_KEY}"
      ]
    }
  }
}

Expose 4 outils : créer un chat, obtenir les informations d'un chat, trouver des chats, envoyer des messages.

Intégration GitHub

Configuration

1. Dans la barre latérale du chat v0 → section Git → cliquez sur Connecter
2. Sélectionnez le compte/organisation GitHub et le nom du dépôt
3. Cliquez sur Créer un dépôt — lie le chat à un nouveau dépôt GitHub privé
4. Un déploiement Vercel est automatiquement créé

Comportement des branches (Automatique)

• Chaque chat crée une nouvelle branche (par ex., v0/main-e7bad8e4)
• Chaque prompt qui modifie du code effectue automatiquement un commit et un push
• Vous ne travaillez jamais directement sur main

Flux de travail PR

1. Cliquez sur le bouton Publier (affiche une icône PR lorsqu'il est connecté à GitHub)
2. Sélectionnez Ouvrir une PR — crée une PR de v0/main-abc123 vers main
3. Examinez dans la fenêtre modale GitHub ou sur GitHub.com
4. Fusionnez la PR → ferme le chat définitivement
5. Chaque PR reçoit un déploiement de prévisualisation ; la fusion déclenche un déploiement de production

Importer des dépôts existants

1. Dans la barre de prompt v0 → cliquez sur + → "Importer depuis GitHub"
2. v0 lit votre base de code existante et les variables d'environnement depuis Vercel
3. Itérez avec des prompts ; toutes les modifications sont commitées sur une nouvelle branche

Conseils d'ingénierie de prompt

1. Soyez précis sur le design

Faible :  "Construis un tableau de bord"
Fort : "Construis un tableau de bord de tickets de support. Mobile-first, thème
        clair, contraste élevé. Code couleur : rouge pour urgent, jaune pour
        moyen, vert pour faible. Affiche les badges de statut des agents.
        Maximum 2 colonnes sur mobile."

2. Spécifiez votre pile technologique

"Construis une application de chat en temps réel utilisant : Next.js 16 avec
App Router, Socket.io pour la messagerie, Vercel Postgres pour le stockage,
NextAuth.js pour l'authentification."

3. Définissez les rôles utilisateurs

"Crée un outil de collaboration d'équipe avec les rôles admin, manager et
membre, l'attribution de tâches, le suivi de progression et le partage de
fichiers."

4. Mettez en file d'attente plusieurs prompts

Vous pouvez mettre jusqu'à 10 prompts en file d'attente pendant que v0 génère encore :

1. "Crée la mise en page de base avec la navigation"
2. "Ajoute l'authentification avec NextAuth"
3. "Connecte la base de données et ajoute les opérations CRUD"
4. "Ajoute une page de paramètres avec le bouton de thème sombre"

5. Spécifiez les états d'erreur et vides

"Ajoute une gestion d'erreur complète pour les échecs réseau, les entrées
invalides et les états vides avec des suggestions de récupération utiles."

6. Utilisez la sélection visuelle pour la précision

Cliquez sur un élément spécifique dans l'aperçu avant de taper pour cibler exactement ce que vous voulez modifier. Élimine l'ambiguïté pour les composants à instances multiples.

7. Utilisez le mode Design vs les prompts

• Prompts : Changements structurels, ajout de fonctionnalités, câblage de la logique
• Mode Design (cliquez sur l'élément → ajustez) : Couleurs, espacement, ajustements typographiques

8. Pile de sortie par défaut de v0

Lorsqu'aucun framework n'est spécifié, v0 génère :

• React avec JSX + TypeScript
• Tailwind CSS
• Composants shadcn/ui
• Icônes Lucide React
• Code complet, prêt à copier-coller (jamais de stubs partiels)

Normalisation du design pour la sortie v0

v0 est plus performant lorsque vous spécifiez à la fois la structure et la direction esthétique. Pour les projets basés sur la pile Vercel, incluez des indications comme : utilisez les primitives shadcn/ui, utilisez les polices Geist, optez par défaut pour le mode sombre, utilisez les tokens zinc/neutral, évitez les grilles de cartes génériques. Après avoir importé le code v0, normalisez-le : remplacez les contrôles ad-hoc par des composants shadcn, réduisez les grilles de cartes répétées en motifs plus forts, alignez la typographie sur Geist, supprimez les rayons mixtes et les effets décoratifs.

Modèles d'intégration

Modèle 1 : Générer des composants, importer localement

Idéal pour ajouter des composants UI individuels à une application existante.

npx v0@latest init
npx v0@latest add <component-id>

Puis importez le composant :

import { DataTable } from '@/components/data-table'

export default function DashboardPage() {
  return <DataTable data={rows} columns={columns} />
}

Modèle 2 : Aller-retour GitHub

Idéal pour itérer sur une branche de fonctionnalité complète avec des non-ingénieurs.

1. Importez le dépôt dans v0 depuis GitHub
2. Le non-ingénieur itère via des prompts
3. v0 commit automatiquement chaque changement sur une branche de fonctionnalité
4. L'ingénieur examine la PR, la fusionne

Modèle 3 : Automatisation SDK

Idéal pour les pipelines CI/CD ou la génération programmatique de composants.

import { v0 } from 'v0-sdk'

// Générer un composant à partir d'un cahier des charges de design
const chat = await v0.chats.create({
  message: `Crée un tableau de tarification avec ces niveaux :
    - Gratuit : 0/mois, 1 projet, support communautaire
    - Pro : 20$/mois, projets illimités, support prioritaire
    - Entreprise : Sur mesure, SLA, support dédié`,
})

// Attendre la génération, puis télécharger
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Modèle 4 : v0 comme outil d'agent IA

Idéal pour les agents autonomes qui ont besoin de générer et déployer une UI.

import { Agent } from 'ai'
import { v0Tools } from '@v0-sdk/ai-tools'

const agent = new Agent({
  model: openai('gpt-5.2'),
  tools: {
    ...v0Tools({ apiKey: process.env.V0_API_KEY }),
    // ... autres outils
  },
  system: 'Tu es un développeur full-stack. Utilise v0 pour générer des composants UI.',
})

const { text } = await agent.generateText({
  prompt: 'Crée un tableau de bord pour nos données analytiques et déploie-le',
})

Intégrations intégrées

v0 prend en charge nativement ces services dans son bac à sable :

• Bases de données : Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob
• IA : OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (via la passerelle IA Vercel)
• Paiements : Stripe
• API externes : Twilio, et d'autres via le panneau "Vars"

Limitations

• Idéal pour les composants UI et les mises en page (~20% d'une application complète)
• Le backend, la base de données, l'authentification et l'intégration IA nécessitent une implémentation séparée ou une sollicitation explicite
• Le code généré peut nécessiter des corrections manuelles pour la logique métier complexe
• La scalabilité de niveau entreprise nécessite une revue d'architecture supplémentaire
• shadcn/ui est la bibliothèque de composants principale ; les autres bibliothèques nécessitent une sollicitation explicite

Documentation officielle

• Application v0
• Documentation v0
• Aperçu de l'API v0