いつもの素材を、
ブラウザの3Dシーンへ。

1. ブラウザだけで試す

1. Basicデモを開き、「準備完了」と表示されるまで待ちます。
2. 「サンプルを配置」で試すか、右下の🍫を開き「Import」で画像・動画・GLBを選びます。
3. 選んだ素材は自動で配置されます。ドラッグで視点を動かして確認できます。

カムイコード、アカウント、APIキー、ローカルサーバーは不要です。手動で選んだファイルはブラウザ内で読み込みます。Three.jsの読み込みにはインターネット接続、描画にはWebGLが必要です。

画像はPNG/JPEG、動画はMP4、3Dは素材が1ファイルに収まるGLBから始めるとスムーズです。動画の再生可否はブラウザの対応コーデックによります。配置内容は再読み込みでリセットされます。

2. 自分のPCで動かす

Node.js 22 LTSとnpmを用意し、ターミナルで実行します。既に取得済みなら、そのプロジェクトで続けてください。

git clone https://github.com/nyukicorn/chocodrop.git
cd chocodrop
npm ci
npm run build
npm run local -- --assets-dir /absolute/path/to/your/assets

表示されたURLをブラウザで開きます。URLのポートは自動で選ばれます。終了するときはターミナルでCtrl+Cを押してください。

--assets-dirには、ツールから配置してよい素材だけを入れたフォルダを指定します。カムイコードや1Passwordの設定は不要です。

3. Codex・Claude Codeから配置する

上の取得・インストール・ビルドまで済ませ、使うツールにChocoDropを登録します。パスはご自分の環境の絶対パスに置き換えてください。空白を含むパスは引用符で囲みます。

Codex

codex mcp add chocodrop -- node /absolute/path/to/chocodrop/scripts/chocodrop-mcp.mjs --assets-dir /absolute/path/to/your/assets
codex mcp get chocodrop

ユーザー設定に追加されます。既に開いている会話にツールが現れない場合は、アプリを再起動し、新しい会話で確認してください。

Claude Code

ChocoDropを使いたいプロジェクトのディレクトリで実行します。

claude mcp add --transport stdio --scope local chocodrop -- node /absolute/path/to/chocodrop/scripts/chocodrop-mcp.mjs --assets-dir /absolute/path/to/your/assets
claude mcp get chocodrop

そのプロジェクトだけの個人設定として追加されます。Claude Codeを起動し、/mcpで接続を確認します。

nodeが見つからない場合はNode実行ファイルの絶対パスを指定してください。

登録後の使い方

1. CodexまたはClaude CodeでChocoDropのget_statusを呼び、返されたbrowserUrlを開きます。
2. デモに「ツール連携中」と表示されたら準備完了です。
3. 「ChocoDropのimport_assetで、素材フォルダ内のsample.pngを配置して」と依頼します。

呼び出し例：import_asset({"path":"/absolute/path/to/your/assets/sample.png"})。ブラウザで配置が完了してから成功を返します。

Codex・Claude CodeがMCPプロセスを起動するため、npm run localの同時起動は不要です。MCPからはPNG/JPEG/WebP/MP4/WebM/GLBに対応し、1ファイル32MiBまでです。接続するデモは1タブにしてください。クラウド上のAIから利用者のPCへ直接接続する機能はありません。

公式資料：CodexのMCP設定 · Claude CodeのMCP設定

できることと、今後の範囲

GitHub Pagesでは手動のファイル配置、ローカル起動ではMCPによるファイル配置を使います。ChocoDropの内部から生成サービスを呼ぶ旧連携とは別の入口です。新しい入口は生成サービスを呼び出しません。

Quest実機、全ギャラリー、既存の生成サービスごとの動作確認は別途必要です。まずBasicデモで素材を置くところからお試しください。