写真、動画、3Dモデル。自分で作ったものも、普段使っているAI・MCP・CLIで作ったものも、ファイルとして使えます。
まずはデモを開く →アカウント、APIキー、ローカルサーバーは不要です。手動で選んだファイルはブラウザ内で読み込みます。Three.jsの読み込みにはインターネット接続、描画にはWebGLが必要です。
画像はPNG/JPEG、動画はMP4、3Dは素材が1ファイルに収まるGLBから始めるとスムーズです。動画の再生可否はブラウザの対応コーデックによります。配置内容は再読み込みでリセットされます。
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には、ツールから配置してよい素材だけを入れたフォルダを指定します。生成サービスや外部の認証情報は不要です。
GitHubをcloneせずに試す場合は、ローカルdaemonを起動し、ブックマークレットを登録します。
pnpm dlx @chocodrop/daemon@1.0.4-alpha.1ブックマークレット登録ページからボタンをブックマークバーへドラッグし、対応するThree.jsページで押します。
素材配置まで利用できるのは、ページのscene・camera・rendererを参照でき、ローカルスクリプトの読込が許可されている場合です。任意の3Dサイトで必ず動く機能ではありません。
Node.js 22 LTSとnpmを用意し、次の1コマンドを実行します。インストール済みのCLIと登録内容を表示し、確認後にChocoDrop MCPをユーザー設定へ追加します。GitHubのcloneは不要です。
pnpm dlx @chocodrop/setup@0.1.0-alpha.1~/ChocoDropAssetsが素材フォルダとして作成されます。特定のCLIだけに登録する場合は、たとえば--client codex,claudeを付けます。変更せず内容だけ確認する場合は--dry-runを付けます。
ChocoDropのMCPは素材を生成しません。普段使っている生成MCPやCLIで画像・動画・GLBを素材フォルダへ保存し、そのファイルをChocoDropで配置します。
get_statusを呼び、返されたbrowserUrlを開きます。呼び出し例：import_asset({"path":"/absolute/path/to/your/assets/sample.png"})。ブラウザで配置が完了してから成功を返します。
各ツールがMCPプロセスを起動するため、npm run localの同時起動は不要です。MCPからはPNG/JPEG/WebP/MP4/WebM/GLBに対応し、1ファイル32MiBまでです。接続するデモは1タブにしてください。クラウド上のAIから利用者のPCへ直接接続する機能はありません。手動登録はローカルMCPガイドにあります。
pnpmがない環境ではnpx --yes @chocodrop/setup@0.1.0-alpha.1も使用できます。
GitHub Pagesでは手動のファイル配置、ローカル起動ではMCPによるファイル配置を使います。ChocoDrop自体は素材を生成せず、手元にあるファイルを3D空間へ配置します。
Quest実機と全ギャラリーの動作確認は別途必要です。まずBasicデモで素材を置くところからお試しください。
Basicデモに戻る →