本物のSVGエディタを動かすMCPサーバー

ベクターグラフィックス向けのMCPサーバーの多くは、SVGファイルを生成して渡すだけです。RayziaのMCPは、ブラウザで動作する本物のエディタにAIエージェントを接続します。あなたが使うのと同じツールで描画し、キャンバス上にすでにあるアートワークを編集します。すべての操作は目の前でライブに反映され、いつでも好きなタイミングで引き継げます。Agent Connect は Pro に含まれ、インストール不要でブラウザ上で動作します。

単なるファイル生成ツールではありません

SVGファイルを書き出せるMCPサーバーはたくさんあります。しかしそれはフィードバックのない1回のツール呼び出しにすぎません。モデルは座標を推測し、あなたは結果を別の場所で開いて何が失敗したかを確認することになります。Rayziaのサーバーは、代わりにエージェントに完全な観察と行動のループを提供します。 get_state はシーンを読み取ります。選択範囲、各オブジェクトのidとバウンディングボックス、ペイント、アクティブなツール、現在のビューです。 get_render はキャンバスのPNGを返すので、モデルが自分の作業を自分の目で確認できます。

アクションは本物のエンジンを通して実行されるため、エージェントはマークアップの出力に限定されません。パス上テキストの配置、エンベロープワープの適用、グラデーションの流し込み、手作業で適用するのと同じライブパスエフェクトの実行ができます。各セマンティック動詞は1回のアンドゥステップで、バッチも1回のアンドゥとしてまとまるため、誤操作もCtrl+Z一発で戻せます。

ループは逆方向にも動作します。エディタのAIアシスタントパネルには Claude Code (local) プロバイダーがあり、そこに入力したプロンプトは wait_for_promptを通じてエージェントに届き、エージェントの作業中はパネルが各操作をライブで実況します。作業が終わると、 reply_to_user.

ツール一覧

12のツールがループ全体をカバーします。 get_catalog は地図です。パラメータスキーマ付きのセマンティック動詞、533の生コマンド、69のエフェクト、57のツールを返すため、エージェントはAPIを幻覚するのではなく、エディタにできることを実際に発見します。

ツール機能
get_catalogエディタが公開しているすべてを発見します。パラメータスキーマ付きのセマンティック動詞、533の生コマンド、69のエフェクト、57のツール。最初に呼び出してください。
get_state現在のシーンを読み取ります。選択範囲、全オブジェクト(グループ内も再帰的に)のid・バウンディングボックス・ペイント、さらにアクティブなツール、ドキュメントサイズ、ビューです。
run_verbシェイプ、テキスト、グラデーション、ブレンド、ワープ、約200のライブパスエフェクトなどの高レベル動詞。各動詞は1回のアンドゥステップで、バッチは1往復で実行され1回のアンドゥにまとまります。
search_assetsRayzia のストック(グラフィック、アイコン、写真、テンプレート)を、ライブラリパネルと同じ検索と順序で探します。結果は小さく、作品本体を含まないのでトークンをほとんど使いません。
preview_assets最大36点のストックを1枚のコンタクトシートPNGにまとめ、モデルが選ぶ前に目で確認できるようにします。
place_assetストックを指定した枠に、編集できる実際のオブジェクトとして配置します。アンドゥは1ステップです。プレミアム素材には Pro または14日間のトライアルが必要です。
draw合成入力で実際のツールを使って描画します。ペンパスやフリーハンドストロークに加え、修飾キーでシェイプビルダーの切り抜きやメッシュ編集も行えます。
run_commandエスケープハッチ:任意の生エンジンコマンドを名前で実行します。ファイルおよびドキュメント操作はエンジン境界で拒否リスト化されています。
get_svg現在のドキュメントを、ラウンドトリップ安全なSVG文字列としてエクスポートします。
get_renderキャンバスをPNGにレンダリングし、モデルが自分の作業を確認できるようにします。 mark を指定すると、その mark の領域とその周辺だけを返し、ユーザーのビューは動きません。
wait_for_promptエディタのAIアシスタントパネルにユーザーが次に入力するプロンプトをロングポーリングで待ち受けます。
reply_to_user短いアシスタント返信をそのパネルに投稿します。
get_marksAgent Marks: ユーザーが描いた番号付きの領域を順番に返します。それぞれにメモ、状態、作業、描画コマンドと同じ座標での領域、編集 mark の場合は変更してよいオブジェクトだけが付きます。
set_mark_statusmark の状況を伝えます。作業を始める前に doing を設定します。順番に、一つずつ行ってください。
report_markmark を完了し、何をしたか、または失敗した理由を伝えます。返答には、領域に対して何が変わったかの警告も含まれます。
add_mark自分で mark を置きます。ユーザーが描いたものと同じ見た目で、2行目にあなたの名前が出ます。
update_markmark のメモ、ツール、スタイル、作業、または変更してよいオブジェクトを変更します。
remove_markmark を1つ削除します。
reorder_marksmark の順番を設定します。
undo_mark1つの mark の作業を、新しい取り消し1ステップとして元に戻します。あとの mark が同じオブジェクトに触れていた場合は、その mark の名前を挙げて拒否されます。
finish_marks作業が完了したことを伝えます。作品は残り、ユーザーがオフにしていなければ mark は消えます。

Agent Marks を使うと、ユーザーはプロンプトを書く代わりに、キャンバスに領域を描いてエージェントに頼めます。実行は mark と一緒に wait_for_prompt で届きます。Rayzia はコマンドのたびに、変更された内容を mark が示した領域と比べます。端を越えたことと、mark で示されていないものを変更したことは、そのコマンドへの返答とユーザーのキャンバスの両方に即座に表示され、ユーザーはその変更だけを個別に取り消せます。切り取られることも、ブロックされることもありません。mark がドキュメント、書き出し、共有リンクに入ることはありません。

クイックスタート:5ステップで Claude Code を接続

  1. AIパネルを開く。 rayzia.com のエディタ/editor/で、AIアシスタントパネルを開き、設定の歯車をクリックします。
  2. Claude Code (local) を選ぶ。 プロバイダー一覧から選択します。このプロバイダーにAPIキーは不要です。
  3. SKILL.md をコピーする。 ペインが、サーバー全体を埋め込んだスキルに加え、ブラウザのケーパビリティトークンとブリッジポートを生成します。コピーまたはダウンロードして Claude Code に渡してください。
  4. Claude Code にサーバーを登録させる。 サーバーファイルを保存し、MCPサーバーとして追加します:
    claude mcp add rayzia \
      --env AI_MCP_PORT=<port> --env AI_MCP_TOKEN=<token> \
      -- node /absolute/path/to/rayzia-mcp-server.mjs
  5. Connect をクリックする。 ステータスドットが緑になります。Claude Code に直接入力するか、Claude Code に「Rayzia パネルのプロンプトを待ち受けて」と指示すればパネルからチャットできます。

サーバーは単一ファイルで、オープンソースとして github.com/RayziaOfficial/rayzia-mcpで公開されています。他のMCPクライアントからは標準の .mcp.json エントリで利用できます:

{
  "mcpServers": {
    "rayzia": {
      "command": "node",
      "args": ["/absolute/path/to/rayzia-mcp-server.mjs"],
      "env": { "AI_MCP_PORT": "8765", "AI_MCP_TOKEN": "<token>" }
    }
  }
}

設計思想としてローカル

サーバーはnpm依存ゼロの単一Nodeファイル(Node 16+ の組み込み機能のみ)で、127.0.0.1 にバインドするため、マシンの外からサーバーに到達することはできません。すべての操作にはブラウザごとに一度生成されるケーパビリティトークンが付き、トークンが一致しない操作はエディタが拒否するため、ポートを乗っ取った不正なローカルプロセスがキャンバスを操作することはできません。

ファイルおよびドキュメント操作(保存、開く、新規、インポート)はエンジン境界で拒否リスト化されています。接続はエディタ側からのオプトインで、デプロイ済みのhttpsエディタでも動作します。ブリッジがChromeのPrivate Network Accessプリフライトに応答するため、ページからループバックサーバーに到達できます。

開発者向けの配線なしでAI製ベクターが欲しい場合は、エディタ内蔵アシスタントがあなた自身のClaudeまたはGPTアカウントでそれをカバーします。詳しくは AI SVGジェネレーター.

Rayzia MCP:よくある質問

Claude Code や他のMCPクライアントで動きますか?

はい。アプリ内フローは Claude Code を中心に作られています。エディタが SKILL.md を生成し、Claude Code が1回の claude mcp add コマンドでサーバーを登録します。stdio越しにJSON-RPCを話せるMCPクライアントなら、標準の .mcp.json エントリで同じサーバーを利用できます。

エージェントにエディタを操作させても安全ですか?

サーバーは 127.0.0.1 のみにバインドし、エディタはすべての操作でブラウザごとのケーパビリティトークンを検証するため、別のローカルプロセスがキャンバスを制御することはできません。ファイルおよびドキュメント操作(保存、開く、新規、インポート)はエンジン境界で拒否リスト化されており、接続はあなたが Connect をクリックした後にのみ存在します。

AIによる編集は編集可能・アンドゥ可能なままですか?

はい。エージェントは同じドキュメント内で同じエンジンを使って作業するため、作られたものはすべて、そのまま編集を続けられる通常のベクターアートワークです。各セマンティック動詞は1回のアンドゥステップで、バッチも1回のアンドゥにまとまるため、Ctrl+Z はあなた自身の編集と同じように機能します。

追加費用はかかりますか?

Agent Connect は Pro(月額 $8 または年額 $72)に含まれ、クレジットカード不要の14日間トライアルでも使えます。Claude Code はあなたのマシン上で、プロバイダとのあなたのプランのもとで実行され、Rayzia が Pro に上乗せして請求することはありません。

タブを開いて、次のデザインを始めよう。

ブラウザですぐに開けて、インストールは不要。Design は無料で、Pro はクレジットカードなしで14日間試せます。