Modellix Agent Canvas

Modellix Agent Canvas

英語 · 简体中文

Modellix Agent Canvas は、ローカルのワークスペースに紐づく stdio MCP プラグインで、ビジュアル AI 作業に対応します。Excalidraw の無限キャンバス、Modellix による画像生成と編集、有料操作の確認、タスクの永続的な復旧、HTML の下書き、プレゼンテーション、プロジェクトごとのローカル保存を、1 つのワークスペースにまとめます。

Codex、Cursor、Claude Code、OpenCode、およびローカル stdio MCP を実装するその他のアプリケーションに対応しています。MCP Apps に対応するホストではキャンバス全体を埋め込めます。それ以外の互換ホストでは、同じ MCP サーバーを短時間だけ有効なループバックページ経由で使用できます。Canvas はローカルで動作するため、デプロイされた Canvas サービスは必要ありません。

製品紹介

以下のスクリーンショットは、実際のローカル Canvas セッションから取得したものです。再現可能な手順では、元のローカル画像 docs/images/demo/creative-studio.webp を使用するため、有料の画像タスクを作成する前に画像編集、HTML キャプチャ、プレゼンテーションを試せます。

以下の Lumen Creative Direction の一連の作業では、互いに関連のない例を並べるのではなく、連携する 7 つの機能を確認できます。

1. 実際のローカル画像を通常のキャンバスアセットとしてインポートします。
2. 選択範囲を、制御された画像編集の主要な参照画像にします。
3. 有料送信の前に、ルーティングされたモデル、実効仕様、数量、価格情報を確認します。
4. CSP で制限されたライブプレビューの横で HTML を編集し、レンダリング結果を Canvas にキャプチャします。
5. 同じビジュアルの方向性を、5 枚のスライドからなるプレゼンテーションで再利用します。
6. デッキを全画面表示で、すっきりとした順序で再生します。
7. ページを PNG／SVG としてエクスポートし、デッキを PNG シーケンスとしてエクスポートするか、プロジェクトをバックアップして復元します。

実際の画像ワークフロー

キャンバスに画像をドロップするか、生成済みの画像を選択して、変更したい内容だけを説明します。選択した画像が主要な参照画像になります。出力サイズ、枚数、背景、品質、追加の参照画像（指定順）は、準備の前に編集できます。

支出前にルートを確認する

prepare_modellix_image_task は無料です。別途確認を行う前に、実際のモデル、ルーティングの理由、指定された仕様と実効仕様、数量、利用可能な価格情報を表示します。このドキュメントでの実行では見積もりを取得できなかったため、有料送信は行っていません。予算が決まっている場合、見積もりがないタスクは確認しないでください。

安全な HTML の下書き

分離されたライブプレビューの横で HTML ソースを編集し、キャンバスにキャプチャするか、ソースを ZIP アーカイブとしてエクスポートします。

プレゼンテーションエディター

複数のレイアウトから編集可能なスライドデッキを作成し、ビジュアルアセットを通常のスライド要素にドロップして、順序を視覚的に管理します。プレゼンテーションを行うか、PNG シーケンスとしてエクスポートすることもできます。

全画面再生

同じ画像を中心としたスライドを、前へ／次へのコントロールと表示中のスライド枚数を備えた組み込みプレゼンターで再生できます。

エクスポートとプロジェクトのバックアップ

現在のページを 1×、2×、4× の PNG としてエクスポートしたり、SVG として保存したり、プレゼンテーションを PNG シーケンスとしてダウンロードしたり、プロジェクトのバックアップを作成して復元したりできます。

ウォークスルーを再現する

1. 以下のいずれかのホスト経由でプラグインをインストールし、実際のプロジェクトのワークスペースで開きます。
2. 同じ絶対ワークスペースパスを指定して、get_modellix_canvas_status と open_modellix_canvas を呼び出します。
3. creative-studio.webp をキャンバスにドロップして選択し、編集指示を入力します。
4. 16:9 · Landscape を選択して 編集を準備 をクリックし、返されたモデル、ルート、有効な仕様、数量、価格の明示を確認します。準備は無料です。
5. 明示された合計金額が予算内に収まる場合のみ確定します。そうでない場合は 編集に戻る を選択してください。このウォークスルーでは、有料の送信は必要ありません。
6. HTML を開いて、分離された下書きを保存し、スクリーンショットを作成 を選択して、レンダリング結果をキャンバスに挿入します。
7. プレゼンテーション を開いてスターターデッキを作成し、ビジュアルをスライドにドロップします。再生 または PNG シーケンス を使って仕上げます。

含まれる機能

• 無限キャンバス： テキスト、図形、線、矢印、フリーハンド描画、フレーム、画像、グループ化、ロック、レイヤー、配置、プロジェクトに保存される個人ライブラリ、操作単位の取り消しとやり直し。
• 複数ページのプロジェクト： ページごとに独立したビューポートと履歴を保持しながら、ページの作成、名前変更、複製、並べ替え、削除ができます。
• 画像プレースホルダー： 生成前に対象領域を確保できます。選択した結果はプレースホルダーと置き換わり、取り消しも可能です。追加の結果は予測可能な位置に配置されます。
• 画像の生成と編集： テキストからの画像生成、単一画像の編集、順序付きの2～10枚の画像参照、明示的なメイン参照、注釈ベースの編集、透明な背景、忠実度の調整、1～4件の出力。
• モデルを考慮したルーティング： ユーザーがクリエイティブ要件を指定すると、prepare は選択されたモデル、ルーティングの理由、有効な仕様、制限事項、推定合計費用を返します。
• 有料操作の安全性： prepare は無料です。submit には明示的な一度限りの確認が必要です。重複する作業はローカルで重複排除され、結果不明の送信が自動で再試行されることはありません。
• 永続的なタスク： タスク ID、状態遷移、ローカル結果は追記専用の台帳に保存されるため、ホストやブラウザーを閉じた後も作業を続けられます。
• HTML の下書き： ソース編集、CSP で制限されたサンドボックスプレビュー、更新、キャンバスのキャプチャ、ソースの ZIP エクスポート。
• プレゼンテーション： 16:9、4:3、カスタム比率、タイトル、コンテンツ、画像、比較、空白のレイアウト、サムネイル、並べ替え、複製、プレゼンテーションモード、PNG シーケンスのエクスポート。
• インポートとエクスポート： 選択範囲またはページ全体を1倍、2倍、4倍で PNG／SVG にエクスポート、プレゼンテーションの PNG ZIP、確認後のプロジェクト JSON バックアップの復元。
• 英語、中国語、日本語の UI： デフォルトは英語です。右上の言語切り替えでは、Canvas、Excalidraw のコントロール、安全な API Key フォームが更新され、選択した言語はプロジェクトとともに保存されます。
• ローカルセキュリティ： 認証情報には modellix-cli のシステム認証情報ストアを使用し、チャット、MCP 引数、URL、プロジェクトファイル、タスク台帳に書き込まれることはありません。

要件

• Node.js ^20.19.0 || >=22.12.0
• 本番 API https://api.modellix.ai へのアクセス
• Modellix コンソールで発行した有効な API Key

インストール方法は 1 つだけ選んでください。Codex、Cursor、Claude のユーザーは、ホストの Git またはマーケットプレイスのエントリーから一度だけインストールします。プラグインがマニフェストと Skills を読み込み、バックグラウンドで固定された npm ランタイムを自動的に解決します。OpenCode と汎用 MCP のユーザーは、npm ベースの MCP を一度だけ追加します。ユーザーが 2 つ目の npm または CLI インストールコマンドを実行する必要はありません。このパッケージには、オフライン時のフォールバックとして、テスト済みの modellix-cli 0.0.11 ランタイムが含まれています。各 MCP プロセスで CLI を初めて使用する際、Canvas は公開 npm の latest タグを確認し、その CLI バージョンをユーザー専用の Modellix キャッシュにアトミックに保存して、プロセスの残りの期間はそのバージョンを固定します。レジストリまたは互換性の問題が発生した場合は、同梱バージョンにフォールバックするため、CLI のリリースによってインストール済みの Canvas が使えなくなることはありません。デプロイを同梱のフォールバックバージョンに固定する必要がある場合にのみ、MODELLIX_CLI_AUTO_UPDATE=0 を設定してください。有効な CLI 認証情報がすでにあれば再利用されます。それ以外の場合、初回使用時のプロンプトでは Modellix API Key のみを尋ねます。

公開済みパッケージの Node.js 要件、本番依存関係、同梱 Widget、および有効なバージョンを確認するには、ソースチェックアウトの外部から npm exec --yes --package=@modellix/[email protected] -- modellix-agent-canvas --doctor を実行できます。これは診断用であり、2 つ目のインストール方法ではありません。

クイックスタート

可能な場合は、ホストのプラグインインターフェースからインストールしてください。

Agent Plugins 1.0.0 対応クライアント

このリポジトリまたはその npm パッケージを、互換性のある Agent Plugins クライアントからインストールしてください。移植可能なコアは、ルートにある plugin.json、mcp.json、および skills/ ディレクトリです。マニフェストと MCP 設定は公式の 1.0.0 スキーマを対象としており、固定位置からの検出によって、ホスト固有のマニフェストに依存せず、3 つの Agent Skills と汎用の stdio サーバーが読み込まれます。

Codex

codex plugin marketplace add Modellix/modellix-agent-canvas
codex plugin add modellix-agent-canvas@modellix

Git マーケットプレイスは、このリポジトリからプラグインファイルをインストールします。Codex アダプターは単一の Node ブートストラッププロセスを起動し、初回使用時に固定された npm ランタイムをユーザー専用キャッシュにインストールしてから、同じプロセスに MCP サーバーを読み込みます。2 回目以降の起動では検証済みキャッシュを再利用するため、npx のラッパープロセスを常駐させたり、グローバル CLI をインストールしたりする必要はありません。

Cursor

Cursor で次のコマンドを実行します。

/add-plugin modellix-agent-canvas

Git またはローカルチェックアウトからインストールする場合は、Customize → Plugins → + Add を開き、リポジトリのルートを選択してください。Cursor は .cursor-plugin/marketplace.json を読み込み、modellix の個人マーケットプレイスから Modellix Agent Canvas を表示します。これは、Cursor Directory に提出した Open Plugins メタデータとは別のものです。

Claude Code

claude plugin marketplace add Modellix/modellix-agent-canvas
claude plugin install modellix-agent-canvas@modellix

プラグインを有効化またはアップグレードした後、/reload-plugins を実行し、続いて /mcp を使って接続を確認してください。

OpenCode およびその他の MCP ホスト

公開 npm パッケージ @modellix/agent-canvas を使用してください。このリポジトリには、すぐにマージできるホスト設定が含まれています。セットアップ、検証、アップグレード、アンインストール、およびソースからの開発については、インストールガイド全文を参照してください。

インストール後、次を呼び出します。

get_modellix_canvas_status { "refresh": true, "workspacePath": "<absolute project path>" }
open_modellix_canvas { "workspacePath": "<the same absolute project path>" }

ステータスが missing または invalid の場合、Canvas は認証情報カード内にパスワード入力欄を直接表示します。このフィールドは右上で選択されている言語に従い、5 分後に期限切れとなる、独立した一度限りのループバックフォームです。送信すると、同梱 CLI を通じてキーが検証され、システムの認証情報ストアに保存され、Canvas のステータスが自動的に更新されます。キーが Canvas の状態や MCP ツールの引数に含まれることはありません。同じ短時間有効なローカルフォームを明示的に取得する必要があるインテグレーションでは、start_modellix_api_key_setup を引き続き利用できます。

ホスト互換性

ホスト	ローカル MCP	Canvas サーフェス	設定
Agent Plugins 1.0.0 クライアント	stdio	ポータブルなローカルページのフォールバック。MCP Apps のメタデータは引き続き検出可能です	plugin.json、mcp.json、skills/
Codex	stdio	MCP Apps ウィジェットとローカルフォールバック	.codex-plugin/plugin.json（.mcp.codex.json に複製）
Cursor 2.6+	stdio	MCP Apps	.cursor-plugin/marketplace.json、.cursor-plugin/plugin.json、.mcp.json
Claude Code	stdio	短時間有効なローカルページ	.claude-plugin/plugin.json、.mcp.claude.json
OpenCode	ローカル MCP コマンド	短時間有効なローカルページ	adapters/opencode/opencode.json、.agents/skills
OpenCode V2 ベータ	ローカル MCP コマンド	短時間有効なローカルページ	adapters/opencode/opencode-v2.json、.agents/skills

対象ホストに適したアダプターを使用してください。ルートの plugin.json と mcp.json は、ポータブルな Agent Plugins 1.0.0 コアを構成します。.plugin/plugin.json と .mcp.json は、Cursor Directory 向けのレガシーな Open Plugins エントリーと、Cursor 固有の MCP Apps アダプターとして引き続き使用されます。Codex マニフェストには独自のサーバー設定が含まれており、.mcp.codex.json は直接開発向けにその設定を複製します。プロトコルのマッピング、ホスト固有の UI の動作、検証状況については、ホスト互換性を参照してください。

標準の Cursor MCP 設定

Cursor 固有の .mcp.json は次を実行します。

npx -y --package @modellix/[email protected] modellix-agent-canvas --host cursor --supports-mcp-apps true

テンプレートには API キーが含まれていません。Cursor は MCP Roots を通じてアクティブなワークスペースを提供します。テンプレートでは、ポータブルでない ${workspaceFolder} の展開を意図的に避けています。

Claude Code のソース開発

claude mcp add --transport stdio modellix-agent-canvas -- node /absolute/path/modellix-agent-canvas/scripts/start-mcp.mjs --host claude-code --supports-mcp-apps false --project-dir /absolute/path/to/project

OpenCode

安定版の OpenCode では、adapters/opencode/opencode.json の mcp.modellix-agent-canvas をプロジェクト設定にマージしてください。OpenCode V2 ベータのユーザーは、代わりに adapters/opencode/opencode-v2.json の mcp.servers.modellix-agent-canvas をマージしてください。どちらのアダプターも、アクティブなワークスペースから @modellix/[email protected] を起動し、ローカルページへのフォールバックを使用します。

API キーとプライバシー

認証情報の解決方法は意図的にシンプルにしています。

1. modellix-cli にすでに保存されている認証情報を確認します。
2. 有効な認証情報があれば、それを再利用します。
3. それ以外の場合は、Canvas の認証情報カードに埋め込まれた分離されたセットアップ欄にキーを入力します。

チャット、ツールの引数、コマンドラインの引数、リポジトリのファイル、スクリーンショット、プロジェクトのバックアップ、タスクのレポートにキーを記載しないでください。Canvas はキーを localStorage、sessionStorage、IndexedDB に保存しません。

プロンプトと入力画像が Modellix に送信されるのは、ユーザーが有料タスクを確定した後のみです。Prepare はモデルの機能と料金のデータを読み取りますが、参照データをアップロードしたり、有料タスクを作成したりすることはありません。完了した出力はすぐにプロジェクトのアセットにダウンロードされるため、有効期限のあるリモート結果 URL に依存せずに済みます。

画像ルーティング

要件	デフォルトの機能ルート
標準的な不透明テキストから画像への生成	GPT Image 2
透明テキストから画像への生成	GPT Image 1.5
標準的な単一画像編集	GPT Image 2 Edit
透明、厳密な忠実度、または標準的な複数画像編集	GPT Image 1.5 Edit
特殊な比率または2K/4K出力を伴う複数参照画像の編集	Nano Banana Pro Edit

本番APIは、最新のモデルカタログ、機能、価格を提供します。Canvasは承認済み候補からのみ選択します。すべての必須要件を満たすモデルがない場合、有料タスクを黙って劣化させたり作成したりせず、CAPABILITY_CONFLICT または MODEL_UNAVAILABLE を返します。

有料ワークフローは次のとおりです。

1. prepare_modellix_image_task は、順序付きの参照を解決し、モデルを選択して、短時間有効な確認用フィンガープリントを返します。
2. UIまたはエージェントは、実際のモデル、ルーティングの理由、有効な仕様、数量、警告、推定総額を表示します。
3. ユーザーが明示的に承認した後、submit_modellix_image_task は、同じフィンガープリントを使用して、変更されていない意図を送信します。
4. wait_modellix_image_task は、登録済みのタスクをデフォルトで30秒（最大45秒）待機します。get_modellix_image_task は即時スナップショットを返します。ページを閉じると、タスクを再送信せずにアクティブな読み取りをキャンセルします。SUBMISSION_UNKNOWN は照会のみ可能で、自動再送信を決して行ってはいけません。
5. finalize_modellix_image_task はダウンロードを検証し、コンテンツアドレス指定されたアセットを書き込み、結果をプレースホルダーまたはソースの隣に配置します。

MCP ツール

エージェント向けのワークフローでは、次を使用します。

• get_modellix_canvas_status
• start_modellix_api_key_setup
• open_modellix_canvas
• get_canvas_context
• create_canvas_page、rename_canvas_page、delete_canvas_page
• prepare_modellix_image_task
• submit_modellix_image_task
• get_modellix_image_task
• wait_modellix_image_task
• list_modellix_canvas_tasks
• finalize_modellix_image_task
• cleanup_modellix_canvas_uploads。confirmCleanup: true が必要で、台帳に記録された、終端状態にある一時アップロードのみに影響します。

get_canvas_project、save_canvas_project、save_canvas_asset は、アプリ専用のMCP Appsデータチャネルです。これらにより、大きなシーンJSONやbase64アセットがモデルコンテキストに含まれないようにします。すべてのツールは、安定したエラーコード、再試行の可否、復旧方法を返します。

プロジェクトデータ

バインドされた各ワークスペースは、次の場所にデータを保存します。

.modellix/canvas/
├── project.json
├── pages/<page-id>.json
├── assets/
│   ├── images/
│   ├── html/
│   └── exports/
├── tasks/
│   ├── snapshot.json
│   ├── events.jsonl
│   └── staging/
├── recovery/
└── locks/

• 画像はSHA-256でコンテンツアドレス指定され、重複排除されます。ページJSONには相対アセットIDが保存されます。
• プロジェクトとページの書き込みでは、一時ファイル、フラッシュ、アトミック置換、リビジョン競合チェックを使用します。
• 書き込み前に復旧スナップショットを作成します。古いビルドが、未知のスキーマバージョンをその場で上書きすることはありません。
• 実パス、シンボリックリンク、ジャンクション、ワークスペース境界のチェックにより、すべてのファイル操作を保護します。
• タスク台帳には、API Keys、プロンプト全文、入力画像、リモート一時URL、絶対ローカルパスを含めません。

ループバックとHTMLのセキュリティ

フォールバックページは、エフェメラルなシステム割り当てポートを使用してlocalhostのみで待ち受け、次を適用します。

• 一度限りの高エントロピーなオープントークンと、短時間有効なHttpOnly; SameSite=Strictセッション
• Host、Origin、HTTPメソッド、Content-Type、リクエストサイズの検証
• 厳格なCSP、no-store、no-referrer、nosniff
• リモートスクリプト、フォント、アナリティクス、汎用ファイルプロキシの不使用

HTMLドラフトは、独自のCSPを持つ別個のサンドボックス化されたiframeで実行されます。外部ネットワーク接続、トップレベルナビゲーション、ポップアップ、ダウンロード、デバイス権限、ホストAPIは、デフォルトで無効です。

開発とリリースのチェック

npm ci
npm run sync:skills
npm run check
npm run check:licenses
npm run check:plugin
npm test
npm run build
npm run build:widget
npm run probe:mcp
npm audit --audit-level=moderate

npm run quality は、npm audit と実際にパッケージ化してインストールするスモークテストを除く、ローカルの完全なゲートを実行します。npm run smoke:package は、ライフサイクルスクリプトを無効にして公開可能なパッケージをインストールし、MCP全体をテストします。

リリース前にnpm pack --dry-runを使用し、パッケージにQAのオリジン、内部受け入れ資料、絶対パス、テスト用認証情報、または古いリソースが含まれていないことを確認してください。

よくあるエラー

• WORKSPACE_UNBOUND：アクティブなプロジェクトの絶対パスの workspacePath を指定するか、実際のユーザープロジェクトから --project-dir を指定して MCP を再起動してください。
• WORKSPACE_BOUNDARY_VIOLATION：パスまたはリンク先が、バインドされたワークスペースの外部に解決されました。
• AUTH_REQUIRED / AUTH_INVALID：認証情報カード内でセキュア入力を使用するか、再生成してください。チャットでキーを送信しないでください。
• ROUTE_CHANGED_RECONFIRM_REQUIRED：入力、参照順序、仕様、価格、または有効期限が変更されました。再度準備して確認してください。
• SUBMISSION_UNKNOWN：再送信しないでください。タスクセンターから既存の操作のポーリングを続けてください。
• FINALIZE_CONFLICT：意図した対象が移動または削除されていないか確認してから、復旧先を選択してください。
• REVISION_CONFLICT：別のセッションでプロジェクトが更新されました。現在の変更を再適用する前に、再読み込みしてください。
• No marketplace manifest found：Customize → Plugins → + Add を使用する場合は、.cursor-plugin/marketplace.json を含むリポジトリルートを選択してください。開発用のスタンドアロンプラグインを読み込む場合は、代わりに ~/.cursor/plugins/local/modellix-agent-canvas を使用します。

アップグレードとアンインストール

ホスト固有のコマンドはアップグレードとアンインストールに記載されています。アップグレードしても .modellix/canvas/ は削除されません。アンインストールしてもワークスペースデータとシステム認証情報は保持され、ほかの Modellix ツールと共有されているキーが誤って削除されるのを防ぎます。認証情報を削除するには、対応するプロファイルに対して modellix-cli auth logout を実行してください。

ライセンス

プロジェクト所有のコードはMIT Licenseの下で利用できます。キャンバスエンジンは MIT の下で @excalidraw/excalidraw 0.18.1 を使用します。バンドルされた modellix-cli 0.0.11 のフォールバックと、自動的にキャッシュされる新しい CLI は、それぞれ独自のパッケージライセンスとメタデータを保持します。THIRD_PARTY_NOTICES.md および THIRD_PARTY_LICENSES を参照してください。