@chocodrop/mcp 0.1.0-alpha.0 → 0.1.0-alpha.1

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 (9) hide show
  1. package/README.md +1 -1
  2. package/package.json +4 -5
  3. package/runtime/site/examples/sdk-test/README.md +16 -59
  4. package/runtime/site/examples/sdk-test/index.html +93 -0
  5. package/runtime/site/getting-started.html +6 -6
  6. package/runtime/site/public/CommandUI.js +4 -4
  7. package/runtime/site/public/bookmarklet.js +1 -1
  8. package/runtime/site/public/chocodrop-demo.umd.js +23 -24
  9. package/runtime/site/public/chocodrop-demo.umd.min.js +23 -24
package/README.md CHANGED
@@ -5,7 +5,7 @@ Codex、Claude Code、AntigravityなどのMCPクライアントから、許可
5
5
  このMCPは素材を生成しません。普段使っている生成MCPやCLIでファイルを作り、素材フォルダへ保存してから配置します。
6
6
 
7
7
  ```bash
8
- pnpm dlx @chocodrop/mcp@0.1.0-alpha.0 --assets-dir "$HOME/ChocoDropAssets"
8
+ pnpm dlx @chocodrop/mcp@0.1.0-alpha.1 --assets-dir "$HOME/ChocoDropAssets"
9
9
  ```
10
10
 
11
11
  通常は [`@chocodrop/setup`](https://www.npmjs.com/package/@chocodrop/setup) で利用中のCLIへ登録してください。
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chocodrop/mcp",
3
- "version": "0.1.0-alpha.0",
3
+ "version": "0.1.0-alpha.1",
4
4
  "description": "Place local images, videos, and GLB files into a ChocoDrop browser scene through MCP.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -24,8 +24,7 @@
24
24
  "antigravity"
25
25
  ],
26
26
  "author": {
27
- "name": "ChocoDrop Project",
28
- "email": "chocodrop.dev@gmail.com"
27
+ "name": "ChocoDrop Project"
29
28
  },
30
29
  "license": "MIT",
31
30
  "publishConfig": {
@@ -36,7 +35,7 @@
36
35
  "node": ">=18.0.0"
37
36
  },
38
37
  "dependencies": {
39
- "@modelcontextprotocol/sdk": "^1.17.5",
40
- "ws": "^8.18.3"
38
+ "@modelcontextprotocol/sdk": "^1.30.0",
39
+ "ws": "^8.21.3"
41
40
  }
42
41
  }
package/runtime/site/examples/sdk-test/README.md CHANGED
@@ -1,70 +1,27 @@
1
- # ChocoDrop SDK Test Page
1
+ # ChocoDrop SDK版テストページ
2
2
 
3
- このページは **SDK版（完全版）** の動作確認用です。
3
+ `CommandUI.js`を使うSDK版の確認ページです。右下のチョコから、生成済みの画像・動画・GLBをImportできます。外部の生成サービスは必須ではありません。
4
4
 
5
- ## 📦 SDK版 vs デモ版
5
+ ## 起動
6
6
 
7
- | 項目 | SDK版 (このページ) | デモ版 (basic/) |
8
- |------|-------------------|----------------|
9
- | ファイル | `CommandUI.js` | `CommandUIDemo.js` |
10
- | 生成機能 | ✅ あり | ❌ なし（インポートのみ） |
11
- | サーバー | 必要（localhost:3011） | 不要 |
12
- | 用途 | 開発・npm配布 | GitHub Pages配布 |
13
-
14
- ## 🚀 使い方
15
-
16
- ### 1. サーバーを起動
7
+ プロジェクトルートで、2つのターミナルを使います。
17
8
 
18
9
  ```bash
19
- # プロジェクトルートで実行
20
- npm run dev:sdk
21
- ```
22
-
23
- これで以下が起動します：
24
- - SDK Test Page: http://localhost:8080/
25
- - SDK Server: http://localhost:3011/
26
-
27
- ### 2. ブラウザで開く
28
-
29
- http://localhost:8080/ にアクセス
30
-
31
- ### 3. ChocoDrop を起動
32
-
33
- - `@` キーを押す
34
- - または右下のボタンをクリック
35
-
36
- ### 4. 画像生成をテスト
10
+ # ターミナル1
11
+ node src/server/server.js --port 3011
37
12
 
38
- 自然言語で画像生成のリクエストを送信してテストします。
39
-
40
- ## 🔧 開発時の注意
41
-
42
- ### ソースコードを修正したら必ずビルド
43
-
44
- ```bash
45
- npm run build
13
+ # ターミナル2
14
+ python3 -m http.server 8080 --directory examples/sdk-test
46
15
  ```
47
16
 
48
- ビルドしないと変更が反映されません！
49
-
50
- ### テストする順序
51
-
52
- 1. `src/client/CommandUI.js` を修正
53
- 2. `npm run build` でビルド
54
- 3. `npm run dev:sdk` でサーバー起動
55
- 4. http://localhost:8080/ でテスト
56
-
57
- ## ⚠️ トラブルシューティング
58
-
59
- **UIが更新されない**
60
- → ブラウザのキャッシュをクリア（Cmd+Shift+R）
61
-
62
- **生成機能が動かない**
63
- → SDK Serverが起動しているか確認（http://localhost:3011/health）
17
+ ブラウザで <http://localhost:8080/> を開き、「SDK版の準備完了」と右下のチョコが表示されることを確認します。
64
18
 
65
- **ポートが使われている**
66
- → 他のプロセスを終了してから再起動
19
+ ## デモ版との違い
67
20
 
68
- ---
21
+ | 項目 | SDK版 | デモ版 |
22
+ | --- | --- | --- |
23
+ | UI | `src/client/CommandUI.js` | `src/client/demo/CommandUIDemo.js` |
24
+ | 主な用途 | 自分のThree.jsシーンへの組み込み | GitHub Pages上の体験 |
25
+ | ローカルサーバー | 使用 | 手動Importだけなら不要 |
69
26
 
70
- 詳細は `.claude/commands/edit-chocodrop-form.md` を参照してください。
27
+ フォームUIを変更した場合は、SDK版と `http://localhost:8000/examples/basic/` のデモ版を両方確認します。
package/runtime/site/examples/sdk-test/index.html ADDED
@@ -0,0 +1,93 @@
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 SDK版テスト</title>
7
+ <script type="importmap">
8
+ {
9
+ "imports": {
10
+ "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
11
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
12
+ }
13
+ }
14
+ </script>
15
+ <style>
16
+ html, body { margin: 0; height: 100%; overflow: hidden; background: #17131f; color: #fff8ff; font-family: system-ui, sans-serif; }
17
+ canvas { display: block; }
18
+ #status { position: fixed; top: 18px; left: 18px; z-index: 10; max-width: 360px; padding: 13px 17px; border: 1px solid #ffffff2e; border-radius: 14px; background: #21182dde; backdrop-filter: blur(12px); font-size: 13px; line-height: 1.7; }
19
+ #status strong { display: block; color: #d9a8ff; }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <p id="status" role="status"><strong>SDK版を準備しています…</strong>右下のチョコから、生成済みの画像・動画・GLBをImportできます。</p>
24
+ <script type="module">
25
+ import * as THREE from 'three';
26
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
27
+ import { createChocoDrop } from './src/client/bootstrap.js';
28
+
29
+ const scene = new THREE.Scene();
30
+ scene.background = new THREE.Color(0x17131f);
31
+
32
+ const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 0.1, 100);
33
+ camera.position.set(6, 4, 8);
34
+
35
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
36
+ renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
37
+ renderer.setSize(innerWidth, innerHeight);
38
+ renderer.shadowMap.enabled = true;
39
+ document.body.append(renderer.domElement);
40
+
41
+ scene.add(new THREE.HemisphereLight(0xf4dfff, 0x302840, 2.2));
42
+ const light = new THREE.DirectionalLight(0xffd8f1, 2.5);
43
+ light.position.set(4, 8, 5);
44
+ light.castShadow = true;
45
+ scene.add(light);
46
+
47
+ const world = new THREE.Group();
48
+ const colors = [0xd9a8ff, 0xf19dba, 0x9fded4, 0xf6d883];
49
+ for (let i = 0; i < 12; i += 1) {
50
+ const mesh = new THREE.Mesh(
51
+ new THREE.BoxGeometry(0.75, 0.75 + (i % 3) * 0.28, 0.75),
52
+ new THREE.MeshStandardMaterial({ color: colors[i % colors.length], roughness: 0.55 })
53
+ );
54
+ mesh.position.set((i % 4) * 1.25 - 1.9, mesh.geometry.parameters.height / 2, Math.floor(i / 4) * 1.25 - 1.3);
55
+ mesh.castShadow = true;
56
+ world.add(mesh);
57
+ }
58
+ scene.add(world);
59
+
60
+ const floor = new THREE.Mesh(
61
+ new THREE.CircleGeometry(6, 64),
62
+ new THREE.MeshStandardMaterial({ color: 0x40364c, roughness: 0.9 })
63
+ );
64
+ floor.rotation.x = -Math.PI / 2;
65
+ floor.receiveShadow = true;
66
+ scene.add(floor);
67
+
68
+ const controls = new OrbitControls(camera, renderer.domElement);
69
+ controls.enableDamping = true;
70
+
71
+ const integration = createChocoDrop(scene, {
72
+ camera,
73
+ renderer,
74
+ serverUrl: 'http://localhost:3011',
75
+ skipServiceDialog: true,
76
+ });
77
+ window.ChocoDrop = { ...integration, scene, camera, renderer };
78
+ document.getElementById('status').innerHTML = '<strong>SDK版の準備完了</strong>右下のチョコからImportを開けます。';
79
+
80
+ renderer.setAnimationLoop(() => {
81
+ controls.update();
82
+ world.rotation.y += 0.0015;
83
+ renderer.render(scene, camera);
84
+ });
85
+
86
+ addEventListener('resize', () => {
87
+ camera.aspect = innerWidth / innerHeight;
88
+ camera.updateProjectionMatrix();
89
+ renderer.setSize(innerWidth, innerHeight);
90
+ });
91
+ </script>
92
+ </body>
93
+ </html>
package/runtime/site/getting-started.html CHANGED
@@ -51,7 +51,7 @@ npm run local -- --assets-dir /absolute/path/to/your/assets</code></pre>
51
51
  <section aria-labelledby="bookmarklet">
52
52
  <h2 id="bookmarklet">3. ブックマークから既存ページで使う</h2>
53
53
  <p>GitHubをcloneせずに試す場合は、ローカルdaemonを起動し、ブックマークレットを登録します。</p>
54
- <pre><code>npx --yes @chocodrop/daemon@alpha</code></pre>
54
+ <pre><code>pnpm dlx @chocodrop/daemon@1.0.4-alpha.0</code></pre>
55
55
  <p><a href="examples/bookmarklet-v2.html">ブックマークレット登録ページ</a>からボタンをブックマークバーへドラッグし、対応するThree.jsページで押します。</p>
56
56
  <p class="muted">素材配置まで利用できるのは、ページの<code>scene</code>・<code>camera</code>・<code>renderer</code>を参照でき、ローカルスクリプトの読込が許可されている場合です。任意の3Dサイトで必ず動く機能ではありません。</p>
57
57
  </section>
@@ -59,7 +59,7 @@ npm run local -- --assets-dir /absolute/path/to/your/assets</code></pre>
59
59
  <section aria-labelledby="mcp">
60
60
  <h2 id="mcp">4. Codex・Claude Code・Antigravityから配置する</h2>
61
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>
62
+ <pre><code>pnpm dlx @chocodrop/setup@0.1.0-alpha.1</code></pre>
63
63
  <p><code>~/ChocoDropAssets</code>が素材フォルダとして作成されます。特定のCLIだけに登録する場合は、たとえば<code>--client codex,claude</code>を付けます。変更せず内容だけ確認する場合は<code>--dry-run</code>を付けます。</p>
64
64
  <p>ChocoDropのMCPは素材を生成しません。普段使っている生成MCPやCLIで画像・動画・GLBを素材フォルダへ保存し、そのファイルをChocoDropで配置します。</p>
65
65
  <h3>登録後の使い方</h3>
@@ -69,15 +69,15 @@ npm run local -- --assets-dir /absolute/path/to/your/assets</code></pre>
69
69
  <li>「ChocoDropのimport_assetで、素材フォルダ内のsample.pngを配置して」と依頼します。</li>
70
70
  </ol>
71
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>
72
+ <p class="muted">各ツールがMCPプロセスを起動するため、<code>npm run local</code>の同時起動は不要です。MCPからはPNG/JPEG/WebP/MP4/WebM/GLBに対応し、1ファイル32MiBまでです。接続するデモは1タブにしてください。クラウド上のAIから利用者のPCへ直接接続する機能はありません。手動登録は<a href="https://github.com/nyukicorn/chocodrop/blob/main/docs/LOCAL_TOOLS.md">ローカルMCPガイド</a>にあります。</p>
73
+ <p>pnpmがない環境では<code>npx --yes @chocodrop/setup@0.1.0-alpha.1</code>も使用できます。</p>
74
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
75
  </section>
76
76
 
77
77
  <section aria-labelledby="limits">
78
78
  <h2 id="limits">できることと、今後の範囲</h2>
79
- <p>GitHub Pagesでは手動のファイル配置、ローカル起動ではMCPによるファイル配置を使います。ChocoDropの内部から生成サービスを呼ぶ旧連携とは別の入口です。新しい入口は生成サービスを呼び出しません。</p>
80
- <p>Quest実機、全ギャラリー、既存の生成サービスごとの動作確認は別途必要です。まずBasicデモで素材を置くところからお試しください。</p>
79
+ <p>GitHub Pagesでは手動のファイル配置、ローカル起動ではMCPによるファイル配置を使います。ChocoDrop自体は素材を生成せず、手元にあるファイルを3D空間へ配置します。</p>
80
+ <p>Quest実機と全ギャラリーの動作確認は別途必要です。まずBasicデモで素材を置くところからお試しください。</p>
81
81
  <a href="examples/basic/">Basicデモに戻る →</a>
82
82
  </section>
83
83
  </body>
package/runtime/site/public/CommandUI.js CHANGED
@@ -794,7 +794,7 @@ export class CommandUI {
794
794
  this.setServiceButtonsEnabled(true);
795
795
  } catch (error) {
796
796
  console.error('❌ Failed to initialize service selector:', error);
797
- this.setServiceSelectorStatus('MCP設定が必要です。config.jsonでMCPサービスを設定してください。3000番以外のポートを使用している場合は、サーバーのCORS設定も確認してください。詳細はREADMEをご確認ください。', 'error');
797
+ this.setServiceSelectorStatus('外部の生成サービスを利用できません。生成済みの画像・動画・GLBはImportから配置できます。', 'info');
798
798
  this.toggleServiceRetryButton(true);
799
799
  this.setServiceButtonsEnabled(false);
800
800
  } finally {
@@ -3607,8 +3607,8 @@ export class CommandUI {
3607
3607
  this.serverHealthState.available = false;
3608
3608
  this.serverHealthState.lastError = error;
3609
3609
  this.showServerHealthModal(error);
3610
- this.showInputFeedback('サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
3611
- this.addOutput('📡 サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
3610
+ this.showInputFeedback('サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
3611
+ this.addOutput('📡 サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
3612
3612
  } else if (error?.code === 'MCP_CONFIG_MISSING') {
3613
3613
  this.showMcpConfigNotice(error);
3614
3614
  } else {
@@ -3805,7 +3805,7 @@ export class CommandUI {
3805
3805
  line-height: 1.6;
3806
3806
  font-size: 14px;
3807
3807
  `;
3808
- message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev` を実行し、サーバーが起動していることを確認してください。';
3808
+ message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev:server` を実行し、サーバーが起動していることを確認してください。';
3809
3809
 
3810
3810
  const detail = document.createElement('pre');
3811
3811
  detail.style.cssText = `
package/runtime/site/public/bookmarklet.js CHANGED
@@ -161,7 +161,7 @@ export function createBookmarklet(value = DEFAULT_BASE, runtimeValue = DEFAULT_R
161
161
  notice(
162
162
  'ローカルdaemonを起動してください',
163
163
  'ターミナルで起動した後、このブックマークをもう一度押してください。',
164
- 'npx --yes @chocodrop/daemon@alpha'
164
+ 'pnpm dlx @chocodrop/daemon@1.0.4-alpha.0'
165
165
  );
166
166
  return;
167
167
  }
package/runtime/site/public/chocodrop-demo.umd.js CHANGED
@@ -112,7 +112,7 @@
112
112
  */
113
113
  createConnectionError(context) {
114
114
  const serverInfo = this.serverUrl ? `（接続先: ${this.serverUrl}）` : '';
115
- const hint = 'ChocoDrop ローカルサーバー（Express）が起動しているか確認してください（例: `npm run dev`）。';
115
+ const hint = 'ChocoDrop ローカルサーバー（Express）が起動しているか確認してください（例: `npm run dev:server`）。';
116
116
  return new Error(`${context}\nサーバーへ接続できません。${hint}${serverInfo}`);
117
117
  }
118
118
 
@@ -8180,12 +8180,11 @@
8180
8180
  },
8181
8181
  {
8182
8182
  id: 'atmos-sculpt',
8183
- label: 'ビジュアル生成',
8183
+ label: 'AI素材を持ち込む',
8184
8184
  icon: { start: '#f472b6', end: '#facc15', rotation: 40, type: 'generate' },
8185
- description: '接続した生成サービスで新しいビジュアルやアニメーションを生み出します。壮大なシーンの起点に。',
8186
- prompt: '虹色のガラスで編んだユニコーンのドローンショットの動画を作って',
8187
- mode: 'generate',
8188
- mediaType: 'video'
8185
+ description: '普段使っているAIやCLIで作った画像・動画・GLBを持ち込み、世界の一部として配置します。',
8186
+ prompt: '中央に大きく飾って',
8187
+ mode: 'import'
8189
8188
  },
8190
8189
  {
8191
8190
  id: 'scene-capture',
@@ -8199,7 +8198,7 @@
8199
8198
 
8200
8199
  this.steps = [
8201
8200
  { id: 'persona', title: 'ChocoDropへようこそ', type: 'choice', icon: '💡', tagline: '作りたいムードを選ぶと、あなたの世界づくりが最短距離になります。' },
8202
- { id: 'service', title: 'サービス接続を整える', type: 'service', icon: '🔗', tagline: '生成サービスの接続状態をチェックして、滞りなく創作を進めましょう。' },
8201
+ { id: 'service', title: '素材の準備を確認する', type: 'service', icon: '🔗', tagline: '配置したいファイルを手元に用意して、Importから選びましょう。' },
8203
8202
  { id: 'prompt', title: '言葉で世界をデザイン', type: 'prompt', icon: '🖋️', tagline: 'フォームに光を当てながら、シーンを導く言葉を仕上げます。' },
8204
8203
  { id: 'execute', title: 'シーンを動かす', type: 'execute', icon: '🎬', tagline: '準備が整ったら再生。サウンドと光がシーンに息を吹き込みます。' },
8205
8204
  { id: 'next', title: '次のステップ', type: 'next', icon: '🌈', tagline: 'これからもっと遊ぶためのヒントとショートカットをご案内。' }
@@ -10122,10 +10121,10 @@
10122
10121
  meta.progressLabel = 'ムード選択';
10123
10122
  break;
10124
10123
  case 'service':
10125
- meta.title = 'サービス接続を整える';
10126
- meta.progressLabel = '接続チェック';
10124
+ meta.title = '素材の準備を確認する';
10125
+ meta.progressLabel = '素材チェック';
10127
10126
  if (personaId === 'atmos-sculpt') {
10128
- meta.tagline = '動画生成サービスがオンラインか確認しましょう。接続が完了するとステータスが緑になります。';
10127
+ meta.tagline = '普段のAIやCLIで作ったファイルを、Importから選びましょう。';
10129
10128
  }
10130
10129
  break;
10131
10130
  case 'prompt':
@@ -11469,7 +11468,7 @@
11469
11468
  this.setServiceButtonsEnabled(true);
11470
11469
  } catch (error) {
11471
11470
  console.error('❌ Failed to initialize service selector:', error);
11472
- this.setServiceSelectorStatus('サービス情報を取得できませんでした。サーバーが起動しているか確認のうえ、再読み込みしてください。', 'error');
11471
+ this.setServiceSelectorStatus('外部の生成サービスを利用できません。生成済みの画像・動画・GLBはImportから配置できます。', 'info');
11473
11472
  this.toggleServiceRetryButton(true);
11474
11473
  this.setServiceButtonsEnabled(false);
11475
11474
  } finally {
@@ -13408,8 +13407,8 @@
13408
13407
  this.serverHealthState.available = false;
13409
13408
  this.serverHealthState.lastError = error;
13410
13409
  this.showServerHealthModal(error);
13411
- this.showInputFeedback('サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
13412
- this.addOutput('📡 サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
13410
+ this.showInputFeedback('サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
13411
+ this.addOutput('📡 サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
13413
13412
  } else if (error?.code === 'MCP_CONFIG_MISSING') {
13414
13413
  this.showMcpConfigNotice(error);
13415
13414
  } else {
@@ -13589,7 +13588,7 @@
13589
13588
  line-height: 1.6;
13590
13589
  font-size: 14px;
13591
13590
  `;
13592
- message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev` を実行し、サーバーが起動していることを確認してください。';
13591
+ message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev:server` を実行し、サーバーが起動していることを確認してください。';
13593
13592
 
13594
13593
  const detail = document.createElement('pre');
13595
13594
  detail.style.cssText = `
@@ -13701,9 +13700,9 @@
13701
13700
  }
13702
13701
  this.mcpNoticeShown = true;
13703
13702
 
13704
- const message = error?.message || 'MCP 設定が見つかりません。config.json の設定を確認してください。';
13705
- const guidance = '⚙️ MCP 設定が必要です: docs/SETUP.md を参照し、config.json の mcp セクションまたは MCP_CONFIG_PATH 環境変数を設定してください。';
13706
- this.showInputFeedback('AI生成サーバー (MCP) が未設定です。設定が完了するまで生成を実行できません。', 'error');
13703
+ const message = error?.message || 'この生成操作に必要な外部サービスが設定されていません。';
13704
+ const guidance = '現在の公開手順ではChocoDrop内から素材を生成しません。画像・動画・GLBを用意し、Importから配置してください。';
13705
+ this.showInputFeedback('生成済みのファイルをImportから選んでください。', 'info');
13707
13706
  this.addOutput(`${guidance}\nサーバーからのメッセージ: ${message}`, 'error');
13708
13707
  }
13709
13708
 
@@ -18150,7 +18149,7 @@
18150
18149
  this.setServiceButtonsEnabled(true);
18151
18150
  } catch (error) {
18152
18151
  console.error('❌ Failed to initialize service selector:', error);
18153
- this.setServiceSelectorStatus('MCP設定が必要です。config.jsonでMCPサービスを設定してください。3000番以外のポートを使用している場合は、サーバーのCORS設定も確認してください。詳細はREADMEをご確認ください。', 'error');
18152
+ this.setServiceSelectorStatus('外部の生成サービスを利用できません。生成済みの画像・動画・GLBはImportから配置できます。', 'info');
18154
18153
  this.toggleServiceRetryButton(true);
18155
18154
  this.setServiceButtonsEnabled(false);
18156
18155
  } finally {
@@ -20998,8 +20997,8 @@
20998
20997
  this.serverHealthState.available = false;
20999
20998
  this.serverHealthState.lastError = error;
21000
20999
  this.showServerHealthModal(error);
21001
- this.showInputFeedback('サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
21002
- this.addOutput('📡 サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
21000
+ this.showInputFeedback('サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
21001
+ this.addOutput('📡 サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
21003
21002
  } else if (error?.code === 'MCP_CONFIG_MISSING') {
21004
21003
  this.showMcpConfigNotice(error);
21005
21004
  } else {
@@ -21196,7 +21195,7 @@
21196
21195
  line-height: 1.6;
21197
21196
  font-size: 14px;
21198
21197
  `;
21199
- message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev` を実行し、サーバーが起動していることを確認してください。';
21198
+ message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev:server` を実行し、サーバーが起動していることを確認してください。';
21200
21199
 
21201
21200
  const detail = document.createElement('pre');
21202
21201
  detail.style.cssText = `
@@ -21308,9 +21307,9 @@
21308
21307
  }
21309
21308
  this.mcpNoticeShown = true;
21310
21309
 
21311
- const message = error?.message || 'MCP 設定が見つかりません。config.json の設定を確認してください。';
21312
- const guidance = '⚙️ MCP 設定が必要です: docs/SETUP.md を参照し、config.json の mcp セクションまたは MCP_CONFIG_PATH 環境変数を設定してください。';
21313
- this.showInputFeedback('AI生成サーバー (MCP) が未設定です。設定が完了するまで生成を実行できません。', 'error');
21310
+ const message = error?.message || 'この生成操作に必要な外部サービスが設定されていません。';
21311
+ const guidance = '現在の公開手順ではChocoDrop内から素材を生成しません。画像・動画・GLBを用意し、Importから配置してください。';
21312
+ this.showInputFeedback('生成済みのファイルをImportから選んでください。', 'info');
21314
21313
  this.addOutput(`${guidance}\nサーバーからのメッセージ: ${message}`, 'error');
21315
21314
  }
21316
21315
 
package/runtime/site/public/chocodrop-demo.umd.min.js CHANGED
@@ -112,7 +112,7 @@
112
112
  */
113
113
  createConnectionError(context) {
114
114
  const serverInfo = this.serverUrl ? `（接続先: ${this.serverUrl}）` : '';
115
- const hint = 'ChocoDrop ローカルサーバー（Express）が起動しているか確認してください（例: `npm run dev`）。';
115
+ const hint = 'ChocoDrop ローカルサーバー（Express）が起動しているか確認してください（例: `npm run dev:server`）。';
116
116
  return new Error(`${context}\nサーバーへ接続できません。${hint}${serverInfo}`);
117
117
  }
118
118
 
@@ -8180,12 +8180,11 @@
8180
8180
  },
8181
8181
  {
8182
8182
  id: 'atmos-sculpt',
8183
- label: 'ビジュアル生成',
8183
+ label: 'AI素材を持ち込む',
8184
8184
  icon: { start: '#f472b6', end: '#facc15', rotation: 40, type: 'generate' },
8185
- description: '接続した生成サービスで新しいビジュアルやアニメーションを生み出します。壮大なシーンの起点に。',
8186
- prompt: '虹色のガラスで編んだユニコーンのドローンショットの動画を作って',
8187
- mode: 'generate',
8188
- mediaType: 'video'
8185
+ description: '普段使っているAIやCLIで作った画像・動画・GLBを持ち込み、世界の一部として配置します。',
8186
+ prompt: '中央に大きく飾って',
8187
+ mode: 'import'
8189
8188
  },
8190
8189
  {
8191
8190
  id: 'scene-capture',
@@ -8199,7 +8198,7 @@
8199
8198
 
8200
8199
  this.steps = [
8201
8200
  { id: 'persona', title: 'ChocoDropへようこそ', type: 'choice', icon: '💡', tagline: '作りたいムードを選ぶと、あなたの世界づくりが最短距離になります。' },
8202
- { id: 'service', title: 'サービス接続を整える', type: 'service', icon: '🔗', tagline: '生成サービスの接続状態をチェックして、滞りなく創作を進めましょう。' },
8201
+ { id: 'service', title: '素材の準備を確認する', type: 'service', icon: '🔗', tagline: '配置したいファイルを手元に用意して、Importから選びましょう。' },
8203
8202
  { id: 'prompt', title: '言葉で世界をデザイン', type: 'prompt', icon: '🖋️', tagline: 'フォームに光を当てながら、シーンを導く言葉を仕上げます。' },
8204
8203
  { id: 'execute', title: 'シーンを動かす', type: 'execute', icon: '🎬', tagline: '準備が整ったら再生。サウンドと光がシーンに息を吹き込みます。' },
8205
8204
  { id: 'next', title: '次のステップ', type: 'next', icon: '🌈', tagline: 'これからもっと遊ぶためのヒントとショートカットをご案内。' }
@@ -10122,10 +10121,10 @@
10122
10121
  meta.progressLabel = 'ムード選択';
10123
10122
  break;
10124
10123
  case 'service':
10125
- meta.title = 'サービス接続を整える';
10126
- meta.progressLabel = '接続チェック';
10124
+ meta.title = '素材の準備を確認する';
10125
+ meta.progressLabel = '素材チェック';
10127
10126
  if (personaId === 'atmos-sculpt') {
10128
- meta.tagline = '動画生成サービスがオンラインか確認しましょう。接続が完了するとステータスが緑になります。';
10127
+ meta.tagline = '普段のAIやCLIで作ったファイルを、Importから選びましょう。';
10129
10128
  }
10130
10129
  break;
10131
10130
  case 'prompt':
@@ -11469,7 +11468,7 @@
11469
11468
  this.setServiceButtonsEnabled(true);
11470
11469
  } catch (error) {
11471
11470
  console.error('❌ Failed to initialize service selector:', error);
11472
- this.setServiceSelectorStatus('サービス情報を取得できませんでした。サーバーが起動しているか確認のうえ、再読み込みしてください。', 'error');
11471
+ this.setServiceSelectorStatus('外部の生成サービスを利用できません。生成済みの画像・動画・GLBはImportから配置できます。', 'info');
11473
11472
  this.toggleServiceRetryButton(true);
11474
11473
  this.setServiceButtonsEnabled(false);
11475
11474
  } finally {
@@ -13408,8 +13407,8 @@
13408
13407
  this.serverHealthState.available = false;
13409
13408
  this.serverHealthState.lastError = error;
13410
13409
  this.showServerHealthModal(error);
13411
- this.showInputFeedback('サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
13412
- this.addOutput('📡 サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
13410
+ this.showInputFeedback('サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
13411
+ this.addOutput('📡 サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
13413
13412
  } else if (error?.code === 'MCP_CONFIG_MISSING') {
13414
13413
  this.showMcpConfigNotice(error);
13415
13414
  } else {
@@ -13589,7 +13588,7 @@
13589
13588
  line-height: 1.6;
13590
13589
  font-size: 14px;
13591
13590
  `;
13592
- message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev` を実行し、サーバーが起動していることを確認してください。';
13591
+ message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev:server` を実行し、サーバーが起動していることを確認してください。';
13593
13592
 
13594
13593
  const detail = document.createElement('pre');
13595
13594
  detail.style.cssText = `
@@ -13701,9 +13700,9 @@
13701
13700
  }
13702
13701
  this.mcpNoticeShown = true;
13703
13702
 
13704
- const message = error?.message || 'MCP 設定が見つかりません。config.json の設定を確認してください。';
13705
- const guidance = '⚙️ MCP 設定が必要です: docs/SETUP.md を参照し、config.json の mcp セクションまたは MCP_CONFIG_PATH 環境変数を設定してください。';
13706
- this.showInputFeedback('AI生成サーバー (MCP) が未設定です。設定が完了するまで生成を実行できません。', 'error');
13703
+ const message = error?.message || 'この生成操作に必要な外部サービスが設定されていません。';
13704
+ const guidance = '現在の公開手順ではChocoDrop内から素材を生成しません。画像・動画・GLBを用意し、Importから配置してください。';
13705
+ this.showInputFeedback('生成済みのファイルをImportから選んでください。', 'info');
13707
13706
  this.addOutput(`${guidance}\nサーバーからのメッセージ: ${message}`, 'error');
13708
13707
  }
13709
13708
 
@@ -18150,7 +18149,7 @@
18150
18149
  this.setServiceButtonsEnabled(true);
18151
18150
  } catch (error) {
18152
18151
  console.error('❌ Failed to initialize service selector:', error);
18153
- this.setServiceSelectorStatus('MCP設定が必要です。config.jsonでMCPサービスを設定してください。3000番以外のポートを使用している場合は、サーバーのCORS設定も確認してください。詳細はREADMEをご確認ください。', 'error');
18152
+ this.setServiceSelectorStatus('外部の生成サービスを利用できません。生成済みの画像・動画・GLBはImportから配置できます。', 'info');
18154
18153
  this.toggleServiceRetryButton(true);
18155
18154
  this.setServiceButtonsEnabled(false);
18156
18155
  } finally {
@@ -20998,8 +20997,8 @@
20998
20997
  this.serverHealthState.available = false;
20999
20998
  this.serverHealthState.lastError = error;
21000
20999
  this.showServerHealthModal(error);
21001
- this.showInputFeedback('サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
21002
- this.addOutput('📡 サーバーに接続できません。`npm run dev` でローカルサーバーを起動してください。', 'error');
21000
+ this.showInputFeedback('サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
21001
+ this.addOutput('📡 サーバーに接続できません。`npm run dev:server` でローカルサーバーを起動してください。', 'error');
21003
21002
  } else if (error?.code === 'MCP_CONFIG_MISSING') {
21004
21003
  this.showMcpConfigNotice(error);
21005
21004
  } else {
@@ -21196,7 +21195,7 @@
21196
21195
  line-height: 1.6;
21197
21196
  font-size: 14px;
21198
21197
  `;
21199
- message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev` を実行し、サーバーが起動していることを確認してください。';
21198
+ message.textContent = 'ローカルで起動している ChocoDrop サーバー（Express）に接続できません。ターミナルで `npm run dev:server` を実行し、サーバーが起動していることを確認してください。';
21200
21199
 
21201
21200
  const detail = document.createElement('pre');
21202
21201
  detail.style.cssText = `
@@ -21308,9 +21307,9 @@
21308
21307
  }
21309
21308
  this.mcpNoticeShown = true;
21310
21309
 
21311
- const message = error?.message || 'MCP 設定が見つかりません。config.json の設定を確認してください。';
21312
- const guidance = '⚙️ MCP 設定が必要です: docs/SETUP.md を参照し、config.json の mcp セクションまたは MCP_CONFIG_PATH 環境変数を設定してください。';
21313
- this.showInputFeedback('AI生成サーバー (MCP) が未設定です。設定が完了するまで生成を実行できません。', 'error');
21310
+ const message = error?.message || 'この生成操作に必要な外部サービスが設定されていません。';
21311
+ const guidance = '現在の公開手順ではChocoDrop内から素材を生成しません。画像・動画・GLBを用意し、Importから配置してください。';
21312
+ this.showInputFeedback('生成済みのファイルをImportから選んでください。', 'info');
21314
21313
  this.addOutput(`${guidance}\nサーバーからのメッセージ: ${message}`, 'error');
21315
21314
  }
21316
21315