v0 da Vercel

O que v0 da Vercel faz?

Você é um especialista em v0 (v0.app) — o agente de desenvolvimento com IA da Vercel que transforma descrições em linguagem natural em código pronto para produção.

Visão Geral

O v0 transforma prompts em código React/Next.js funcional. Ele suporta mais de 6 milhões de desenvolvedores e mais de 80 mil equipes ativas globalmente. O v0 opera como um agente de codificação universal com capacidades de pesquisa, planejamento, depuração e iteração.

Capacidades Principais

• Linguagem natural → código: Descreva o que você quer, obtenha componentes React prontos para produção
• Entrada visual: Faça upload de designs do Figma, capturas de tela ou esboços → código
• Multi-framework: Gera saída em React, Vue, Svelte, HTML, Markdown
• Inteligência de agente: Pesquise, planeje, depure, itere de forma autônoma
• shadcn/ui + Tailwind CSS: Sistema de estilo padrão
• IDE completo: Editor VS Code integrado, terminal e painel git na interface web

Uso da CLI

CLI de Integração de Componentes (pacote v0)

Instale e importe componentes gerados pelo v0 em seu projeto Next.js:

# Inicialize o v0 em um projeto Next.js existente (configuração única)
npx v0@latest init

# Adicione um componente específico gerado pelo v0 pelo ID
npx v0@latest add <component-id>

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

v0 init instala as dependências necessárias (@radix-ui/react-icons, clsx, lucide-react) e cria um arquivo de configuração components.json.

"Adicionar ao Código" (Interface Web → Local)

Na interface web do v0.dev, clique no botão "Adicionar ao Código" (ícone de terminal) para gerar um comando:

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

Execute este comando na raiz do seu projeto para importar todo o projeto gerado para sua base de código.

Fluxo de Trabalho Típico

# 1. Crie um novo aplicativo Next.js
npx create-next-app@latest --typescript --tailwind --eslint

# 2. Inicialize a integração v0
npx v0@latest init

# 3. Gere um componente no v0.dev e obtenha seu ID
# 4. Adicione o componente localmente
npx v0@latest add a1B2c3d4

# 5. Importe e use em seu aplicativo

CLI de Criação de Projetos

# Crie um novo projeto a partir de templates do v0
npx create-v0-sdk-app@latest my-v0-app

# Use o template v0-clone (réplica completa do v0.dev com autenticação, banco de dados, streaming)
npx create-v0-sdk-app@latest --template v0-clone

SDK do v0 (API Programática)

Instalação

npm install v0-sdk

Autenticação

import { v0 } from 'v0-sdk'
// Lê automaticamente de process.env.V0_API_KEY

// Ou crie um cliente personalizado:
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

Obtenha sua chave de API em: https://v0.app/chat/settings/keys

Criar um Chat e Gerar Código

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: 'Crie uma barra de navegação responsiva com alternador de modo escuro usando Tailwind',
  system: 'Você é um desenvolvedor React experiente',
})

console.log(`Abrir no navegador: ${chat.webUrl}`)

Fluxo de Trabalho Completo de Projeto (Criar → Conversar → Implantar)

import { v0 } from 'v0-sdk'

// Crie um projeto
const project = await v0.projects.create({ name: 'Meu App' })

// Inicialize um chat com código existente
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: existingCode }],
  projectId: project.id,
})

// Envie instruções complementares
await v0.chats.sendMessage({
  chatId: chat.id,
  message: 'Adicione uma barra lateral com links de navegação e um avatar de usuário',
})

// Implante quando estiver pronto
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`No ar em: ${deployment.url}`)

Baixar Código Gerado

// Baixe arquivos de uma versão específica do chat
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Referência de Métodos do SDK

Chats:

• v0.chats.create(params) — Criar um novo chat
• v0.chats.sendMessage(params) — Enviar uma mensagem para um chat existente
• v0.chats.getById(params) — Recuperar um chat específico
• v0.chats.update(params) — Atualizar propriedades do chat
• v0.chats.findVersions(params) — Listar todas as versões de um chat
• v0.chats.getVersion(params) — Recuperar uma versão específica
• v0.chats.updateVersion(params) — Atualizar arquivos dentro de uma versão
• v0.chats.downloadVersion(params) — Baixar arquivos de uma versão
• v0.chats.resume(params) — Retomar o processamento de uma mensagem

Projetos:

• v0.projects.create(params) — Criar um novo projeto
• v0.projects.getById(params) — Recuperar um projeto
• v0.projects.update(params) — Atualizar um projeto
• v0.projects.find() — Listar todos os projetos
• v0.projects.assign(params) — Atribuir um chat a um projeto
• v0.projects.getByChatId(params) — Obter projeto pelo ID do chat
• v0.projects.createEnvVars(params) — Criar variáveis de ambiente para um projeto

Implantações:

• v0.deployments.create(params) — Criar implantação a partir de uma versão do chat
• v0.deployments.getById(params) — Obter detalhes da implantação
• v0.deployments.delete(params) — Excluir uma implantação
• v0.deployments.find(params) — Listar implantações
• v0.deployments.findLogs(params) — Obter logs da implantação

API REST

URL Base: https://api.v0.dev/v1 Autenticação: Authorization: Bearer <V0_API_KEY>

Método	Endpoint	Descrição
GET	/v1/projects	Listar projetos
POST	/v1/projects	Criar projeto
GET	/v1/projects/:id	Obter projeto
PUT	/v1/projects/:id	Atualizar projeto
DELETE	/v1/projects/:id	Excluir projeto
POST	/v1/chats	Criar/inicializar chat
GET	/v1/chats/:id/messages	Obter mensagens
POST	/v1/chats/:id/messages	Enviar mensagem
POST	/v1/deployments	Criar implantação

Limites de Taxa

• Requisições de API: 10.000/dia
• Mensagens de Chat: 1.000/dia
• Implantações: 100/dia
• Uploads de Arquivos: 1 GB/dia
• Projetos por conta: 100

Modelos Disponíveis

• v0-1.5-md — Tarefas cotidianas e geração de UI
• v0-1.5-lg — Raciocínio avançado
• v0-1.0-md — Modelo legado

Integração com o SDK de IA

Usando o v0 como Provedor de 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: 'Crie um formulário de login com campos de e-mail e senha',
})

Ferramentas de IA do v0 (Integração com Agentes)

Use todas as capacidades do v0 como ferramentas dentro de um agente do SDK de IA:

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: 'Crie um novo projeto de dashboard React com gráficos e uma tabela de dados',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

Para controle granular, importe conjuntos de ferramentas específicos:

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

A exportação v0Tools inclui mais de 20 ferramentas: createChat, sendMessage, getChat, updateChat, deleteChat, favoriteChat, forkChat, listChats, createProject, getProject, updateProject, listProjects, assignChatToProject, createEnvironmentVariables, createDeployment, getDeployment, deleteDeployment, listDeployments, getDeploymentLogs.

Servidor MCP

Conecte o v0 a qualquer IDE compatível com MCP (Cursor, Codex, etc.):

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

Expõe 4 ferramentas: criar chat, obter informações do chat, encontrar chats, enviar mensagens.

Integração com GitHub

Configuração

1. Na barra lateral do chat v0 → seção Git → clique em Conectar
2. Selecione o escopo da conta/organização do GitHub e o nome do repositório
3. Clique em Criar Repositório — vincula o chat a um novo repositório privado no GitHub
4. Uma implantação na Vercel é criada automaticamente

Comportamento de Branch (Automático)

• Cada chat cria um novo branch (ex.: v0/main-e7bad8e4)
• Cada prompt que altera o código é automaticamente comitado e enviado
• Você nunca trabalha diretamente em main

Fluxo de PR

1. Clique no botão Publicar (mostra ícone de PR quando conectado ao GitHub)
2. Selecione Abrir PR — cria um PR de v0/main-abc123 → main
3. Revise no modal do GitHub ou no GitHub.com
4. Faça o merge do PR → fecha o chat permanentemente
5. Cada PR recebe uma Implantação de Pré-visualização; o merge aciona a Implantação de Produção

Importando Repositórios Existentes

1. Na barra de prompt do v0 → clique em + → "Importar do GitHub"
2. O v0 lê sua base de código existente e variáveis de ambiente da Vercel
3. Itere com prompts; todas as alterações são comitadas em um novo branch

Dicas de Engenharia de Prompt

1. Seja Específico Sobre o Design

Fraco:  "Crie um dashboard"
Forte: "Crie um dashboard de tickets de suporte. Mobile-first, tema claro, alto
        contraste. Código de cor: vermelho para urgente, amarelo para médio, verde para baixo.
        Mostre badges de status do agente. Máximo de 2 colunas no mobile."

2. Especifique Sua Stack Tecnológica

"Crie um aplicativo de chat em tempo real usando: Next.js 16 com App Router,
Socket.io para mensagens, Vercel Postgres para armazenamento,
NextAuth.js para autenticação."

3. Defina Papéis de Usuário

"Crie uma ferramenta de colaboração em equipe com papéis de administrador, gerente e membro,
 atribuição de tarefas, acompanhamento de progresso e compartilhamento de arquivos."

4. Enfileire Múltiplos Prompts

Você pode enfileirar até 10 prompts enquanto o v0 ainda está gerando:

1. "Crie o layout base com navegação"
2. "Adicione autenticação com NextAuth"
3. "Conecte o banco de dados e adicione operações CRUD"
4. "Adicione uma página de configurações com alternador de modo escuro"

5. Especifique Estados de Erro e Vazio

"Adicione tratamento abrangente de erros para falhas de rede, entrada
inválida e estados vazios com sugestões de recuperação úteis."

6. Use Seleção Visual para Precisão

Clique em um elemento específico na pré-visualização antes de digitar para segmentar exatamente o que deseja alterar. Elimina ambiguidade para componentes com múltiplas instâncias.

7. Use o Modo de Design vs. Prompts

• Prompts: Mudanças estruturais, adição de funcionalidades, integração de lógica
• Modo de Design (clique no elemento → ajuste): Cores, espaçamento, ajustes de tipografia

8. Stack de Saída Padrão do v0

Quando nenhum framework é especificado, o v0 gera:

• React com JSX + TypeScript
• Tailwind CSS
• Componentes shadcn/ui
• Ícones Lucide React
• Código completo, pronto para copiar e colar (nunca stubs parciais)

Normalização de Design para Saída do v0

O v0 é mais forte quando você especifica tanto a estrutura quanto a direção estética. Para projetos da stack Vercel, inclua orientações como: use primitivas shadcn/ui, use fontes Geist, padrão modo escuro, use tokens zinc/neutral, evite grades de cartão genéricas. Após importar o código do v0, normalize-o: substitua controles ad-hoc por componentes shadcn, colapse grades de cartão repetidas em padrões mais fortes, alinhe a tipografia ao Geist, remova raios mistos e efeitos decorativos.

Padrões de Integração

Padrão 1: Gerar Componentes, Importar Localmente

Melhor para adicionar componentes de UI individuais a um aplicativo existente.

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

Em seguida, importe o componente:

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

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

Padrão 2: Ciclo com GitHub

Melhor para iterar em um branch de funcionalidade completo com não engenheiros.

1. Importe o repositório no v0 a partir do GitHub
2. Não engenheiro itera via prompts
3. O v0 faz commit automático de cada alteração em um branch de funcionalidade
4. Engenheiro revisa o PR e faz o merge

Padrão 3: Automação com SDK

Melhor para pipelines de CI/CD ou geração programática de componentes.

import { v0 } from 'v0-sdk'

// Gere um componente a partir de uma especificação de design
const chat = await v0.chats.create({
  message: `Crie um componente de tabela de preços com estas faixas:
    - Gratuito: 0/mês, 1 projeto, suporte da comunidade
    - Pro: $20/mês, projetos ilimitados, suporte prioritário
    - Enterprise: Personalizado, SLA, suporte dedicado`,
})

// Aguarde a geração e baixe
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Padrão 4: v0 como Ferramenta de Agente de IA

Melhor para agentes autônomos que precisam gerar e implantar 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 }),
    // ... outras ferramentas
  },
  system: 'Você é um desenvolvedor full-stack. Use o v0 para gerar componentes de UI.',
})

const { text } = await agent.generateText({
  prompt: 'Crie um dashboard para nossos dados de análise e o implante',
})

Integrações Embutidas

O v0 tem suporte nativo para estes serviços em seu sandbox:

• Bancos de Dados: Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob
• IA: OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (via Vercel AI Gateway)
• Pagamentos: Stripe
• APIs Externas: Twilio, e outras através do painel "Variáveis"

Limitações

• Melhor para componentes e layouts de UI (~20% de uma aplicação completa)
• Backend, banco de dados, autenticação e integração com IA requerem implementação separada ou prompts explícitos
• O código gerado pode precisar de correções manuais para lógica de negócios complexa
• Escalabilidade em nível empresarial precisa de revisão adicional de arquitetura
• shadcn/ui é a biblioteca de componentes primária; outras bibliotecas exigem prompts explícitos

Documentação Oficial

• Aplicativo v0
• Documentação do v0
• Visão Geral da API v0
• v0 SDK
• Ferramentas de IA
• Integração MCP
• Integração GitHub
• Status do Sistema