Wonderland EngineをMCP経由でCoding Agentsに接続する

Wonderland Engineは、Cursor、VSCode Copilot、Claude Code、Gemini CLIなどのAIコーディングエージェントに、高性能な3Dウェブ開発へのアクセスを提供するためにMCPサーバープラグインを提供します。あなたのコーディングエージェントがシーンをインポートし、コンポーネントを設定し、設定を変更することを可能にします。

3Dグラフィックのレンダリングは複雑で、多くのコードを必要とします。レンダリングエンジンやゲームエンジンの構造と低レベルの理解は、訓練されたコーディングLLMにとって十分に達成可能ですが、ゲームやWebXRを制作するために一からゲームエンジンを書くのは非現実的です。

多くのウェブ3Dフレームワークは、WebGLやWebGPUを抽象化してコードにしたもので、ゲームエンジンではありません。これらはアセット処理パイプラインや高度なランタイム最適化を欠いており、その結果、性能の最適化はユーザー、またはこの場合ではコーディングエージェントに委ねられます。

しかし、ゲーム制作自体がすでに複雑な作業ですので、Wonderland Engineを強固な基盤として利用し、コーディングエージェントが実際の3Dゲームや WebXRエクスペリエンスに集中できるようにし、コーディングの速度を10倍に高めましょう。

Wonderland Engineは、コーディングエージェントと共に高性能な3Dウェブゲームを構築するための最良の選択です。なぜなら、それは高速に読み込まれるように最適化されており、iOS Safariでも問題なく動作し、最も人気のある3Dエンジンに関するLLMの知識がWonderland Engineに非常にうまく適応するからです。

このチュートリアルでは、Wonderland Engine MCPサーバープラグインのセットアップとインストール方法について説明します。

プラグインをインストールする

Views > Pluginsに移動し、プロジェクトでプラグインの実行を有効にします。その後、「プロジェクトスコープ」タブに切り替え、 @wonderlandengine/mcp-pluginの横の「インストール」をクリックします。

最後にプラグインを有効にします。

または、npmを使用してdevDependencyとして自分でプラグインをインストールすることもできます。

npm i -D @wonderlandengine/mcp-plugin

コーディングエージェントの設定

次に、コーディングエージェントを設定します。具体的な設定は使用するコーディングエージェントによって異なります。以下に、執筆時点で人気のあるAIコーディングエージェントIDEの設定ガイドを挙げます：

エディタが開いている間、MCPサーバーは_Streamable HTTP_トランスポートプロトコルを使用してlocalhost:3020/mcpで実行されます。

接続が動作するかどうかをテストするためのプロンプトは以下の通りです：

MCPツールを使用してWonderland Engineのシーンからキューブを削除してください。

トラブルシューティング

問題がある場合は、Discordコミュニティを通じてご連絡ください。喜んでお手伝いします！