v0 API: Integre Geração de UI Programaticamente em seu Pipeline

Além da interface web, o v0 oferece uma API para integrar geração de componentes em ferramentas internas, scripts de automação e pipelines de desenvolvimento.

Quando usar a API do v0

• Ferramenta interna: seu time tem um sistema que gera telas a partir de configuração — use a API para gerar o código React automaticamente
• Scaffolding de features: crie um script que gera os componentes básicos de uma nova feature a partir de um YAML de especificação
• Prototipagem em escala: gere múltiplas variações de UI automaticamente para A/B testing

Autenticação

A API do v0 usa a mesma chave de API da Vercel:

# Configure a variável de ambiente
export VERCEL_API_TOKEN=seu_token

Obtendo o token: acesse vercel.com/account/tokens → Create Token.

Gerando um componente via API

const response = await fetch("https://v0.dev/api/generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.VERCEL_API_TOKEN}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    prompt: "Create a user profile card with avatar, name, role, and contact info",
    framework: "react",
    styling: "tailwind",
  }),
});

const { code, dependencies } = await response.json();

// code: string com o JSX/TSX
// dependencies: lista de pacotes npm necessários

Script de scaffolding de features

Um script Node.js que lê uma spec e gera os componentes:

import { writeFile, mkdir } from "fs/promises";
import { join } from "path";

interface FeatureSpec {
  name: string;
  screens: {
    name: string;
    description: string;
    props: Record<string, string>;
  }[];
}

async function scaffoldFeature(spec: FeatureSpec) {
  const featureDir = join("src/features", spec.name);
  await mkdir(featureDir, { recursive: true });

  for (const screen of spec.screens) {
    const prompt = `
      Create a React component for: ${screen.description}
      Component name: ${screen.name}
      Props: ${JSON.stringify(screen.props)}
      Use TypeScript, Tailwind CSS, shadcn/ui components.
    `;

    const response = await fetch("https://v0.dev/api/generate", {
      method: "POST",
      headers: { Authorization: `Bearer ${process.env.VERCEL_API_TOKEN}` },
      body: JSON.stringify({ prompt }),
    });

    const { code } = await response.json();
    await writeFile(join(featureDir, `${screen.name}.tsx`), code);
    console.log(`Generated: ${screen.name}.tsx`);
  }
}

// Uso:
scaffoldFeature({
  name: "checkout",
  screens: [
    { name: "CartSummary", description: "Shopping cart with items, quantities, prices and total", props: { items: "CartItem[]", onCheckout: "() => void" } },
    { name: "PaymentForm", description: "Credit card form with validation", props: { onSubmit: "(data: PaymentData) => void" } },
    { name: "OrderConfirmation", description: "Success screen with order number and next steps", props: { orderId: "string", email: "string" } },
  ],
});

Rate limits e preços da API

Integrando no CI/CD

GitHub Action para gerar componentes quando uma spec é atualizada:

name: Generate UI Components
on:
  push:
    paths:
      - "specs/**/*.yml"
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: node scripts/scaffold-from-spec.js
        env:
          VERCEL_API_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
      - run: git add src/features && git commit -m "chore: auto-generate UI from spec" && git push

Casos de uso enterprise

• Low-code builder: seu produto permite clientes criarem telas — use a API do v0 para gerar os componentes
• Design tokens automatizados: quando o design system muda, regenere componentes afetados
• Documentação viva: gere exemplos de código automaticamente para o Storybook

A API do v0 é ainda experimental e em evolução — confira a documentação oficial em v0.dev/docs para as últimas atualizações.