8thwallmcp

🚀 8th Wall MCP Server

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

🚀 クイックスタート

最初の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)"

✨ 主な機能

🛠️ 高度な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 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"

📚 ドキュメント

ツールのカテゴリ

🔧 技術詳細

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

プリミティブと形状

• desktop_add_shape - 3Dプリミティブを追加します。
  • ジオメトリ: ボックス、球体、シリンダー、コーン、平面、円、トーラス、リング
  • マテリアル: 基本、標準、フォン
  • プロパティ: 色、粗さ、金属性、不透明度、エミッシブ
  • ハイダーマテリアル: colorWrite、depthWrite、depthTest (ARポータル用)

3Dモデル

• desktop_add_model - GLB/GLTFモデルを追加します。
  • assets/ フォルダから読み込みます。
  • 位置、回転、スケール
  • アニメーション再生
  • 物理サポート（静的、動的、キネマティック）

アニメーション

• 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ポータル用のハイダーマテリアル

プロジェクト構造

mcp-8thwall/
├── src/
│   ├── index.ts              # サーバーエントリポイント
│   ├── tools/
│   │   ├── desktop.ts        # 8th Wall Desktopツール
│   │   ├── scene.ts          # Webシーンツール
│   │   ├── project.ts        # プロジェクト管理
│   │   ├── assets.ts         # アセットツール
│   │   ├── devserver.ts      # 開発サーバー
│   │   └── docs.ts           # ドキュメントツール
│   ├── clients/
│   │   └── 8thwallClient.ts  # APIクライアント
│   └── utils/
│       └── projectRoot.ts    # プロジェクトルート管理
├── dist/                     # コンパイルされたJavaScript
├── manifest.json             # MCPBマニフェスト
├── mcp-8thwall-0.1.0.mcpb   # デスクトップ拡張パッケージ
└── README.md                 # このファイル

高度な使用法

環境変数

{
  "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ブリッジ

n8nまたは他の自動化プラットフォームからツールを呼び出すためにHTTPブリッジを実行します。

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          # ts-nodeで実行
npm run build        # TypeScriptをコンパイル
npm run typecheck    # 型チェックのみ
npm run pack:dxt     # MCPBパッケージを作成

🐛 既知の問題と修正

✅ v0.1.0で修正された問題

• ジオメトリプロパティエラー - シリンダーとコーンの heightSegments と openEnded プロパティの欠落を修正しました。
• 色のレンダリング問題 - 材料が standard ではなく basic タイプを使用するようになり、信頼性の高い色のレンダリングが可能になりました。
• サーバークラッシュ - 適切なキープアライブ間隔でプロセスのライフサイクル管理を修正しました。

現在の制限事項

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

🤝 コントリビューション

コントリビューションは大歓迎です！詳細は以下を参照してください。

• 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 Assets: polyhaven.com
• GitHub Issues: バグを報告する

💡 使用例

• desktop_list_projects を使用して、8th Wall Desktopプロジェクトを見つけます。
• PolyHavenで無料の3Dアセット、テクスチャ、およびHDRIを検索します。
• AR機能を携帯電話でテストして、カメラプレビューを確認します。
• ARポータルエフェクトにはハイダーマテリアル (colorWrite: false) を使用します。
• 動的なオブジェクトには物理シミュレーションを有効にします。
• アニメーションを使用して、シーンを生き生きとさせます。

🙏 謝辞

• 素晴らしいWebARプラットフォームを提供してくれた 8th Wall
• ClaudeとMCPプロトコルを提供してくれた Anthropic
• 無料の3Dアセットを提供してくれた PolyHaven
• ツールとインスピレーションを提供してくれた The MCP Community

Built with ❤️ by Dwayne Paisley - Marshall