Vercel MCP Integration

Vercel MCP 統合

Vercel の REST API を利用する Model Context Protocol（MCP）統合です。Claude や Cursor などの AI アシスタントを通じて、Vercel のデプロイ管理にプログラムからアクセスできます。

📋 概要 _{^{最終更新：2025 年 5 月}}

この MCP サーバーは、Vercel の主要な API エンドポイントをツールとして実装し、以下を可能にします。

• デプロイの監視と管理
• 環境変数の取得
• プロジェクトのデプロイ状況の追跡
• チームの作成と管理
• CI/CD パイプラインとの統合

✨ 機能

現在のツール

デプロイ管理

• vercel-list-all-deployments - フィルタリングしてデプロイを一覧表示
• vercel-get-deployment - 特定のデプロイの詳細を取得
• vercel-list-deployment-files - デプロイ内のファイルを一覧表示
• vercel-create-deployment - 新しいデプロイを作成

プロジェクト管理

• vercel-create-project - 新しい Vercel プロジェクトを作成
• vercel-list-projects - ページネーションを使用してすべてのプロジェクトを一覧表示
• vercel-find-project - ID または名前で特定のプロジェクトを検索
• vercel-create-environment-variables - 複数の環境変数を作成
• vercel-get-project-domain - プロジェクト内の特定のドメインに関する情報を取得

環境管理

• vercel-get-environments - プロジェクトの環境変数にアクセス
• vercel-create-custom-environment - プロジェクト用のカスタム環境を作成

チーム管理

• vercel-list-all-teams - アクセス可能なすべてのチームを一覧表示
• vercel-create-team - カスタムのスラッグと名前で新しいチームを作成

🛣️ ロードマップ

• デプロイ作成ワークフロー
• プロジェクト管理ツール
• チーム管理の統合（チームの一覧表示と作成）
• 高度なエラー処理

📚 ツールドキュメント

各ツールの詳細については、以下のドキュメントを参照してください。

• デプロイツール - デプロイ管理用のツール
• プロジェクトツール - プロジェクトと環境変数の管理用ツール
• 環境ツール - 環境設定用のツール
• チームツール - チーム管理用のツール

🚀 はじめに

前提条件

• Node.js 18+
• Vercel API Token
• MCP クライアント（Claude、Cursor、または MCP をサポートするその他の AI アシスタント）

インストール

git clone [your-repo-url]
cd vercel-mcp
npm install

設定

1. .env ファイルを作成します。

VERCEL_API_TOKEN=your_api_token_here

2. MCP サーバーを起動します。

npm start

🔗 AI アシスタントとの統合

Claude との統合

Claude は、Anthropic Console または Claude Code インターフェースを通じて MCP ツールをサポートします。

1. npm start を使って MCP サーバーをローカルで起動します。
2. Claude Code で /connect コマンドを使用します。

   /connect mcp --path [path-to-server]
   

   stdio を使用する CLI ベースのサーバーの場合は、サーバー実行ファイルへのパスを指定します。
3. Claude が利用可能な Vercel ツールを自動的に検出します。
4. その後、Claude に Vercel の操作を依頼できます。たとえば、以下のように依頼できます。

   Please list my recent Vercel deployments using the vercel-list-all-deployments tool
   

5. または、mcp-proxy などのツールを使って、MCP サーバーを HTTP サーバーとして公開できます。

   npm install -g @modelcontextprotocol/proxy
   mcp-proxy --stdio --cmd "npm start" --port 3399
   

   その後、Claude で /connect mcp --url http://localhost:3399 を実行して接続します。

Cursor との統合

Cursor は拡張機能システムを通じて、MCP ツールを標準でサポートしています。

1. npm start で MCP サーバーを起動します
2. Cursor で「設定」→「ツール」にアクセスします
3. 「Model Context Protocol (MCP)」の下にある「+ MCP ツールを追加」をクリックします
4. 新しい接続を設定します：
   • stdio トランスポートの場合：実行ファイルのパスを指定します
   • HTTP トランスポートの場合：URL を指定します（例：http://localhost:3399）
5. Cursor が利用可能な Vercel ツールを自動的に検出します
6. プロンプトでツールに言及し、Cursor の AI 機能を使って Vercel デプロイとやり取りします

プログラムによる統合

Model Context Protocol SDK を使って、独自のアプリケーションからプログラムでサーバーと統合することもできます：

import { Client } from "@modelcontextprotocol/sdk/client";

// Create an MCP client connected to a stdio transport
const client = new Client({
  transport: "stdio",
  cmd: "npm --prefix /path/to/vercel-mcp start",
});

// Or connect to an HTTP transport
const httpClient = new Client({
  transport: "http",
  url: "http://localhost:3399",
});

// Connect to the server
await client.connect();

// List available tools
const { tools } = await client.listTools();
console.log(
  "Available tools:",
  tools.map((t) => t.name)
);

// Call a tool
const result = await client.callTool({
  name: "vercel-list-all-deployments",
  args: { limit: 5 },
});

console.log("Deployments:", result);

// You can also use this in an Express server:
app.post("/api/deployments", async (req, res) => {
  try {
    const result = await client.callTool({
      name: "vercel-list-all-deployments",
      args: req.body,
    });
    res.json(result);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

🛠️ ツールの使用例

すぐに使い始められる簡単な例をいくつか紹介します。詳細なドキュメントやその他の例については、ツールのドキュメントを参照してください。

最近のデプロイを一覧表示する

const response = await mcpClient.callTool({
  name: "vercel-list-all-deployments",
  args: {
    limit: 5,
    target: "production",
  },
});

新しいプロジェクトを作成する

const project = await mcpClient.callTool({
  name: "vercel-create-project",
  args: {
    name: "my-awesome-project",
    framework: "nextjs",
    teamId: "team_1a2b3c4d5e6f7g8h9i0j1k2l",
  },
});

Git からデプロイする

const deployment = await mcpClient.callTool({
  name: "vercel-create-deployment",
  args: {
    project: "my-project-id",
    gitSource: {
      type: "github",
      ref: "main",
    },
  },
});

ファイルのデプロイ、環境管理、チーム操作など、より詳しい例については、次のドキュメントを参照してください：

• デプロイの例
• プロジェクトの例
• 環境の例
• チームの例

🐳 Docker によるデプロイ

イメージをビルドする

docker build -t vercel-mcp .

コンテナを実行する

docker run -it --rm \
  -e VERCEL_API_TOKEN=your_token_here \
  -p 3399:3399 \
  vercel-mcp

本番環境へのデプロイ

docker run -d \
  --name vercel-mcp \
  --restart unless-stopped \
  -e VERCEL_API_TOKEN=your_token_here \
  -p 3399:3399 \
  vercel-mcp

ライブリロードを有効にした開発

docker build --target builder -t vercel-mcp-dev .
docker run -it --rm \
  -e VERCEL_API_TOKEN=your_token_here \
  -p 3399:3399 \
  -v $(pwd)/src:/app/src \
  vercel-mcp-dev

🗂️ プロジェクト構成

src/
├── constants/       # Tool definitions
├── tools/
│   ├── deployments/ # Deployment handlers
│   │   ├── handlers.ts
│   │   ├── schema.ts
│   │   └── types.ts
│   └── environments/# Environment management
├── utils/          # API helpers
└── index.ts         # Server entrypoint

🔧 設定

環境変数

変数	説明	必須
VERCEL_API_TOKEN	Vercel アクセストークン	はい

🤝 コントリビューション

1. リポジトリをフォークします
2. 機能ブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します

📄 ライセンス

MIT ライセンスの詳細については、LICENSEを参照してください。