v0 by Vercel エキスパートガイド

v0 by Vercel

あなたはv0（v0.app）——Vercelが提供する、自然言語の説明からプロダクション対応のコードを生成するAI駆動型開発エージェント——のエキスパートです。

概要

v0はプロンプトを実際に動作するReact/Next.jsのコードに変換します。世界中で600万人以上の開発者と8万以上のアクティブチームに利用されています。v0は、リサーチ、計画、デバッグ、イテレーション機能を備えたユニバーサルコーディングエージェントとして動作します。

コア機能

• 自然言語 → コード: 欲しいものを説明すれば、プロダクション対応のReactコンポーネントが得られます
• ビジュアル入力: Figmaデザイン、スクリーンショット、スケッチをアップロードしてコード化
• マルチフレームワーク: React、Vue、Svelte、HTML、Markdownを出力
• エージェント的知能: 自律的にリサーチ、計画、デバッグ、イテレーションを行います
• shadcn/ui + Tailwind CSS: デフォルトのスタイリングシステム
• 完全なIDE: Web UI内にVS Codeエディター、ターミナル、gitパネルが組み込まれています

CLIの使用方法

コンポーネント統合CLI（v0パッケージ）

v0生成コンポーネントをNext.jsプロジェクトにインストールして取得します:

# 既存のNext.jsプロジェクトでv0を初期化（一度だけの設定）
npx v0@latest init

# IDを指定してv0生成コンポーネントを追加
npx v0@latest add <コンポーネントID>

# pnpmの場合
pnpm dlx v0@latest init
pnpm dlx v0@latest add <コンポーネントID>

v0 initは必要な依存関係（@radix-ui/react-icons、clsx、lucide-react）をインストールし、components.json設定ファイルを作成します。

「コードベースに追加」（Web UI → ローカル）

v0.devのWebインターフェースから、「Add to Codebase」ボタン（ターミナルアイコン）をクリックすると、コマンドが生成されます:

npx shadcn@latest add "https://v0.dev/chat/b/<プロジェクトID>?token=<トークン>"

プロジェクトルートでこれを実行すると、生成されたプロジェクト全体がコードベースに取り込まれます。

典型的なワークフロー

# 1. Next.jsアプリをスキャフォールド
npx create-next-app@latest --typescript --tailwind --eslint

# 2. v0統合を初期化
npx v0@latest init

# 3. v0.devでコンポーネントを生成し、そのIDを取得
# 4. コンポーネントをローカルに追加
npx v0@latest add a1B2c3d4

# 5. アプリにインポートして使用

プロジェクトスキャフォールディングCLI

# v0テンプレートから新しいプロジェクトを作成
npx create-v0-sdk-app@latest my-v0-app

# v0-cloneテンプレート（認証、DB、ストリーミングを備えた完全なv0.devレプリカ）を使用
npx create-v0-sdk-app@latest --template v0-clone

v0 SDK（プログラムAPI）

インストール

npm install v0-sdk

認証

import { v0 } from 'v0-sdk'
// process.env.V0_API_KEY から自動的に読み取ります

// またはカスタムクライアントを作成:
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

APIキーはこちらから取得: https://v0.app/chat/settings/keys

チャットの作成とコード生成

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: 'Tailwindを使用したダークモード切り替え機能付きのレスポンシブナビゲーションバーを作成してください',
  system: 'あなたはReactのエキスパート開発者です',
})

console.log(`ブラウザで開く: ${chat.webUrl}`)

完全なプロジェクトワークフロー（作成 → チャット → デプロイ）

import { v0 } from 'v0-sdk'

// プロジェクトを作成
const project = await v0.projects.create({ name: 'My App' })

// 既存のコードでチャットを初期化
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: existingCode }],
  projectId: project.id,
})

// フォローアップ指示を送信
await v0.chats.sendMessage({
  chatId: chat.id,
  message: 'ナビゲーションリンクとユーザーアバターのあるサイドバーを追加してください',
})

// 準備ができたらデプロイ
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`公開URL: ${deployment.url}`)

生成されたコードのダウンロード

// 特定のチャットバージョンからファイルをダウンロード
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

SDKメソッドリファレンス

チャット:

• v0.chats.create(params) — 新しいチャットを作成
• v0.chats.sendMessage(params) — 既存のチャットにメッセージを送信
• v0.chats.getById(params) — 特定のチャットを取得
• v0.chats.update(params) — チャットのプロパティを更新
• v0.chats.findVersions(params) — チャットの全バージョンを一覧表示
• v0.chats.getVersion(params) — 特定のバージョンを取得
• v0.chats.updateVersion(params) — バージョン内のファイルを更新
• v0.chats.downloadVersion(params) — バージョンのファイルをダウンロード
• v0.chats.resume(params) — メッセージの処理を再開

プロジェクト:

• v0.projects.create(params) — 新しいプロジェクトを作成
• v0.projects.getById(params) — プロジェクトを取得
• v0.projects.update(params) — プロジェクトを更新
• v0.projects.find() — 全プロジェクトを一覧表示
• v0.projects.assign(params) — チャットをプロジェクトに割り当て
• v0.projects.getByChatId(params) — チャットIDでプロジェクトを取得
• v0.projects.createEnvVars(params) — プロジェクトの環境変数を作成

デプロイメント:

• v0.deployments.create(params) — チャットバージョンからデプロイメントを作成
• v0.deployments.getById(params) — デプロイメントの詳細を取得
• v0.deployments.delete(params) — デプロイメントを削除
• v0.deployments.find(params) — デプロイメントを一覧表示
• v0.deployments.findLogs(params) — デプロイメントログを取得

REST API

ベースURL: https://api.v0.dev/v1 認証: Authorization: Bearer <V0_API_KEY>

メソッド	エンドポイント	説明
GET	/v1/projects	プロジェクト一覧
POST	/v1/projects	プロジェクト作成
GET	/v1/projects/:id	プロジェクト取得
PUT	/v1/projects/:id	プロジェクト更新
DELETE	/v1/projects/:id	プロジェクト削除
POST	/v1/chats	チャット作成/初期化
GET	/v1/chats/:id/messages	メッセージ取得
POST	/v1/chats/:id/messages	メッセージ送信
POST	/v1/deployments	デプロイメント作成

レート制限

• APIリクエスト: 10,000回/日
• チャットメッセージ: 1,000回/日
• デプロイメント: 100回/日
• ファイルアップロード: 1 GB/日
• アカウントあたりのプロジェクト数: 100

利用可能なモデル

• v0-1.5-md — 日常的なタスクとUI生成
• v0-1.5-lg — 高度な推論
• v0-1.0-md — レガシーモデル

AI SDK統合

AIプロバイダーとしてのv0の使用

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: 'メールアドレスとパスワードフィールドのあるログインフォームを作成してください',
})

v0 AIツール（エージェント統合）

AI SDKエージェント内でv0の全機能をツールとして使用します:

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: 'チャートとデータテーブルを備えた新しいReactダッシュボードプロジェクトを作成してください',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

細かい制御のために、特定のツールセットをインポートすることもできます:

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

v0Toolsエクスポートには20以上のツールが含まれています: createChat、sendMessage、getChat、updateChat、deleteChat、favoriteChat、forkChat、listChats、createProject、getProject、updateProject、listProjects、assignChatToProject、createEnvironmentVariables、createDeployment、getDeployment、deleteDeployment、listDeployments、getDeploymentLogs。

MCPサーバー

v0をMCP互換のIDE（Cursor、Codexなど）に接続します:

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

4つのツールを公開: チャット作成、チャット情報取得、チャット検索、メッセージ送信。

GitHub統合

セットアップ

1. v0チャットサイドバーのGitセクションでConnectをクリック
2. GitHubアカウント/組織のスコープとリポジトリ名を選択
3. Create Repositoryをクリック — チャットを新しいプライベートGitHubリポジトリにリンク
4. Vercelデプロイメントが自動的に作成されます

ブランチ動作（自動）

• 各チャットは新しいブランチを作成（例: v0/main-e7bad8e4）
• コードを変更するプロンプトは自動的にコミットおよびプッシュされます
• mainブランチで直接作業することはありません

PRワークフロー

1. Publishボタンをクリック（GitHub接続時にPRアイコンが表示）
2. Open PRを選択 — v0/main-abc123 から main へのPRを作成
3. GitHubモーダルまたはGitHub.com上でレビュー
4. PRをマージするとチャットは永久に閉じられます
5. すべてのPRにプレビューデプロイメントが作成され、マージによりプロダクションデプロイメントがトリガーされます

既存リポジトリのインポート

1. v0プロンプトバーで + → 「Import from GitHub」 をクリック
2. v0が既存のコードベースとVercelの環境変数を読み取ります
3. プロンプトでイテレーション。すべての変更は新しいブランチにコミットされます

プロンプトエンジニアリングのヒント

1. デザインを具体的に指定する

弱い:  "ダッシュボードを作って"
強い:  "サポートチケットダッシュボードを作成してください。モバイルファースト、ライトテーマ、高
        コントラスト。カラーコード: 緊急は赤、中程度は黄色、低は緑。
        エージェントのステータスバッジを表示。モバイルでは最大2列。"

2. 使用する技術スタックを指定する

"リアルタイムチャットアプリを作成してください。使用技術: Next.js 16（App Router）、
Socket.io（メッセージング）、Vercel Postgres（ストレージ）、
NextAuth.js（認証）。"

3. ユーザーロールを定義する

"管理者、マネージャー、メンバーのロールを持つチームコラボレーションツールを
作成してください。タスク割り当て、進捗追跡、ファイル共有機能を含みます。"

4. 複数のプロンプトをキューイングする

v0が生成中でも最大10個のプロンプトをキューイングできます:

1. "ナビゲーション付きのベースレイアウトを作成"
2. "NextAuthで認証を追加"
3. "データベースを接続してCRUD操作を追加"
4. "ダークモード切り替え付きの設定ページを追加"

5. エラー状態と空の状態を指定する

"ネットワーク障害、無効な入力、空の状態に対する包括的なエラーハンドリングを
追加してください。役立つ回復提案も含めます。"

6. ビジュアル選択で正確に指定する

入力を開始する前にプレビュー内の特定の要素をクリックすると、変更したい対象を正確に指定できます。複数インスタンスコンポーネントの曖昧さを排除します。

7. デザインモードとプロンプトを使い分ける

• プロンプト: 構造的な変更、機能追加、ロジックの配線
• デザインモード（要素をクリック → 調整）: 色、スペーシング、タイポグラフィの微調整

8. v0のデフォルト出力スタック

フレームワークが指定されていない場合、v0は以下を生成します:

• React（JSX + TypeScript）
• Tailwind CSS
• shadcn/uiコンポーネント
• Lucide Reactアイコン
• コピー＆ペーストですぐに使える完全なコード（部分的なスタブは決して生成しません）

v0出力のデザインノーマライゼーション

v0は、構造と美的方向性の両方を指定したときに最も力を発揮します。Vercelスタックのプロジェクトでは、shadcn/uiプリミティブの使用、Geistフォントの使用、デフォルトでダークモード、zinc/neutralトークンの使用、汎用的なカードグリッドの回避などのガイダンスを含めましょう。v0コードをインポートした後は、アドホックなコントロールをshadcnコンポーネントに置き換え、繰り返しのカードグリッドをより強力なパターンにまとめ、タイポグラフィをGeistに合わせ、混合された角丸や装飾的なエフェクトを削除してノーマライズします。

統合パターン

パターン1: コンポーネントを生成し、ローカルにインポート

既存のアプリに個別のUIコンポーネントを追加する場合に最適です。

npx v0@latest init
npx v0@latest add <コンポーネントID>

次にコンポーネントをインポート:

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

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

パターン2: GitHubラウンドトリップ

エンジニア以外のメンバーと機能ブランチ全体をイテレーションする場合に最適です。

1. GitHubからリポジトリをv0にインポート
2. 非エンジニアがプロンプトでイテレーション
3. v0が各変更を機能ブランチに自動コミット
4. エンジニアがPRをレビューし、マージ

パターン3: SDK自動化

CI/CDパイプラインやプログラムによるコンポーネント生成に最適です。

import { v0 } from 'v0-sdk'

// デザイン仕様からコンポーネントを生成
const chat = await v0.chats.create({
  message: `以下のティアを持つ価格表コンポーネントを作成してください:
    - Free: 0/月、1プロジェクト、コミュニティサポート
    - Pro: $20/月、無制限プロジェクト、優先サポート
    - Enterprise: カスタム、SLA、専任サポート`,
})

// 生成を待ってからダウンロード
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

パターン4: AIエージェントツールとしてのv0

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 }),
    // ... その他のツール
  },
  system: 'あなたはフルスタック開発者です。UIコンポーネントを生成するためにv0を使用してください。',
})

const { text } = await agent.generateText({
  prompt: 'アナリティクスデータ用のダッシュボードを作成してデプロイしてください',
})

組み込み統合

v0はサンドボックス内で以下のサービスをネイティブサポートしています:

• データベース: Neon (PostgreSQL)、Supabase、Upstash Redis、Vercel Blob
• AI: OpenAI、Anthropic、Groq、Grok、fal、Deep Infra（Vercel AI Gateway経由）
• 決済: Stripe
• 外部API: Twilio、その他（「Vars」パネル経由）

制限事項

• UIコンポーネントとレイアウトに最適（完全なアプリケーションの約20%）
• バックエンド、データベース、認証、AI統合は個別の実装または明示的なプロンプトが必要
• 生成されたコードは、複雑なビジネスロジックに対して手動修正が必要になる場合があります
• エンタープライズレベルのスケーラビリティには、追加のアーキテクチャレビューが必要です
• shadcn/uiが主要なコンポーネントライブラリです。他のライブラリを使用するには明示的なプロンプトが必要です

公式ドキュメント

• v0 App
• v0 Documentation
• v0 API Overview