Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@v0 MCP Servercreate a login page with email and password fields, remember me checkbox, and social login buttons"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
v0 MCP Server
v0 Platform APIを使って自然言語の要件からプロトタイプのURLを返すMCPサーバーです。
機能
generate_prototype: 自然言語の要件を受け取り、v0 Platform APIを使ってプロトタイプを生成し、デモURLを返します
Related MCP server: TypeScript Prompt MCP Server
セットアップ
依存関係のインストール:
npm install環境変数の設定: MCPクライアント側で以下の環境変数を設定してください：
V0_API_KEY=your_v0_api_key_hereビルド:
npm run build使用方法
MCPクライアントでの使用
MCPクライアントの設定で以下のようにサーバーを追加します：
{
"mcpServers": {
"v0-mcp-server": {
"command": "node",
"args": ["/path/to/v0-mcp-server/dist/index.js"],
"env": {
"V0_API_KEY": "your_v0_api_key_here"
}
}
}
}ツールの使用例
const result = await mcpClient.callTool('generate_prototype', {
requirements: 'Reactを使ったTODOアプリを作成してください。ダークモード対応で、ローカルストレージに保存する機能も含めてください。'
});
// 成功時のレスポンス例：
// {
// "success": true,
// "chatId": "chat_123",
// "demoUrl": "https://v0.dev/chat/demo_url",
// "files": [...],
// "createdAt": "2025-01-xx T xx:xx:xx.xxxZ"
// }開発
テスト実行
MCPインスペクターを使用してテストできます：
npm run inspectorブラウザでインスペクターUIが開き、ツールの動作を確認できます。
開発モード
npm run devAPI
generate_prototype
パラメータ:
requirements(string, 必須): プロトタイプの要件を自然言語で記述model(string, オプション): 使用するモデル ("v0-1" | "v0-2", デフォルト: "v0-2")
戻り値: 成功時は生成されたプロトタイプのURL、ファイル情報、チャットIDを含むJSONを返します。 エラー時はエラー情報を含むJSONを返します。
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.