@chocodrop/mcp 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +19 -0
  3. package/bin/chocodrop-mcp.js +13 -0
  4. package/package.json +42 -0
  5. package/runtime/.chocodrop-mcp-runtime +1 -0
  6. package/runtime/asset-bridge.js +460 -0
  7. package/runtime/mcp-server.js +107 -0
  8. package/runtime/site/examples/basic/README.md +38 -0
  9. package/runtime/site/examples/basic/index.html +1730 -0
  10. package/runtime/site/examples/bookmarklet-v2.html +141 -0
  11. package/runtime/site/examples/bookmarklet.html +126 -0
  12. package/runtime/site/examples/lofi-room/index.html +2570 -0
  13. package/runtime/site/examples/lofi-room/sandbox-lite.html +124 -0
  14. package/runtime/site/examples/music-garden/index.html +2150 -0
  15. package/runtime/site/examples/pixel-ocean/index.html +1780 -0
  16. package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx +338 -0
  17. package/runtime/site/examples/react-three-fiber/App.jsx +97 -0
  18. package/runtime/site/examples/react-three-fiber/README.md +294 -0
  19. package/runtime/site/examples/react-three-fiber/package.json +25 -0
  20. package/runtime/site/examples/sdk-test/README.md +70 -0
  21. package/runtime/site/examples/space/index.html +1975 -0
  22. package/runtime/site/examples/toy-city/index.html +2288 -0
  23. package/runtime/site/examples/wabi-sabi/index.html +2515 -0
  24. package/runtime/site/getting-started.html +84 -0
  25. package/runtime/site/index.html +1370 -0
  26. package/runtime/site/public/CommandUI.js +6341 -0
  27. package/runtime/site/public/LiveCommandClient.js +432 -0
  28. package/runtime/site/public/SceneManager.js +5493 -0
  29. package/runtime/site/public/bookmarklet.js +206 -0
  30. package/runtime/site/public/bootstrap.js +50 -0
  31. package/runtime/site/public/chocodrop-demo.umd.js +24020 -0
  32. package/runtime/site/public/chocodrop-demo.umd.min.js +24020 -0
  33. package/runtime/site/public/chocodrop.esm.js +2 -0
  34. package/runtime/site/public/html-sandbox/frame.js +865 -0
  35. package/runtime/site/public/icons/icon-192.png +0 -0
  36. package/runtime/site/public/icons/icon-512.png +0 -0
  37. package/runtime/site/public/icons/icon-maskable-512.png +0 -0
  38. package/runtime/site/public/immersive-launcher.js +175 -0
  39. package/runtime/site/public/immersive.html +165 -0
  40. package/runtime/site/public/index.html +1011 -0
  41. package/runtime/site/public/index.js +9 -0
  42. package/runtime/site/public/load-chocodrop.js +25 -0
  43. package/runtime/site/public/load-three.js +26 -0
  44. package/runtime/site/public/manifest.webmanifest +59 -0
  45. package/runtime/site/public/pwa-bootstrap.js +128 -0
  46. package/runtime/site/public/sample-card.svg +15 -0
  47. package/runtime/site/public/service-worker.js +117 -0
  48. package/runtime/site/public/translation-dictionary.js +257 -0
  49. package/runtime/site/public/xr/xr-ui.css +338 -0
  50. package/runtime/site/public/xr-viewer.html +263 -0
  51. package/runtime/site/src/client/local-bridge.js +83 -0
package/runtime/site/getting-started.html ADDED
@@ -0,0 +1,84 @@
1
+ <!doctype html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>はじめ方・ツール連携 | ChocoDrop</title>
7
+ <style>
8
+ :root { color-scheme: dark; font-family: system-ui, sans-serif; background: #211810; color: #fff8e7; }
9
+ body { max-width: 880px; margin: auto; padding: 28px 20px 60px; line-height: 1.85; }
10
+ a { color: #e3bffe; text-underline-offset: 4px; }
11
+ h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.35; }
12
+ h2 { font-size: 23px; line-height: 1.4; }
13
+ section { background: #30241d; border: 1px solid #69503a; border-radius: 20px; padding: 24px; margin-top: 28px; }
14
+ pre { overflow-x: auto; padding: 18px; background: #17120f; border-radius: 12px; line-height: 1.6; }
15
+ code { font-family: ui-monospace, monospace; }
16
+ .button { display: inline-block; background: #ead7b8; color: #302010; border-radius: 999px; padding: 10px 22px; font-weight: bold; text-decoration: none; }
17
+ .muted { color: #d3c1b0; }
18
+ li { margin: 8px 0; }
19
+ @media (max-width: 480px) { section { padding: 18px; } }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <nav><a href="index.html">🍫 ChocoDrop</a> / はじめ方</nav>
24
+ <h1>いつもの素材を、<br>ブラウザの3Dシーンへ。</h1>
25
+ <p>写真、動画、3Dモデル。自分で作ったものも、普段使っているAI・MCP・CLIで作ったものも、ファイルとして使えます。</p>
26
+ <a class="button" href="examples/basic/">まずはデモを開く →</a>
27
+
28
+ <section aria-labelledby="browser">
29
+ <h2 id="browser">1. ブラウザだけで試す</h2>
30
+ <ol>
31
+ <li>Basicデモを開き、「準備完了」と表示されるまで待ちます。</li>
32
+ <li>「サンプルを配置」で試すか、右下の🍫を開き「Import」で画像・動画・GLBを選びます。</li>
33
+ <li>選んだ素材は自動で配置されます。ドラッグで視点を動かして確認できます。</li>
34
+ </ol>
35
+ <p>アカウント、APIキー、ローカルサーバーは不要です。手動で選んだファイルはブラウザ内で読み込みます。Three.jsの読み込みにはインターネット接続、描画にはWebGLが必要です。</p>
36
+ <p class="muted">画像はPNG/JPEG、動画はMP4、3Dは素材が1ファイルに収まるGLBから始めるとスムーズです。動画の再生可否はブラウザの対応コーデックによります。配置内容は再読み込みでリセットされます。</p>
37
+ </section>
38
+
39
+ <section aria-labelledby="local">
40
+ <h2 id="local">2. 自分のPCで動かす</h2>
41
+ <p>Node.js 22 LTSとnpmを用意し、ターミナルで実行します。既に取得済みなら、そのプロジェクトで続けてください。</p>
42
+ <pre><code>git clone https://github.com/nyukicorn/chocodrop.git
43
+ cd chocodrop
44
+ npm ci
45
+ npm run build
46
+ npm run local -- --assets-dir /absolute/path/to/your/assets</code></pre>
47
+ <p>表示されたURLをブラウザで開きます。URLのポートは自動で選ばれます。終了するときはターミナルでCtrl+Cを押してください。</p>
48
+ <p><code>--assets-dir</code>には、ツールから配置してよい素材だけを入れたフォルダを指定します。生成サービスや外部の認証情報は不要です。</p>
49
+ </section>
50
+
51
+ <section aria-labelledby="bookmarklet">
52
+ <h2 id="bookmarklet">3. ブックマークから既存ページで使う</h2>
53
+ <p>GitHubをcloneせずに試す場合は、ローカルdaemonを起動し、ブックマークレットを登録します。</p>
54
+ <pre><code>npx --yes @chocodrop/daemon@alpha</code></pre>
55
+ <p><a href="examples/bookmarklet-v2.html">ブックマークレット登録ページ</a>からボタンをブックマークバーへドラッグし、対応するThree.jsページで押します。</p>
56
+ <p class="muted">素材配置まで利用できるのは、ページの<code>scene</code>・<code>camera</code>・<code>renderer</code>を参照でき、ローカルスクリプトの読込が許可されている場合です。任意の3Dサイトで必ず動く機能ではありません。</p>
57
+ </section>
58
+
59
+ <section aria-labelledby="mcp">
60
+ <h2 id="mcp">4. Codex・Claude Code・Antigravityから配置する</h2>
61
+ <p>Node.js 22 LTSとnpmを用意し、次の1コマンドを実行します。インストール済みのCLIと登録内容を表示し、確認後にChocoDrop MCPをユーザー設定へ追加します。GitHubのcloneは不要です。</p>
62
+ <pre><code>pnpm dlx @chocodrop/setup@0.1.0-alpha.0</code></pre>
63
+ <p><code>~/ChocoDropAssets</code>が素材フォルダとして作成されます。特定のCLIだけに登録する場合は、たとえば<code>--client codex,claude</code>を付けます。変更せず内容だけ確認する場合は<code>--dry-run</code>を付けます。</p>
64
+ <p>ChocoDropのMCPは素材を生成しません。普段使っている生成MCPやCLIで画像・動画・GLBを素材フォルダへ保存し、そのファイルをChocoDropで配置します。</p>
65
+ <h3>登録後の使い方</h3>
66
+ <ol>
67
+ <li>設定後にCLIを再起動し、ChocoDropの<code>get_status</code>を呼び、返された<code>browserUrl</code>を開きます。</li>
68
+ <li>デモに「ツール連携中」と表示されたら準備完了です。</li>
69
+ <li>「ChocoDropのimport_assetで、素材フォルダ内のsample.pngを配置して」と依頼します。</li>
70
+ </ol>
71
+ <p>呼び出し例：<code>import_asset({"path":"/absolute/path/to/your/assets/sample.png"})</code>。ブラウザで配置が完了してから成功を返します。</p>
72
+ <p class="muted">各ツールがMCPプロセスを起動するため、<code>npm run local</code>の同時起動は不要です。MCPからはPNG/JPEG/WebP/MP4/WebM/GLBに対応し、1ファイル32MiBまでです。接続するデモは1タブにしてください。クラウド上のAIから利用者のPCへ直接接続する機能はありません。手動登録は<a href="docs/LOCAL_TOOLS.md">ローカルMCPガイド</a>にあります。</p>
73
+ <p>pnpmがない環境では<code>npx --yes @chocodrop/setup@0.1.0-alpha.0</code>も使用できます。</p>
74
+ <p>公式資料：<a href="https://developers.openai.com/codex/mcp">CodexのMCP設定</a> · <a href="https://code.claude.com/docs/en/mcp">Claude CodeのMCP設定</a> · <a href="https://codelabs.developers.google.com/getting-started-google-antigravity">AntigravityのMCP設定</a></p>
75
+ </section>
76
+
77
+ <section aria-labelledby="limits">
78
+ <h2 id="limits">できることと、今後の範囲</h2>
79
+ <p>GitHub Pagesでは手動のファイル配置、ローカル起動ではMCPによるファイル配置を使います。ChocoDropの内部から生成サービスを呼ぶ旧連携とは別の入口です。新しい入口は生成サービスを呼び出しません。</p>
80
+ <p>Quest実機、全ギャラリー、既存の生成サービスごとの動作確認は別途必要です。まずBasicデモで素材を置くところからお試しください。</p>
81
+ <a href="examples/basic/">Basicデモに戻る →</a>
82
+ </section>
83
+ </body>
84
+ </html>