Geruyang/agent-skills-library

v0 von Vercel

Sie sind ein Experte für v0 (v0.app) – den KI-gestützten Entwicklungsagenten von Vercel, der aus natürlichsprachlichen Beschreibungen produktionsreifen Code generiert.

Überblick

v0 verwandelt Eingabeaufforderungen in funktionierenden React/Next.js-Code. Es unterstützt weltweit über 6 Millionen Entwickler und mehr als 80.000 aktive Teams. v0 fungiert als universeller Codierungsagent mit Fähigkeiten zur Recherche, Planung, Fehlersuche und Iteration.

Kernfunktionen

• Natürliche Sprache → Code: Beschreiben Sie, was Sie möchten, und erhalten Sie produktionsreife React-Komponenten
• Visuelle Eingabe: Laden Sie Figma-Designs, Screenshots oder Skizzen hoch → Code
• Multi-Framework: Ausgabe als React, Vue, Svelte, HTML, Markdown
• Agentische Intelligenz: Recherchieren, planen, debuggen, iterieren Sie autonom
• shadcn/ui + Tailwind CSS: Standard-Styling-System
• Vollständige IDE: Integrierter VS Code-Editor, Terminal und Git-Panel in der Weboberfläche

CLI-Nutzung

Komponentenintegrations-CLI (v0-Paket)

Installieren Sie v0-generierte Komponenten und ziehen Sie sie in Ihr Next.js-Projekt:

# v0 in einem bestehenden Next.js-Projekt initialisieren (einmalige Einrichtung)
npx v0@latest init

# Eine bestimmte v0-generierte Komponente anhand der ID hinzufügen
npx v0@latest add <component-id>

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

v0 init installiert die erforderlichen Abhängigkeiten (@radix-ui/react-icons, clsx, lucide-react) und erstellt eine Konfigurationsdatei components.json.

"Zur Codebasis hinzufügen" (Web-UI → Lokal)

Klicken Sie in der v0.dev-Weboberfläche auf die Schaltfläche "Zur Codebasis hinzufügen" (Terminal-Symbol), um einen Befehl zu generieren:

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

Führen Sie diesen Befehl im Stammverzeichnis Ihres Projekts aus, um das gesamte generierte Projekt in Ihre Codebasis zu ziehen.

Typischer Arbeitsablauf

# 1. Next.js-App gerüstartig erstellen
npx create-next-app@latest --typescript --tailwind --eslint

# 2. v0-Integration initialisieren
npx v0@latest init

# 3. Komponente auf v0.dev generieren, deren ID notieren
# 4. Komponente lokal hinzufügen
npx v0@latest add a1B2c3d4

# 5. In Ihrer App importieren und verwenden

Projektgerüst-CLI

# Neues Projekt aus v0-Vorlagen erstellen
npx create-v0-sdk-app@latest my-v0-app

# v0-clone-Vorlage verwenden (vollständige v0.dev-Replik mit Authentifizierung, DB, Streaming)
npx create-v0-sdk-app@latest --template v0-clone

v0 SDK (Programmatische API)

Installation

npm install v0-sdk

Authentifizierung

import { v0 } from 'v0-sdk'
// Liest automatisch aus process.env.V0_API_KEY

// Oder einen benutzerdefinierten Client erstellen:
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

Holen Sie Ihren API-Schlüssel unter: https://v0.app/chat/settings/keys

Chat erstellen und Code generieren

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: 'Erstelle eine responsive Navigationsleiste mit Dark-Mode-Umschalter mit Tailwind',
  system: 'Sie sind ein erfahrener React-Entwickler',
})

console.log(`Im Browser öffnen: ${chat.webUrl}`)

Vollständiger Projektablauf (Erstellen → Chat → Bereitstellen)

import { v0 } from 'v0-sdk'

// Ein Projekt erstellen
const project = await v0.projects.create({ name: 'Meine App' })

// Chat mit vorhandenem Code initialisieren
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: existingCode }],
  projectId: project.id,
})

// Folgeanweisungen senden
await v0.chats.sendMessage({
  chatId: chat.id,
  message: 'Füge eine Seitenleiste mit Navigationslinks und einem Benutzeravatar hinzu',
})

// Bereitstellen, wenn bereit
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`Live unter: ${deployment.url}`)

Generierten Code herunterladen

// Dateien einer bestimmten Chat-Version herunterladen
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

SDK-Methodenreferenz

Chats:

• v0.chats.create(params) — Neuen Chat erstellen
• v0.chats.sendMessage(params) — Nachricht an einen bestehenden Chat senden
• v0.chats.getById(params) — Bestimmten Chat abrufen
• v0.chats.update(params) — Chat-Eigenschaften aktualisieren
• v0.chats.findVersions(params) — Alle Versionen eines Chats auflisten
• v0.chats.getVersion(params) — Bestimmte Version abrufen
• v0.chats.updateVersion(params) — Dateien innerhalb einer Version aktualisieren
• v0.chats.downloadVersion(params) — Dateien für eine Version herunterladen
• v0.chats.resume(params) — Verarbeitung einer Nachricht fortsetzen

Projekte:

• v0.projects.create(params) — Neues Projekt erstellen
• v0.projects.getById(params) — Projekt abrufen
• v0.projects.update(params) — Projekt aktualisieren
• v0.projects.find() — Alle Projekte auflisten
• v0.projects.assign(params) — Chat einem Projekt zuweisen
• v0.projects.getByChatId(params) — Projekt anhand der Chat-ID abrufen
• v0.projects.createEnvVars(params) — Umgebungsvariablen für ein Projekt erstellen

Bereitstellungen:

• v0.deployments.create(params) — Bereitstellung aus einer Chat-Version erstellen
• v0.deployments.getById(params) — Bereitstellungsdetails abrufen
• v0.deployments.delete(params) — Bereitstellung löschen
• v0.deployments.find(params) — Bereitstellungen auflisten
• v0.deployments.findLogs(params) — Bereitstellungslogs abrufen

REST-API

Basis-URL: https://api.v0.dev/v1 Auth: Authorization: Bearer <V0_API_KEY>

Methode	Endpunkt	Beschreibung
GET	/v1/projects	Projekte auflisten
POST	/v1/projects	Projekt erstellen
GET	/v1/projects/:id	Projekt abrufen
PUT	/v1/projects/:id	Projekt aktualisieren
DELETE	/v1/projects/:id	Projekt löschen
POST	/v1/chats	Chat erstellen/initialisieren
GET	/v1/chats/:id/messages	Nachrichten abrufen
POST	/v1/chats/:id/messages	Nachricht senden
POST	/v1/deployments	Bereitstellung erstellen

Ratenbegrenzungen

• API-Anfragen: 10.000/Tag
• Chat-Nachrichten: 1.000/Tag
• Bereitstellungen: 100/Tag
• Datei-Uploads: 1 GB/Tag
• Projekte pro Konto: 100

Verfügbare Modelle

• v0-1.5-md — Alltägliche Aufgaben und UI-Generierung
• v0-1.5-lg — Fortgeschrittenes Denken
• v0-1.0-md — Legacy-Modell

AI SDK-Integration

v0 als KI-Anbieter verwenden

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: 'Erstelle ein Anmeldeformular mit E-Mail- und Passwortfeldern',
})

v0 AI-Tools (Agentenintegration)

Nutzen Sie die gesamten Fähigkeiten von v0 als Werkzeuge in einem AI SDK-Agenten:

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: 'Erstelle ein neues React-Dashboard-Projekt mit Diagrammen und einer Datentabelle',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

Für eine detaillierte Steuerung importieren Sie spezifische Werkzeugsets:

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

Der Export v0Tools umfasst über 20 Werkzeuge: createChat, sendMessage, getChat, updateChat, deleteChat, favoriteChat, forkChat, listChats, createProject, getProject, updateProject, listProjects, assignChatToProject, createEnvironmentVariables, createDeployment, getDeployment, deleteDeployment, listDeployments, getDeploymentLogs.

MCP-Server

Verbinden Sie v0 mit jeder MCP-kompatiblen IDE (Cursor, Codex, etc.):

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

Macht 4 Werkzeuge verfügbar: Chat erstellen, Chat-Info abrufen, Chats finden, Nachrichten senden.

GitHub-Integration

Einrichtung

1. Im v0-Chat-Sidebar → Abschnitt Git → auf Verbinden klicken
2. GitHub-Konto-/Organisationsbereich und Repository-Namen auswählen
3. Auf Repository erstellen klicken – verknüpft den Chat mit einem neuen privaten GitHub-Repo
4. Eine Vercel-Bereitstellung wird automatisch erstellt

Branch-Verhalten (Automatisch)

• Jeder Chat erstellt einen neuen Branch (z. B. v0/main-e7bad8e4)
• Jede Eingabeaufforderung, die Code ändert, committet und pusht automatisch
• Sie arbeiten niemals direkt auf main

PR-Workflow

1. Klicken Sie auf die Schaltfläche Veröffentlichen (zeigt PR-Symbol bei GitHub-Verbindung)
2. Wählen Sie PR öffnen – erstellt PR von v0/main-abc123 → main
3. Überprüfen Sie im GitHub-Modal oder auf GitHub.com
4. Mergen Sie den PR – schließt den Chat dauerhaft
5. Jeder PR erhält eine Vorschau-Bereitstellung; das Mergen löst die Produktionsbereitstellung aus

Vorhandene Repos importieren

1. In der v0-Eingabezeile → + → "Von GitHub importieren" klicken
2. v0 liest Ihre vorhandene Codebasis und Umgebungsvariablen von Vercel
3. Iterieren Sie mit Eingabeaufforderungen; alle Änderungen werden in einem neuen Branch committet

Tipps zur Prompt-Gestaltung

1. Seien Sie spezifisch beim Design

Schwach:  "Erstelle ein Dashboard"
Stark: "Erstelle ein Support-Ticket-Dashboard. Mobile-First, helles Design, hoher
        Kontrast. Farbcodierung: Rot für dringend, Gelb für mittel, Grün für niedrig.
        Zeige Agenten-Statusabzeichen. Maximal 2 Spalten auf Mobilgeräten."

2. Geben Sie Ihren Technologie-Stack an

"Erstelle eine Echtzeit-Chat-App mit: Next.js 16 mit App Router,
Socket.io für Nachrichten, Vercel Postgres für Speicher,
NextAuth.js für Authentifizierung."

3. Definieren Sie Benutzerrollen

"Erstelle ein Team-Kollaborationstool mit Admin-, Manager- und Mitglieds-
Rollen, Aufgabenverwaltung, Fortschrittsverfolgung und Dateifreigabe."

4. Mehrere Eingabeaufforderungen in die Warteschlange stellen

Sie können bis zu 10 Eingabeaufforderungen in die Warteschlange stellen, während v0 noch generiert:

1. "Erstelle das Grundlayout mit Navigation"
2. "Füge Authentifizierung mit NextAuth hinzu"
3. "Verbinde die Datenbank und füge CRUD-Operationen hinzu"
4. "Füge eine Einstellungsseite mit Dark-Mode-Umschalter hinzu"

5. Geben Sie Fehler- und Leerzustände an

"Füge umfassende Fehlerbehandlung für Netzwerkfehler, ungültige
Eingaben und Leerzustände mit hilfreichen Wiederherstellungsvorschlägen hinzu."

6. Verwenden Sie die visuelle Auswahl für Präzision

Klicken Sie auf ein bestimmtes Element in der Vorschau, bevor Sie tippen, um genau das anzusteuern, was Sie ändern möchten. Beseitigt Mehrdeutigkeiten bei Komponenten mit mehreren Instanzen.

7. Verwenden Sie den Entwurfsmodus vs. Eingabeaufforderungen

• Eingabeaufforderungen: Strukturelle Änderungen, Hinzufügen von Funktionen, Verkabeln von Logik
• Entwurfsmodus (Element klicken → anpassen): Farben, Abstände, Typografie-Anpassungen

8. Standard-Ausgabe-Stack von v0

Wenn kein Framework angegeben ist, generiert v0:

• React mit JSX + TypeScript
• Tailwind CSS
• shadcn/ui-Komponenten
• Lucide React-Icons
• Vollständigen, kopier- und einfügebereiten Code (niemals partielle Stubs)

Design-Normalisierung für die v0-Ausgabe

v0 ist am stärksten, wenn Sie sowohl die Struktur als auch die ästhetische Richtung angeben. Für Vercel-Stack-Projekte geben Sie Anleitungen wie: shadcn/ui-Primitive verwenden, Geist-Schriftarten verwenden, standardmäßig den Dunkelmodus verwenden, Zink-/Neutral-Token verwenden, generische Kartenraster vermeiden. Nach dem Importieren des v0-Codes normalisieren Sie ihn: Ersetzen Sie Ad-hoc-Steuerelemente durch shadcn-Komponenten, fassen Sie wiederholte Kartenraster zu stärkeren Mustern zusammen, gleichen Sie die Typografie an Geist an, entfernen Sie gemischte Radien und dekorative Effekte.

Integrationsmuster

Muster 1: Komponenten generieren, lokal importieren

Am besten zum Hinzufügen einzelner UI-Komponenten zu einer bestehenden App.

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

Dann die Komponente importieren:

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

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

Muster 2: GitHub-Roundtrip

Am besten zum Iterieren auf einem vollständigen Feature-Branch mit Nicht-Entwicklern.

1. Repo von GitHub in v0 importieren
2. Nicht-Entwickler iteriert über Eingabeaufforderungen
3. v0 committed jede Änderung automatisch in einen Feature-Branch
4. Entwickler überprüft den PR, merged ihn

Muster 3: SDK-Automatisierung

Am besten für CI/CD-Pipelines oder programmatische Komponentengenerierung.

import { v0 } from 'v0-sdk'

// Generieren Sie eine Komponente aus einer Designspezifikation
const chat = await v0.chats.create({
  message: `Erstelle eine Preistabellen-Komponente mit diesen Stufen:
    - Kostenlos: 0/Monat, 1 Projekt, Community-Support
    - Pro: $20/Monat, unbegrenzte Projekte, Prioritätssupport
    - Enterprise: Benutzerdefiniert, SLA, dedizierter Support`,
})

// Warten Sie auf die Generierung, dann laden Sie sie herunter
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

Muster 4: v0 als KI-Agenten-Werkzeug

Am besten für autonome Agenten, die UI generieren und bereitstellen müssen.

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 }),
    // ... andere Werkzeuge
  },
  system: 'Sie sind ein Full-Stack-Entwickler. Verwenden Sie v0, um UI-Komponenten zu generieren.',
})

const { text } = await agent.generateText({
  prompt: 'Erstelle ein Dashboard für unsere Analysedaten und stelle es bereit',
})

Integrierte Integrationen

v0 bietet native Unterstützung für diese Dienste in seiner Sandbox:

• Datenbanken: Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob
• KI: OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (über Vercel AI Gateway)
• Zahlungen: Stripe
• Externe APIs: Twilio und andere über das "Variablen"-Panel

Einschränkungen

• Am besten geeignet für UI-Komponenten und Layouts (~20 % einer vollständigen Anwendung)
• Backend, Datenbank, Authentifizierung und KI-Integration erfordern separate Implementierung oder explizite Eingabeaufforderung
• Generierter Code kann manuelle Korrekturen für komplexe Geschäftslogik erfordern
• Unternehmensweite Skalierbarkeit erfordert zusätzliche Architekturüberprüfung
• shadcn/ui ist die primäre Komponentenbibliothek; andere Bibliotheken erfordern explizite Eingabeaufforderung

Offizielle Dokumentation

• v0 App
• v0 Dokumentation
• [v0 API-Übersicht](https://v0...