Cocos Creator 3.x MCP インストール手順：拡張をインポートして AI IDE に接続

このガイドでできること

次の 5 ステップで Cocos Creator 3.x MCP（VberAI Pro）をローカルの Creator プロジェクトに接続し、Cursor（または他の MCP 対応 AI IDE。手順は同趣旨）からエディタを操作・プレビュー・デバッグできるようにします。

完了後にできること：

• 拡張管理から cocos-mcp-server をインポートして有効化する
• VberAI アカウント、またはメール＋アクティベーションコードで有効化する
• ローカルの Cocos MCP Server（既定ポート 3000）を起動する
• クイック設定 → 自動設定 で Cursor に登録し、接続を確認する

製品ページ：VberAI Cocos MCP 3.x

本稿は Cursor を例にします。Claude Code、Windsurf、Cline なども流れは同様です。

前提条件

項目	内容
Cocos Creator	3.0+（3.x プロジェクト）
プラグイン	公式サイトの Cocos Creator 3.x MCP Pro アーカイブ
有効化	VberAI アカウント＋パスワード、またはメール＋アクティベーションコード
AI IDE	Cursor 推奨。他の MCP クライアントでも可
ローカル通信	橋渡しは通常 127.0.0.1。ポートを公開しないこと

ステップ 1：Cocos Creator 3.x MCP をダウンロード

VberAI 公式サイトから Pro を入手します。

ダウンロードページ： https://www.vberai.com/game-engines/cocos?ch=CQZLC2FG

推奨手順：

1. ページを開き、権限に応じて Cocos MCP 3.x Pro をダウンロードする
2. アーカイブをローカルに保存する（次のステップで「拡張をインポート」するため、プロジェクトへ直接展開しなくてよい）
3. Creator が 3.0 以上 の 3.x であること、2.x 用パッケージと混用しないことを確認する

OSS / Pro の違いと料金は公式の最新説明に従ってください。

ステップ 2：拡張をインポートする

1. 対象の Cocos Creator 3.x プロジェクトを開く
2. メニュー 拡張 → 拡張管理 → 拡張をインポート
3. ダウンロードした Cocos Creator 3.x MCP アーカイブを選択する
4. 成功後、一覧に cocos-mcp-server が有効 と表示される

無効の場合は有効にしてから進みます。

ステップ 3：cocos-mcp-server を有効化する

1. メニュー 拡張 → Cocos MCP Server → Open Mcp Panel
2. 有効化画面で次のいずれか：
   • VberAI アカウント＋パスワード
   • メール＋アクティベーションコード
3. 成功後、MCP Server 設定ページへ進む（次ステップ）

未有効化だとサービスは通常起動しません。プランやコードが現行 Pro に対応しているか確認してください。

ステップ 4：cocos-mcp-server を起動する

1. 有効化後、MCP Server 設定 を開く
2. 必要に応じて調整：
   • ポート：既定 3000
   • 言語：UI の好みに合わせる
   • 起動：パネルのオプションに従う（エディタ連動の自動起動など）
3. サービスの起動 をクリック
4. 「実行中」 と表示されたら起動成功です

これでローカル MCP 橋渡しが用意できました。次に AI IDE へ渡します。

ステップ 5：AI IDE を一括設定する（Cursor の例）

1. ツール管理 を開く
   • 公開ツール一覧を確認し、使わせたいものだけをオンにする
2. クイック設定 を開く
   • IDE（例：Cursor）を選ぶ
   • 自動設定 をクリック
   • 設定済み 状態になることを確認する
3. Cursor を開く
   • MCP / ツール一覧に cocos-creator（またはパネル表示名）が接続されているはずです
   • 出ない場合は Cursor で 再読み込み（MCP Reload）して再確認する

他の IDE もクイック設定でクライアントを切り替えるだけです。

接続後の簡単な確認

Cursor ではまず読み取り専用の確認から始めます。例：

現在 Cocos Creator で開いているシーンのルートノードを列挙してください。

Hierarchy と一致すれば橋渡しは正常です。続けて小さな書き込みで権限とツール選択を確認してください。

よくある質問

インポート失敗、または一覧に cocos-mcp-server が無い？
公式の 3.x アーカイブ（2.x ではない）を使い、Creator は 3.0 以上。無効なら拡張管理で有効化し、Creator を再起動します。

有効化が何度も失敗する？
Pro 権限やアクティベーションコードの有効期限・メール紐付けを公式アカウントで確認してから再試行してください。

起動しても「実行中」にならない？
ポート 3000（または変更ポート）が空いているか、localhost をブロックしていないかを確認。ステップ 3 の完了も確認します。

Cursor に cocos-creator が出ない？
Creator 側が 実行中 か確認し、クイック設定→自動設定をやり直し、Cursor で MCP を再読み込みします。

次のステップ

• 自然言語でシーン照会や小さな編集を試し、ツールの境界を把握する
• 大きな変更の前にコミットする。橋渡しは localhost のみ
• デザインからエンジン UI は VberAI AI Studio と組み合わせ、その後 MCP で反復する

Creator 2.x は Cocos Creator 2.x MCP インストール手順 を参照し、パッケージを混用しないでください。背景は Cocos Creator MCP 動画ガイド も参照できます。