Geruyang/agent-skills-library

v0 por Vercel

Eres un experto en v0 (v0.app) — el agente de desarrollo potenciado por IA de Vercel que genera código listo para producción a partir de descripciones en lenguaje natural.

Descripción General

v0 transforma prompts en código funcional de React/Next.js. Soporta a más de 6 millones de desarrolladores y 80 mil equipos activos a nivel global. v0 opera como un agente de codificación universal con capacidades de investigación, planificación, depuración e iteración.

Capacidades Principales

• Lenguaje natural → código: Describe lo que quieres, obtén componentes React listos para producción
• Entrada visual: Sube diseños de Figma, capturas de pantalla o bocetos → código
• Multi-framework: Genera React, Vue, Svelte, HTML, Markdown
• Inteligencia agente: Investiga, planifica, depura e itera de forma autónoma
• shadcn/ui + Tailwind CSS: Sistema de estilos por defecto
• IDE completo: Editor VS Code integrado, terminal y panel de git en la interfaz web

Uso de la CLI

CLI de Integración de Componentes (paquete v0)

Instala y obtén componentes generados por v0 en tu proyecto Next.js:

# Inicializa v0 en un proyecto Next.js existente (configuración única)
npx v0@latest init

# Añade un componente específico generado por v0 usando su ID
npx v0@latest add <id-del-componente>

# Con pnpm
pnpm dlx v0@latest init
pnpm dlx v0@latest add <id-del-componente>

v0 init instala las dependencias necesarias (@radix-ui/react-icons, clsx, lucide-react) y crea un archivo de configuración components.json.

"Añadir al Código Base" (Web UI → Local)

Desde la interfaz web de v0.dev, haz clic en el botón "Add to Codebase" (icono de terminal) para generar un comando:

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

Ejecuta esto en la raíz de tu proyecto para obtener todo el proyecto generado en tu código base.

Flujo de Trabajo Típico

# 1. Prepara una app Next.js
npx create-next-app@latest --typescript --tailwind --eslint

# 2. Inicializa la integración con v0
npx v0@latest init

# 3. Genera un componente en v0.dev, obtén su ID
# 4. Añade el componente localmente
npx v0@latest add a1B2c3d4

# 5. Importa y usa en tu app

CLI de Andamiaje de Proyectos

# Crea un nuevo proyecto a partir de plantillas de v0
npx create-v0-sdk-app@latest mi-app-v0

# Usa la plantilla v0-clone (réplica completa de v0.dev con autenticación, BD, streaming)
npx create-v0-sdk-app@latest --template v0-clone

SDK de v0 (API Programática)

Instalación

npm install v0-sdk

Autenticación

import { v0 } from 'v0-sdk'
// Lee automáticamente de process.env.V0_API_KEY

// O crea un cliente personalizado:
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

Obtén tu clave de API en: https://v0.app/chat/settings/keys

Crear un Chat y Generar Código

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: 'Crea una barra de navegación responsive con alternancia de modo oscuro usando Tailwind',
  system: 'Eres un desarrollador React experto',
})

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

Flujo de Trabajo Completo de Proyecto (Crear → Chat → Desplegar)

import { v0 } from 'v0-sdk'

// Crear un proyecto
const project = await v0.projects.create({ name: 'Mi App' })

// Inicializar un chat con código existente
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: codigoExistente }],
  projectId: project.id,
})

// Enviar instrucciones de seguimiento
await v0.chats.sendMessage({
  chatId: chat.id,
  message: 'Añade una barra lateral con enlaces de navegación y un avatar de usuario',
})

// Desplegar cuando esté listo
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`En vivo en: ${deployment.url}`)

Descargar Código Generado

// Descargar archivos de una versión específica del chat
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Referencia de Métodos del SDK

Chats:

• v0.chats.create(params) — Crear un nuevo chat
• v0.chats.sendMessage(params) — Enviar un mensaje a un chat existente
• v0.chats.getById(params) — Obtener un chat específico
• v0.chats.update(params) — Actualizar propiedades del chat
• v0.chats.findVersions(params) — Listar todas las versiones de un chat
• v0.chats.getVersion(params) — Obtener una versión específica
• v0.chats.updateVersion(params) — Actualizar archivos dentro de una versión
• v0.chats.downloadVersion(params) — Descargar archivos de una versión
• v0.chats.resume(params) — Reanudar el procesamiento de un mensaje

Proyectos:

• v0.projects.create(params) — Crear un nuevo proyecto
• v0.projects.getById(params) — Obtener un proyecto
• v0.projects.update(params) — Actualizar un proyecto
• v0.projects.find() — Listar todos los proyectos
• v0.projects.assign(params) — Asignar un chat a un proyecto
• v0.projects.getByChatId(params) — Obtener proyecto por ID de chat
• v0.projects.createEnvVars(params) — Crear variables de entorno para un proyecto

Despliegues:

• v0.deployments.create(params) — Crear despliegue desde una versión del chat
• v0.deployments.getById(params) — Obtener detalles del despliegue
• v0.deployments.delete(params) — Eliminar un despliegue
• v0.deployments.find(params) — Listar despliegues
• v0.deployments.findLogs(params) — Obtener registros del despliegue

API REST

URL Base: https://api.v0.dev/v1 Autenticación: Authorization: Bearer <V0_API_KEY>

Método	Endpoint	Descripción
GET	/v1/projects	Listar proyectos
POST	/v1/projects	Crear proyecto
GET	/v1/projects/:id	Obtener proyecto
PUT	/v1/projects/:id	Actualizar proyecto
DELETE	/v1/projects/:id	Eliminar proyecto
POST	/v1/chats	Crear/inicializar chat
GET	/v1/chats/:id/messages	Obtener mensajes
POST	/v1/chats/:id/messages	Enviar mensaje
POST	/v1/deployments	Crear despliegue

Límites de Tasa

• Solicitudes a la API: 10,000/día
• Mensajes de Chat: 1,000/día
• Despliegues: 100/día
• Subidas de Archivos: 1 GB/día
• Proyectos por cuenta: 100

Modelos Disponibles

• v0-1.5-md — Tareas cotidianas y generación de UI
• v0-1.5-lg — Razonamiento avanzado
• v0-1.0-md — Modelo heredado

Integración con AI SDK

Usando v0 como Proveedor 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: 'Crea un formulario de inicio de sesión con campos de correo y contraseña',
})

Herramientas AI de v0 (Integración con Agentes)

Usa todas las capacidades de v0 como herramientas dentro de un agente del 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: 'Crea un nuevo proyecto de dashboard en React con gráficos y una tabla de datos',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

Para un control más detallado, importa conjuntos de herramientas específicas:

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

La exportación v0Tools incluye más de 20 herramientas: createChat, sendMessage, getChat, updateChat, deleteChat, favoriteChat, forkChat, listChats, createProject, getProject, updateProject, listProjects, assignChatToProject, createEnvironmentVariables, createDeployment, getDeployment, deleteDeployment, listDeployments, getDeploymentLogs.

Servidor MCP

Conecta v0 a cualquier IDE compatible con MCP (Cursor, Codex, etc.):

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

Expone 4 herramientas: crear chat, obtener información del chat, buscar chats, enviar mensajes.

Integración con GitHub

Configuración

1. En la barra lateral del chat de v0 → sección Git → haz clic en Conectar
2. Selecciona el alcance de la cuenta/org de GitHub y el nombre del repositorio
3. Haz clic en Crear Repositorio — vincula el chat a un nuevo repositorio privado de GitHub
4. Se crea automáticamente un despliegue en Vercel

Comportamiento de Ramas (Automático)

• Cada chat crea una nueva rama (ej., v0/main-e7bad8e4)
• Cada prompt que cambie código hace commit y push automáticamente
• Nunca trabajas directamente en main

Flujo de Trabajo con PRs

1. Haz clic en el botón Publicar (muestra un icono de PR cuando está conectado a GitHub)
2. Selecciona Abrir PR — crea un PR desde v0/main-abc123 → main
3. Revisa en el modal de GitHub o en GitHub.com
4. Fusiona el PR → cierra el chat de forma permanente
5. Cada PR obtiene un Despliegue de Vista Previa; fusionar desencadena el Despliegue de Producción

Importar Repositorios Existentes

1. En la barra de prompts de v0 → haz clic en + → "Importar desde GitHub"
2. v0 lee tu código base existente y las variables de entorno de Vercel
3. Itera con prompts; todos los cambios se confirman en una nueva rama

Consejos de Prompt Engineering

1. Sé Específico Sobre el Diseño

Débil:  "Crea un dashboard"
Fuerte: "Crea un dashboard de tickets de soporte. Mobile-first, tema claro, alto
         contraste. Código de color: rojo para urgente, amarillo para medio, verde para bajo.
         Muestra insignias de estado del agente. Máximo 2 columnas en móvil."

2. Especifica tu Stack Tecnológico

"Crea una app de chat en tiempo real usando: Next.js 16 con App Router,
Socket.io para mensajería, Vercel Postgres para almacenamiento,
NextAuth.js para autenticación."

3. Define Roles de Usuario

"Crea una herramienta de colaboración en equipo con roles de admin, manager y miembro,
asignación de tareas, seguimiento de progreso y uso compartido de archivos."

4. Encadena Múltiples Prompts

Puedes encadenar hasta 10 prompts mientras v0 sigue generando:

1. "Crea el diseño base con navegación"
2. "Añade autenticación con NextAuth"
3. "Conecta la base de datos y añade operaciones CRUD"
4. "Añade una página de configuración con alternancia de modo oscuro"

5. Especifica Estados de Error y Vacío

"Añade manejo de errores completo para fallos de red, entrada
inválida y estados vacíos con sugerencias útiles de recuperación."

6. Usa Selección Visual para Precisión

Haz clic en un elemento específico de la vista previa antes de escribir para apuntar exactamente lo que quieres cambiar. Elimina la ambigüedad en componentes con múltiples instancias.

7. Usa el Modo de Diseño vs Prompts

• Prompts: Cambios estructurales, añadir funcionalidades, conectar lógica
• Modo de Diseño (clic en elemento → ajustar): Colores, espaciado, ajustes de tipografía

8. Stack de Salida por Defecto de v0

Cuando no se especifica un framework, v0 genera:

• React con JSX + TypeScript
• Tailwind CSS
• Componentes shadcn/ui
• Iconos Lucide React
• Código completo, listo para copiar y pegar (nunca fragmentos parciales)

Normalización de Diseño para la Salida de v0

v0 es más potente cuando especificas tanto la dirección estructural como estética. Para proyectos del stack de Vercel, incluye orientación como: usa primitivas shadcn/ui, usa fuentes Geist, modo oscuro por defecto, usa tokens zinc/neutral, evita rejillas de tarjetas genéricas. Después de importar código de v0, normalízalo: reemplaza controles ad-hoc con componentes shadcn, colapsa rejillas de tarjetas repetidas en patrones más fuertes, alinea la tipografía con Geist, elimina radios mixtos y efectos decorativos.

Patrones de Integración

Patrón 1: Generar Componentes, Importar Localmente

Mejor para añadir componentes UI individuales a una app existente.

npx v0@latest init
npx v0@latest add <id-del-componente>

Luego importa el componente:

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

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

Patrón 2: Viaje de Ida y Vuelta con GitHub

Mejor para iterar en una rama de funcionalidad completa con no ingenieros.

1. Importa el repositorio en v0 desde GitHub
2. El no ingeniero itera mediante prompts
3. v0 hace commit automático de cada cambio en una rama de funcionalidad
4. El ingeniero revisa el PR y lo fusiona

Patrón 3: Automatización con SDK

Mejor para pipelines CI/CD o generación de componentes programática.

import { v0 } from 'v0-sdk'

// Generar un componente a partir de una especificación de diseño
const chat = await v0.chats.create({
  message: `Crea un componente de tabla de precios con estos niveles:
    - Gratis: 0/mes, 1 proyecto, soporte comunitario
    - Pro: $20/mes, proyectos ilimitados, soporte prioritario
    - Empresa: Personalizado, SLA, soporte dedicado`,
})

// Esperar a la generación, luego descargar
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Patrón 4: v0 como Herramienta de Agente IA

Mejor para agentes autónomos que necesitan generar y desplegar 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 }),
    // ... otras herramientas
  },
  system: 'Eres un desarrollador full-stack. Usa v0 para generar componentes UI.',
})

const { text } = await agent.generateText({
  prompt: 'Crea un dashboard para nuestros datos de análisis y despliéguelo',
})

Integraciones Incorporadas

v0 tiene soporte nativo para estos servicios en su sandbox:

• Bases de datos: Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob
• IA: OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (a través de Vercel AI Gateway)
• Pagos: Stripe
• APIs externas: Twilio, y otras a través del panel "Vars"

Limitaciones

• Mejor para componentes UI y diseños (~20% de una aplicación completa)
• Backend, base de datos, autenticación e integración de IA requieren implementación separada o prompting explícito
• El código generado puede necesitar correcciones manuales para lógica de negocio compleja
• La escalabilidad a nivel empresarial necesita una revisión arquitectónica adicional
• shadcn/ui es la biblioteca de componentes principal; otras bibliotecas requieren prompting explícito

Documentación Oficial

• v0 App
• Documentación de v0
• Descripción General de la API de v0