Design Editorドキュメントはじめに
エージェントを接続する
Design Editor はお使いのコンピューター上で MCP サーバーを実行します。MCP に対応したエージェントなら、開いているキャンバスを読み取り、編集できます。
1MCP サーバーを起動する
サーバーは http://127.0.0.1:3100/mcp で待ち受けます。エージェント連携をオンにしていれば、アプリと一緒に起動します。そうでない場合は、設定の MCP、ホームの「サーバーを起動」ボタン、または de start で起動してください。
サーバーは自分のコンピューターからのリクエストにだけ応答します。127.0.0.1 にバインドし、他のオリジンの Web ページからのリクエストは拒否します。
2ワンクリックで設定する
設定の MCP（またはホームの「エージェントを接続」）を開き、使っているエージェントをオンにします。アプリが各エージェントの設定ファイルにエントリを書き込みます。その後、エージェントのターミナルを再起動してください。エージェントをアップグレードしたあとは、スイッチをもう一度オンにしてください。
3手動で追加する
Claude Code の場合：
ターミナル
claude mcp add --scope user --transport http design-editor http://127.0.0.1:3100/mcpほかのエージェントでも、MCP 設定に同じ URL を指定します。各エージェントが読み込むファイルは「エージェントと設定ファイル」に一覧があります。
4接続を確認する
エージェントに get_editor_state を呼び出すよう依頼してください。開いているドキュメント、現在のページ、選択範囲が返ってきます。あとは普通の言葉で画面を依頼すれば、キャンバスに表示されていく様子を見られます。