8th Wall Mcp

8th Wall MCP サーバー

Claude Desktop と 8th Wall Desktop を使って、自然言語で WebAR エクスペリエンスを構築します

🚀 ワンクリックインストール

最新バージョンをダウンロード：

📦 6.3 MB • 🎨 Pure Three.js • 📱 AR-Tested • 🐛 Bug Fixes

ダブルクリックでインストールできます！ ターミナルコマンドも設定ファイルも不要です。

---

✨ 新着情報

最新アップデート（v0.2.10）🐛

修正：ECS 属性エラー

• 🐛 「No attribute registered」エラーを修正 - 問題のあるアニメーションツールを無効化しました
• ❌ 問題のあるツールを削除 - desktop_add_rotation_animation と desktop_add_scale_animation を無効化しました
• ✅ Three.js アニメーションを使用 - すべてのアニメーションで desktop_add_threejs_script を使用するようになりました
• 🎯 実行時エラーを解消 - Desktop プロジェクトで ECS 属性エラーが発生しなくなりました
• 📝 わかりやすいエラーメッセージ - 問題のあるツールが正しい方法を案内するようになりました
• 🚀 安定性と信頼性を向上 - 動作するすべてのツールをテストし、検証しました

以前のアップデート（v0.2.9）🔥

A-Frame コンポーネントを完全に削除

• 🗑️ すべての A-Frame コンポーネントを削除 - particleSystem.js、audioController.js、gestureHandler.js、physicsHelper.js を削除しました
• ✅ AFRAME エラーを解消 - 「Can't find variable: AFRAME」エラーが発生しなくなりました
• ⚠️ ツールに明確な警告を表示 - A-Frame ツールに「WEB PROJECTS ONLY」と明示するようになりました

以前のアップデート（v0.2.8）📚

ドキュメントを明確化

• 🎯 ドキュメントを追加 - Desktop では A-Frame ではなく Three.js を使用することを明確に説明しています
• ✅ 混乱を解消 - A-Frame は Web プロジェクト専用で、Desktop では使用しません
• 📚 DESKTOP_THREEJS_ONLY.md - Desktop 開発の正しい方法を詳しく説明したガイドです
• 🛠️ 適切なツール - Desktop プロジェクトでは desktop_add_threejs_script を使用してください

以前のアップデート（v0.2.7）🛡️

AFRAME の安全性チェック（Web プロジェクトのみ）

• 🛡️ 安全な AFRAME 登録 - すべてのコンポーネントで、登録前に AFRAME の有無をチェックするようになりました
• ⏱️ 読み込みイベントを待機 - コンポーネントの初期化前に、window の 'load' イベントを待機します
• 🐛 実行時エラーをゼロに - 「Can't find variable: AFRAME」エラーを解消しました
• 📝 詳細なログ出力 - デバッグ用の詳しいコンソールメッセージを表示します
• ✅ 適切なフォールバック - 必要に応じて A-Frame の追加を案内する、わかりやすいエラーメッセージを表示します
• 🔄 Webpack HMR に対応 - 切断の問題が発生しなくなりました

以前のアップデート（v0.2.6）🚀

Three.js がデフォルトのフレームワークになりました！

• 🎯 Three.js をデフォルトに設定 - 新しいプロジェクトでは、A-Frame ではなく Three.js をデフォルトで使用します
• 🐛 モバイルの問題を修正 - モバイルデバイスで発生していた A-Frame の読み込みエラーを解消しました
• ✅ 互換性を向上 - Three.js のみを使用することで、モバイルブラウザーのサポートを改善しました
• 🔄 自動フォールバック - エンジンが不明な場合、シーンツールが自動的に Three.js を使用します
• 📚 ドキュメントを充実 - 移行ガイドを拡充し、テンプレートを更新しました
• ⚡ 破壊的変更なし - テンプレートパラメーターを明示的に指定すれば、引き続き A-Frame を使用できます

過去の更新（v0.2.5）🎨

Three.js スクリプトジェネレーター

• 🎯 desktop_add_threejs_script - AR インタラクション向けの、実戦で検証済みの Three.js スクリプトを生成します
• ✅ 適切な XR8 統合 - パイプラインの初期化、シーンへのアクセス、カメラ設定を正しく処理します
• 📱 AR でテスト済み - タッチ／クリック操作でモバイルデバイス上でも問題なく動作します
• 🎨 インタラクティブなオブジェクト - タップすると色が変わる球体、パーティクルシステムなどを作成します
• 📍 最適な配置 - 適切な視野角（FOV）で、オブジェクトを目の高さの5m先に配置します
• 🐛 包括的なログ記録 - トラブルシューティングに役立つ詳細なデバッグ出力を提供します
• 📦 6.3 MB - すべての依存関係とテンプレートを含みます

過去の更新（v0.2.4）

• 🤖 AI を活用した AR 作成 - 自然言語から完全な AR 体験を作成します
• 🎨 6種類の体験テンプレート - ライトペインティング、モデルのショーケース、ポータル、フェイスフィルター
• 💻 コード生成 - カスタム JavaScript コンポーネントを生成します
• 🧩 カスタムコンポーネント - A-Frame コンポーネントを追加、管理します
• 🔍 統合アセット検索 - PolyHaven のアセットをおすすめ情報付きで検索します
• 🎯 スマートなオーケストレーション - リクエストを分析し、ツールを自動的に連鎖させます

🎯 機能

🛠️ 高度な AR 開発向けの66以上のツール

🤖 AI を活用した作成（新機能！）

• スマートなオーケストレーション - create_ar_experience - 説明文から完全な AR 体験を構築します
• パターン認識 - AR 体験の種類（フェイストラッキング、画像ターゲットなど）を自動的に識別します
• コード生成 - 自然言語からカスタム JavaScript を生成します
• 体験テンプレート - 6種類の組み込みテンプレート（ライトペインティング、ポータル、フェイスフィルターなど）

🧩 カスタム開発（新機能！）

• カスタムコンポーネント - A-Frame コンポーネントを追加、管理します
• アセット検索 - スマートなおすすめ情報付きで PolyHaven を検索します
• コードテンプレート - 組み込みのパーティクルシステム、ジェスチャーハンドラー、オーディオコントローラー
• JavaScript 検証 - デプロイ前にコードのエラーを確認します

🎨 シーン構築

• デスクトップでのシーン構築 - 形状、モデル、ライト、アニメーションを追加します
• AR 機能 - 画像ターゲット、フェイストラッキング、ワールドトラッキング
• アニメーションシステム - 回転、スケール、モデルのアニメーション
• 物理演算 - オブジェクトに物理演算を追加します（動力学、質量、重力）

📦 アセットとプロジェクトの管理

• アセット管理 - PolyHaven の検索、モデルのダウンロード、ファイルの管理
• プロジェクトツール - 8th Wall Desktop プロジェクトの作成、編集、管理
• 開発サーバー - テスト用の組み込みプレビューサーバー

🎨 自然言語によるシーン構築

"Create a spinning red cube with a metallic sphere orbiting around it"
"Add a beach ball with physics that falls when the scene starts"
"Create an AR portal using hider materials"
"Add an image target experience with a video"

🔧 3つの操作モード

1. ローカルモード（デフォルト） - 8th Wall Desktop プロジェクトをローカルで操作します
2. ドキュメントモード - 8th Wall のドキュメントにアクセスします
3. API モード - 8th Wall Cloud と連携します（API キーが必要です）

---

📦 インストール

オプション1：ワンクリックインストール（推奨）

1. mcp-8thwall-0.1.0.mcpb ファイルをダウンロードします
2. ダブルクリックして Claude Desktop で開きます
3. プロンプトが表示されたらインストールをクリックします
4. 完了です！ 47個すべてのツールを利用できるようになります

オプション2：手動インストール

1. リポジトリをクローンします：

   git clone https://github.com/superdwayne/8thwallmcp.git
   cd mcp-8thwall
   

2. 依存関係をインストールします：

   npm install
   

3. ビルドします：

   npm run build
   

4. Claude Desktop の設定に追加します（~/.claude/claude_desktop_config.json）：

{
  "mcpServers": {
       "mcp-8thwall": {
      "command": "node",
      "args": [
        "/absolute/path/to/mcp-8thwall/dist/index.js"
      ]
    }
  }
}

5. Claude Desktop を再起動します

---

🎮 クイックスタート

最初の AR シーンを作成する

1. プロジェクトを設定します：

   "Set my project to my-ar-project"
   

2. 3D コンテンツを追加します：

   "Create a red spinning cube at position (0, 1, -2)"
   

3. アニメーションを追加します：

   "Make the cube pulse between 80% and 120% size"
   

4. AR 機能を追加します：

   "Enable face tracking with a debug mesh"
   

8th Wall Desktop を操作する

"List all my 8th Wall Desktop projects"
"Set project to beach-scene"
"Add a seagull GLB model from assets at position (0, 2, 0)"
"Add physics to the beach ball"
"Make the rocket orbit the planet"

アセットを検索する

"Search PolyHaven for space textures"
"Download the damaged helmet GLB"
"Add the downloaded model at position (0, 1.5, -3)"

---

🔧 デスクトップシーン構築ツール

プリミティブとシェイプ

• desktop_add_shape - 3D プリミティブを追加します：
  • ジオメトリ：box、sphere、cylinder、cone、plane、circle、torus、ring
  • マテリアル：basic、standard、phong
  • プロパティ：color、roughness、metalness、opacity、emissive
  • 隠蔽用マテリアル：colorWrite、depthWrite、depthTest（AR ポータル用）

3D モデル

• desktop_add_model - GLB/GLTF モデルを追加します：
  • assets/ フォルダーから読み込みます
  • 位置、回転、スケール
  • アニメーション再生
  • 物理演算に対応（static、dynamic、kinematic）

アニメーション

• desktop_add_rotation_animation - オブジェクトを回転させます：

  • 軸の選択（X、Y、Z）
  • 速度の制御
  • ループと逆再生のオプション
  • イージング関数

• desktop_add_scale_animation - 脈動・呼吸のエフェクトを追加します：

  • 最小／最大スケール
  • 再生時間の制御
  • ループと逆再生
  • イージング関数

• desktop_set_model_animation - モデルのアニメーションを制御します：

  • 特定のアニメーションクリップを再生します
  • ループの制御
  • 再生速度

AR 機能

• desktop_enable_face_tracking - 顔を使った AR 体験
• desktop_add_image_target - 画像トラッキング
• desktop_add_video - 動画テクスチャ
• AR ポータル用の隠蔽マテリアル

---

📚 ドキュメント

ツールのカテゴリ

プロジェクト管理（12 ツール）

• project_get_root / project_set_root - プロジェクトディレクトリを管理します
• desktop_list_projects / desktop_set_project - 8th Wall Desktop プロジェクト
• project_get_info - プロジェクトの構成を取得します
• project_list_files - ファイルを一覧表示します
• project_read_file / project_write_file - ファイル操作
• project_delete_file / project_move_file - ファイル管理
• project_scaffold - 新しいプロジェクトを作成します
• project_export_zip - アップロード用にエクスポートします

シーン構築（13 ツール）

• desktop_add_shape - プリミティブ（box、sphere など）
• desktop_add_model - GLB/GLTF モデル
• desktop_add_rotation_animation - オブジェクトを回転させます
• desktop_add_scale_animation - 脈動エフェクト
• desktop_add_image_target - 画像トラッキング
• desktop_add_video - 動画テクスチャ
• desktop_enable_face_tracking - フェイス AR
• desktop_set_model_animation - モデルアニメーション
• desktop_read_json / desktop_write_json / desktop_patch_json - JSON の操作
• desktop_guess_scene - シーンファイルを検索します

アセット管理（8 ツール）

• assets_status - PolyHaven が利用可能か確認します
• assets_search_polyhaven - アセットを検索します
• assets_polyhaven_categories - カテゴリを閲覧します
• assets_polyhaven_files - アセットのメタデータを取得します
• assets_download_url - ファイルをダウンロードします
• assets_unzip - アーカイブを展開します
• prompts_asset_strategy - アセットに関するガイダンス

開発ツール（3 ツール）

• devserver_start / devserver_stop - ローカルプレビュー
• health_ping - ヘルスチェック

Web シーンツール（11 ツール）

A-Frame および Three.js プロジェクト向け：

• scene_detect_engine - A-Frame または Three.js を検出します
• scene_add_gltf_model - モデルを追加します
• scene_set_background_color - 背景
• scene_add_primitive - プリミティブ
• scene_add_light - ライティング
• scene_set_environment_hdr - HDR 環境
• scene_add_animation - アニメーション
• scene_add_textured_plane - 画像プレーン
• scene_add_orbit_controls - Three.js コントロール
• scene_add_grid_helper / scene_add_floor - ヘルパー

ドキュメント（2 ツール）

• docs_get_page - ドキュメントを取得します
• docs_search - ドキュメントを検索します

---

🐛 既知の問題と修正

✅ v0.1.0 で修正済み

• ジオメトリプロパティのエラー - シリンダーとコーンに不足していた heightSegments および openEnded プロパティを修正しました
• 色のレンダリングの問題 - 色を確実にレンダリングできるよう、マテリアルで standard ではなく basic タイプを使用するようになりました
• サーバーのクラッシュ - 適切なキープアライブ間隔を設定し、プロセスのライフサイクル管理を修正しました

現在の制限事項

• MCPB の自動インストールには、Claude Desktop の再起動が必要な場合があります
• デスクトップモードでは、画像ターゲットのカメラプレビューが黒く表示されます（スマートフォンでテストしてください）
• 一部のプラットフォームでは、動画の自動再生にユーザー操作が必要な場合があります

---

🏗️ プロジェクト構成

mcp-8thwall/
├── src/
│   ├── index.ts              # Server entry point
│   ├── tools/
│   │   ├── desktop.ts        # 8th Wall Desktop tools
│   │   ├── scene.ts          # Web scene tools
│   │   ├── project.ts        # Project management
│   │   ├── assets.ts         # Asset tools
│   │   ├── devserver.ts      # Dev server
│   │   └── docs.ts           # Documentation tools
│   ├── clients/
│   │   └── 8thwallClient.ts  # API client
│   └── utils/
│       └── projectRoot.ts    # Project root management
├── dist/                     # Compiled JavaScript
├── manifest.json             # MCPB manifest
├── mcp-8thwall-0.1.0.mcpb   # Desktop Extension package
└── README.md                 # This file

---

🚀 高度な使用方法

環境変数

{
  "mcpServers": {
    "mcp-8thwall": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "MODE": "local",
        "PROJECT_ROOT": "/path/to/your/project",
        "EIGHTHWALL_DESKTOP_ROOT": "~/Documents/8th Wall"
      }
    }
  }
}

利用可能なモード：

• local（デフォルト） - ローカルの8th Wall Desktopプロジェクトを操作します
• docs - 8th Wallのドキュメントにアクセスします
• api - 8th Wall Cloud APIと連携します

n8n用HTTPブリッジ

HTTPブリッジを実行して、n8nやその他の自動化プラットフォームからツールを呼び出します：

HTTP_PORT=8787 MODE=local PROJECT_ROOT=./project npm run http

APIエンドポイント：

• GET http://localhost:8787/tools - すべてのツールを一覧表示します
• POST http://localhost:8787/tool/<toolName> - ツールを呼び出します

開発

npm run dev          # Run with ts-node
npm run build        # Compile TypeScript
npm run typecheck    # Type checking only
npm run pack:dxt     # Create MCPB package

---

📖 使用例

ARビーチシーンを作成する

1. "Set project to beach-scene"
2. "Add a blue sphere for the sky at (0, 50, 0) with radius 100"
3. "Add a sandy plane as the ground at (0, 0, 0)"
4. "Download a seagull GLB and add it flying at (2, 5, -10)"
5. "Make the seagull rotate slowly on the Y axis"
6. "Add a beach ball with physics at (0, 2, -3)"

ARポータルを作成する

1. "Set project to portal-demo"
2. "Create a portal using hider materials"
3. "Add a rotating torus as the portal ring"
4. "Add a blue emissive sphere as the portal glow"
5. "Make the glow pulse between 80% and 120%"

画像ターゲット体験

1. "Set project to image-target-demo"
2. "Add an image target for 'poster.jpg'"
3. "Add a video plane with 'promo-video.mp4'"
4. "Add a GLB model that appears on the image"
5. "Make the model spin on the Y axis"

---

🤝 コントリビューション

コントリビューションを歓迎します！以下をご覧ください：

• コントリビューションのガイドラインはCONTRIBUTING.mdを参照してください
• 行動規範についてはCODE_OF_CONDUCT.mdを参照してください
• セキュリティに関する報告はSECURITY.mdを参照してください

開発ワークフロー

1. リポジトリをフォークします
2. フィーチャーブランチを作成します
3. 変更を加えます
4. 該当する場合はテストを追加します
5. npm run typecheckを実行します
6. プルリクエストを送信します

---

📄 ライセンス

MITライセンス - 詳細はLICENSEをご覧ください

---

🔗 リンク

• 8th Wall Desktop：8thwall.com/desktop
• Model Context Protocol：modelcontextprotocol.io
• Claude Desktop：claude.ai
• PolyHavenのアセット：polyhaven.com
• GitHubのIssue：バグを報告

---

💡 ヒント

• desktop_list_projectsを使って、8th Wall Desktopのプロジェクトを確認します
• PolyHavenで無料の3Dアセット、テクスチャ、HDRIを検索します
• カメラプレビューを確認するには、スマートフォンでAR機能をテストします
• ARポータル効果には、非表示マテリアル（colorWrite: false）を使用します
• 動的オブジェクトでは物理演算を有効にします
• アニメーションを使ってシーンに動きを加えます

---

🙏 謝辞

• 素晴らしいWebARプラットフォームを提供してくれた8th Wall
• ClaudeとMCPプロトコルを提供してくれたAnthropic
• 無料の3Dアセットを提供してくれたPolyHaven
• ツールと着想を提供してくれたMCPコミュニティ

---

Dwayne Paisley-Marshallが❤️を込めて開発