mcpField
M
MCP-Editor

MCP-Editor

ローカル
github.com/playcanvasメディア・デザイン1492 週間前に更新
リポジトリ

MCP-Editor について

MCP-Editorは、PlayCanvas EditorのプロジェクトをAIエージェントで操作するMCPサーバーです。プロジェクトやアセットの編集に加え、シーンの実行と動作確認にも対応します。

主な機能

  1. 01プロジェクト、エンティティ、シーン、アセットの編集
  2. 02スクリプト、テンプレート、アニメーションの管理
  3. 03テクスチャやモデルなどの処理
  4. 04シーンの起動と実行状態の確認
  5. 05ビルド、ストアのインポート、VCSの管理

活用シーン

  1. 01開いているプロジェクトでシーンを作成・修正
  2. 02シーンを実行してスクリーンショットを撮影
  3. 03AIエージェントを介したアセットやスクリプトの編集

MCP 対応

PlayCanvas Editorのプロジェクト操作、編集、処理、実行時機能、VCSをツールとしてMCPクライアントに公開します。接続中のEditorで開いているプロジェクトを操作します。

#javascript#webgl#typescript#mcp#playcanvas#webgpu#webxr#mcp-server#vibe-coding

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "editor": {
      "command": "npx",
      "args": [
        "-y",
        "tsx"
      ],
      "env": {
        "PORT": "<PORT>"
      }
    }
  }
}
起動コマンドnpx -y tsx
設定が必要な環境変数
PORT

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmtsx

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

PlayCanvas Editor MCP サーバー

npm Version CI License Context Discord Reddit X

| npm | 開発者サイト | エディターマニュアル | API リファレンス | ブログ | フォーラム |

AI エージェントが PlayCanvas Editorを自動操作し、シーンが実際に動作することを確認できる MCP サーバーです。MCP クライアントは Editor に組み込まれているため、ブラウザー拡張機能は必要ありません。

MCP クライアントで操作する PlayCanvas Editor

インストール

MCP クライアントにサーバーを追加します。Claude Code の場合：

claude mcp add playcanvas -- npx -y @playcanvas/editor-mcp-server

Node.js 22.18 以降が必要です。エージェントごとにサーバーを 1 つ追加してください。2 つのサーバーを使う場合、Editor ポートの所有権は交互に切り替わります。

Claude Desktop、Cursor、共有プロジェクトの .mcp.json 
{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": ["-y", "@playcanvas/editor-mcp-server"]
    }
  }
}

これを claude_desktop_config.json（Settings > Developer > Edit Config）または Cursor のグローバル MCP サーバー（Cursor Settings > MCP）に追加するか、Claude Code 用にプロジェクトのルートにある .mcp.json に追加してコミットしてください。Windows では、"command": "cmd" と "args": ["/c", "npx", "-y", "@playcanvas/editor-mcp-server"] を使用してください。

Codex CLI とアプリ 
codex mcp add playcanvas -- npx -y @playcanvas/editor-mcp-server

Windows では、npx の前に cmd /c を挿入してください。初回実行時に npx のダウンロード中にタイムアウトした場合は、~/.codex/config.toml の [mcp_servers.playcanvas] にある startup_timeout_sec の値を大きくしてください。

次に、Editor でプロジェクトを開き、Publish の下にある MCP ボタンをクリックして、CONNECT をクリックします。プロジェクトを開かずに開始するには、playcanvas.com/editor の NEW PROJECT の横にある MCP ボタンを使用します。プロンプトが表示されたら、Chrome の Apps on device 権限を許可してください。許可しないと、Editor は Connecting のままになります。デフォルトのポートは 52000 です。変更するには、サーバーに --port <number> を渡し、Editor にも同じポートを設定してください。

使い方

開いているプロジェクトで希望する結果をエージェントに依頼します。たとえば：

Add a spinning cube with a rotate script to the current scene, launch it, and capture a screenshot
of the running app to confirm it turns.

ツール

カテゴリ対応内容
プロジェクト一覧表示、正確な読み取り、作成、名前・説明・公開範囲の編集、接続中のエディターでのプロジェクトのオープン
エンティティ正確な読み取り、フィルター付き一覧表示、解決、検索、スクリプト検索、作成、スキーマに準拠した一括編集、複製、階層の変更、削除、コンポーネントのライフサイクル
スクリプトアセットのテキストの読み取りと書き込み、解析、アタッチ、属性、並べ替え、削除
アセット正確な読み取り、参照グラフ、ネイティブ形式での作成、ストリーミングアップロード、最大 512 MiB のアトミックなダウンロード、スキーマに準拠した編集、移動、複製、ソースの置換、再インポート、削除、マテリアル
テンプレートインスタンス化、インスタンスのオーバーライドの確認、適用、元に戻す操作、リンク解除
アニメーションアニメーションステートグラフの読み取りと編集、マッピングに影響しないステート名の変更、アニメーションイベント
処理ライトマップ、モデルのアンラップとキャンセル、テクスチャ変換、アトラス、キューブマップ、フォント、メタデータ、圧縮バリアント、プリフィルタリング、スプライト、バンドル
シーン正確な読み取り、一覧表示、読み込み、作成、複製、名前変更、削除、シーン設定
設定スコープ指定されたプロジェクト、プライベート、ユーザー、セッション、シーンの設定の読み取りと編集
ビューポートカメラとビューポートの状態、表示設定、キャプチャ、フォーカス
エディター選択、編集時のログ、変換ギズモの状態、元に戻す、やり直し
ビルド一覧表示、正確な読み取り、作成オプション、ストリーミングダウンロード、プライマリビルドの選択、削除
ストアPlayCanvas Store の検索とインポート、ライセンス、Sketchfab の検索とインポート、My Assets の検索とインポート
ランタイム起動のライフサイクルとオプション、エンジンバージョンの検出、スクリーンショット、ログ、ライブ状態の確認、キーボード・マウス・タッチ入力
VCSブランチ、チェックポイント、復元とハードリセット、マージ、競合解決、チェックポイントの差分

ツールは、接続中のエディターで開いているプロジェクトを操作します。操作できるエディターは一度に 1 つです。プロジェクトツールは、プロジェクトを開いていない状態でも、playcanvas.com/editor のプロジェクトマネージャーから利用できます。プロジェクトを開くとタブがそのプロジェクトに再読み込みされ、自動的に再接続されます。プロジェクトは削除できません。ランタイムツールは起動ウィンドウを開くため、エディターのポップアップを許可してください。

コンテキストコスト

130 個のツール定義は、合計で約 43,000 トークン（1 トークンあたり 4 文字）です。Claude Code の MCP ツール検索はデフォルトで有効になっており、起動時にはツール名のみを読み込みます。これは約 1,000 トークンです。

データとネットワークの使用

サーバーはテレメトリーを収集しません。127.0.0.1:52000 で playcanvas.com とローカルホストのページを待ち受け、同じポートを使用しているほかのプロセスを停止します。ローカルファイルにアクセスするのはアップロードおよびダウンロードツールのみです。また、外部へのリクエストは 1 つだけで、download_build がエディターから通知されたアーカイブ URL を取得します。

コントリビューション

git clone https://github.com/playcanvas/editor-mcp-server.git
cd editor-mcp-server
npm install
npm run watch

MCP クライアントの接続先として src/server.ts を指定し、"command": "node" を設定してください。npm run debug で MCP Inspector が開き、npm run build で公開用のバンドルが生成されます。バグは GitHub Issuesで報告してください。

ライセンス

PlayCanvas Editor MCP Server は、MIT Licenseのもとで公開されています。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。