SVG Lab

SVG Lab MCP

「Claude に追加」をクリックすると、SVG Lab の情報が入力済みの Claude の「カスタムコネクタを追加」ダイアログが開きます。「追加」をクリックしてから「接続」をクリックしてください。Cursor と VS Code のボタンをクリックすると、そのアプリ用の SVG Lab のインストール手順が開き、アプリに引き継がれます（GitHub からアプリに直接リンクすることはできません）。

Smithery と Glama に掲載されています。機能、提供内容、セットアップについては、https://svglab.app/mcp-server をご覧ください。

SVG Lab MCP を使うと、AI が SVG Lab (svglab.app) 内でデザインを作成し、その様子をリアルタイムで確認できます。Claude、ChatGPT、Codex、Cursor、その他の MCP クライアントを接続し、アプリ画面、アイコン、イラスト、チャートの作成を依頼すると、AI が SVG Lab の Design Engine（レイアウト、間隔、文字、色、描画を管理し、完成前にチェックします）を使って、SVG Lab プロジェクト内でデザインを作成します。claude.ai、ChatGPT、Codex では、画面の描画状況をチャット内のライブカードで確認できます。その他のアプリでは、AI が SVG Lab エディターでプロジェクトを開くため、SVG Lab のキャンバス上で作業を確認できます。完成したデザインはクリーンな SVG として SVG Lab プロジェクトに保存され、SVG、PNG、PDF としてエクスポートできます。

AI がアイデア（コンテンツ、パレット、方向性）を提示し、SVG Lab が構造（間隔、配置、サイズ、文字、有効なベクター形状）を保証します。SVG Lab のサーバー上で動作するため、インストールは不要で、ブラウザーのタブを開いたままにする必要もありません。

https://svglab.app/mcp

ストリーミング可能な HTTP、OAuth サインイン、キー不要です。

このリポジトリには、ドキュメント、すぐに使えるクライアント設定、エージェントスキルが含まれています。サーバーコードは含まれていません。最新のセットアップガイドは常に svglab.app/mcp-setup で確認できます。

目次

• AI エージェント向け
• 始める前に
• クイックセットアップ：Claude · Claude Code · ChatGPT · Codex · Cursor · VS Code · OpenCode · Windsurf · Gemini CLI · 任意の MCP クライアント
• 動作確認
• 使用例
• アクセス
• よくある質問
• リンク
• このリポジトリ内のファイル

AI エージェント向け

おそらく、ユーザーのためにこれを設定していることでしょう。以下を確認してください。

name:              svglab
server_url:        https://svglab.app/mcp
transport:         streamable HTTP (remote). Not SSE, not stdio. Nothing to install.
auth:              OAuth 2.1, authorization code with PKCE (S256), dynamic client registration
resource_metadata: https://svglab.app/.well-known/oauth-protected-resource/mcp
auth_server_meta:  https://svglab.app/.well-known/oauth-authorization-server
registration:      https://svglab.app/oauth/register
scope:             mcp
client_id:         not needed; leave client ID and client secret empty
no_credentials:    POST /mcp answers 401 with a WWW-Authenticate header pointing at resource_metadata
key_alternative:   header "Authorization: Bearer svl_KEY" (the user creates the key at svglab.app:
                   account menu, SVG Lab MCP, Generate key). Never invent a key.
access:            every account gets 100 free credits (up to 24 app screens) once to try it, no form; then a plan (Starter, Plus, Max, Ultra or Team) or a top-up: https://svglab.app/billing
cost:              credits: 1 a tool call, 2 a reference image search, failed calls free; 100 free credits (up to 24 app screens) once per account, then monthly plan credits or top-up credits (never expire)
usage:             https://svglab.app/usage (the signed in account's credits and its calls by tool, project and day)
browser_tab:       not needed; the server runs the Design Engine and saves to the user's My Projects
first_call:        can take 10 to 30 seconds while the Design Engine starts
sessions:          up to 2 AI sessions per SVG Lab account at once, each in its own artboard group
one_click_claude:  https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=SVG%20Lab&connectorUrl=https%3A%2F%2Fsvglab.app%2Fmcp
                   (opens Add custom connector with SVG Lab filled in; the user presses Add, then Connect)
one_click_cursor:  cursor://anysphere.cursor-deeplink/mcp/install?name=svglab&config=eyJ1cmwiOiJodHRwczovL3N2Z2xhYi5hcHAvbWNwIn0=
one_click_vscode:  vscode:mcp/install?%7B%22name%22%3A%22svglab%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fsvglab.app%2Fmcp%22%7D
app_steps:         https://svglab.app/mcp-server?app=NAME opens one app's steps; NAME is claude, chatgpt, codex,
                   claude-code, cursor or vscode. Every app: https://svglab.app/mcp-server#connect
registry_name:     app.svglab/svglab
setup_markdown:    https://svglab.app/mcp-setup (send the header Accept: text/markdown)
agent_skill:       skills/svglab-mcp/SKILL.md in this repository (npx skills add ottoman9/svglab-mcp)

手順：

1. アプリを確認します。 ユーザーがどのアプリ（Claude Code、OpenCode、Codex、Cursor、VS Code、Gemini CLI、Windsurf、Claude、ChatGPT）を使っているか確認します。判断できない場合は、一度だけ尋ねてください。アカウントが利用可能かどうかわからない場合は、サインインした状態で https://svglab.app/billing を開いてもらってください。現在のプランと残りのクレジット（プラン、無料、追加購入分）が表示されます。すべてのアカウントには無料クレジットが100付与されます（アプリ画面を最大24件作成できます）。その後、SVG Lab MCP を使うにはプラン（Starter、Plus、Max、Ultra、Team）または追加購入が必要です。
2. サーバーを追加します。 以下から該当するアプリの設定ブロックをそのまま使用し、名前は svglab にします。ユーザーから特定のプロジェクトだけに設定するよう求められない限り、ユーザーレベルの設定（すべてのプロジェクトに適用）を優先してください。設定ファイルを編集するときは、既存のファイルに設定を追加し、ほかのすべてのサーバーと設定を保持してください。Git にコミットされる可能性のあるプロジェクトファイルには、キーを絶対に記載しないでください。環境変数の形式を使用してください。
3. サインインを開始します。 アプリのサインイン手順を実行します（例：opencode mcp auth svglab、または Claude Code で /mcp）。ブラウザーが開き、ユーザーが SVG Lab にサインインして Approve を押すまで待機します。実行して待つか、ユーザー自身のターミナルで実行してもらってください。ユーザーに代わって承認することはできません。画面に表示される内容を伝えてください。
4. 再読み込みします。 SVG Lab のツールを読み込むため、アプリを再起動するか、新しいセッションを開始します。設定対象のアプリ内で作業している場合、再起動すると自分のセッションが終了します。先に上記の手順を完了してから、ユーザーに再起動を依頼し、新しいセッションで動作確認のテスト用プロンプトを貼り付けてもらってください。
5. 確認します。 新しいセッションで、svglab のツールが自分のツール一覧にあるか確認します。アクセスできる場合は、数十種類のデザインツールが表示されます。ツールがアカウントステータスツールの1つだけの場合、接続はできていますが、アカウントはまだデザインを作成できません（無料クレジット100を使い切っており、プランのクレジットも追加購入分のクレジットもない、アカウントが停止されている、またはキーが置き換えられています）。そのツールを呼び出し、メッセージをユーザーに伝えてください。サインイン時にアクセス権がないアカウントは、通常これより前の段階で止まります。SVG Lab のサインインページに無料クレジットを使い切ったことが表示されます。ユーザーは引き続き承認できます。その後、アカウントステータスツールにクレジットの取得方法が表示されます。
6. テストします。 動作確認のテスト用プロンプトを実行し、返されたプロジェクトリンクをユーザーに伝えます。最初のデザイン手順には10～30秒かかる場合があります。失敗ではありません。
7. アクセスが許可されない場合は、ユーザーに次のように伝えてください。「SVG Lab の設定は完了しましたが、お使いの SVG Lab アカウントには SVG Lab クレジットが残っていません。無料クレジット100を使い切っています。同じアカウントで https://svglab.app/billing にアクセスしてプランを選ぶか、追加購入してください。追加の設定なしで利用できるようになります。」

始める前に

1. SVG Lab アカウントが必要です。https://svglab.app/ で Google またはメールリンクを使ってサインインしてください。
2. 試すために購入する必要はありません。すべてのアカウントには、入力フォームなしで無料クレジットが100、一度だけ付与されます（アプリ画面を最大24件作成できます。ツールの呼び出し1回につきクレジットを1消費します）。その後は、https://svglab.app/billing でプラン（Starter、Plus、Max、Ultra、Team）を選ぶか、追加購入してください。$10で5,000クレジット（アプリ画面を最大1,200件作成）、$25で10,000クレジット（アプリ画面を最大2,400件作成）、または$50で25,000クレジット（アプリ画面を最大6,100件作成）です。追加購入分のクレジットに有効期限はありません。購入はすべて確定となります。

毎回、同じアカウントでサインインしてください。AI アプリで SVG Lab のサインインページが開いたら、同じアカウントを使ってください。無料クレジット、プラン、追加購入分が適用されます。デザインはそのアカウントの My Projects に保存されます。

どのアプリでもサインイン方法は同じです。アドレスを追加すると、アプリによって「Sign in to SVG Lab」ページが開きます。サインインして、どのアプリから要求されているかを確認し、Approve を押してください。

クイックセットアップ

以下に簡易版を示します。設定済みファイルはconfigs/にあります。キーを使ったセットアップやトラブルシューティングを含む完全なガイドは、https://svglab.app/mcp-setup にあります。

Claude（claude.ai と Claude Desktop）

カスタムコネクターは Free、Pro、Max、Team、Enterprise プランで利用できます。Free アカウントでは、カスタムコネクターを 1 つ追加できます。

1. ワンクリック： Claude に SVG Lab を追加 を開きます。Claude で「カスタムコネクターを追加」が開き、名前 SVG Lab と URL https://svglab.app/mcp が入力済みの状態になります。内容を確認し、「詳細設定」（OAuth クライアント ID とシークレット）は空欄のままにします。
2. 「追加」を押し、次に SVG Lab の横にある「接続」を押します。SVG Lab にサインインして、「承認」を押します。
3. チャットで左下の + を押し、「コネクター」を開いて、SVG Lab がオンになっていることを確認します。

手動で追加する場合：Claude で「カスタマイズ」を開き、「コネクター」（ウェブ版：https://claude.ai/customize/connectors）を選び、+ を押してから「カスタムコネクターを追加」を選びます。名前に SVG Lab を入力し、リモート MCP サーバーの URL として https://svglab.app/mcp を貼り付け、ステップ 2 に進みます。

Team または Enterprise の場合：オーナーが「組織の設定」から「コネクター」に進み、コネクターを一度追加します。その後、各ユーザーが「接続」を押し、それぞれの SVG Lab アカウントでサインインします。

Claude Code

claude mcp add --transport http --scope user svglab https://svglab.app/mcp

--scope user を指定すると、すべてのプロジェクトで SVG Lab を利用できます。省略すると、現在のプロジェクトにのみ追加されます。次に Claude Code を起動し、/mcp と入力して svglab を選び、「認証」を選択します。ブラウザーで SVG Lab のサインインページが開くので、「承認」を押します。/mcp に svglab が接続済みと表示されます。

ChatGPT

開発者モードが必要です。開発者モードは、ウェブ版の ChatGPT Plus、Pro、Business、Enterprise、Education で利用できます（Business、Enterprise、Education のワークスペースでは、事前に管理者が有効にする必要があります）。

1. 「設定」から「セキュリティとログイン」に進み、「開発者モード」をオンにします。
2. 「プラグイン」を開き、+ を押して開発者モードアプリを作成します。
3. 名前：SVG Lab。説明：AI 向けデザインエンジン：完成した SVG としてアプリ画面、アイコン、イラスト、チャートを作成。MCP サーバー URL：https://svglab.app/mcp。認証：OAuth。
4. 作成します。ChatGPT からサインインを求められたら、SVG Lab にサインインして「承認」を押します。
5. チャットで + メニューを開き、「開発者モード」を選んで SVG Lab を選択します。

ChatGPT では、これらのメニュー名が時折変更されます。「プラグイン」が見当たらない場合は、「設定」で「アプリ」または「コネクター」を探してください。入力する項目は同じです。

Codex

Codex アプリですべて操作でき、ターミナルは必要ありません。アプリ、IDE 拡張機能、CLI は ~/.codex/config.toml を共有するため、SVG Lab の追加は一度だけで済みます。

1. Codex アプリで「設定」から「プラグイン」を開き、「MCP」タブを選択します。
2. 「追加」を押して、「カスタム MCP に接続」を選択します。
3. 名前に SVG Lab を入力し、種類に Streamable HTTP を設定して、URL https://svglab.app/mcp を貼り付けます。ベアラートークンとヘッダーは空欄のままにして、「保存」を押します。
4. サーバーの一覧で、SVG Lab の行にある「認証」を押します（歯車アイコンの横、スイッチの手前）。ブラウザーで SVG Lab のサインインページが開くので、「承認」を押します。ブラウザーにサインイン完了と表示されたら、Codex に戻ります。
5. 新しい Codex スレッドを開始し、SVG Lab のツールを読み込みます。

代わりにターミナルから設定する場合（開発者向け）：

codex mcp add svglab --url https://svglab.app/mcp

または、~/.codex/config.toml に手動で追加します：

[mcp_servers.svglab]
url = "https://svglab.app/mcp"

その後、ステップ 4 と同様に、アプリの「認証」ボタンからサインインします。

Cursor

ワンクリック： svglab.app/mcp-server?app=cursor を開き、「Cursor に追加」を押してから、Cursor で「インストール」を押してサインインします。または手動で、既存の mcpServers に統合しながら、~/.cursor/mcp.json（すべてのプロジェクト）または .cursor/mcp.json（このプロジェクトのみ）に追加します：

{
  "mcpServers": {
    "svglab": {
      "url": "https://svglab.app/mcp"
    }
  }
}

Cursor の設定を開き、MCP の一覧から svglab を探します。Cursor からサインインを求められたら、SVG Lab のサインインページで「承認」を押します。その後、エージェントモードのチャットから利用します。

VS Code（GitHub Copilot エージェントモード）

ワンクリックで設定するには、svglab.app/mcp-server?app=vscode を開き、Add to VS Code を押してから、Install in VS Code を押してサインインします。または手動で、プロジェクト内に .vscode/mcp.json を作成します（すべてのプロジェクトに適用するには「MCP: Open User Configuration」を実行します）。最上位のキーは mcpServers ではなく servers です。

{
  "servers": {
    "svglab": {
      "type": "http",
      "url": "https://svglab.app/mcp"
    }
  }
}

または「MCP: Add Server」を実行し、HTTP を選択して https://svglab.app/mcp を貼り付けます。サーバーを起動すると、初回接続時に VS Code が SVG Lab のサインイン用ブラウザーを開きます。その後、Copilot Chat をエージェントモードで開きます。

OpenCode

~/.config/opencode/opencode.json（すべてのプロジェクトに適用。Windows の場合は C:\Users\YOU\.config\opencode\opencode.json）またはプロジェクトフォルダー内の opencode.json の mcp に、svglab のエントリーを追加します。ファイル名が opencode.jsonc の場合もあります。存在するほうを編集してください。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "svglab": {
      "type": "remote",
      "url": "https://svglab.app/mcp",
      "enabled": true
    }
  }
}

次に、ターミナルからサインインし、ブラウザーで Approve を押します。

opencode mcp auth svglab

OpenCode を再起動するか、新しいセッションを開始して、opencode mcp list を実行し、svglab が接続されていることを確認します。

Windsurf（Devin Desktop）

Cascade パネルで ... メニューを開き、Open MCP config file を選択します（macOS と Linux では ~/.config/devin/mcp_config.json、Windows では %APPDATA%\devin\mcp_config.json。古い Windsurf バージョンでは ~/.codeium/windsurf/mcp_config.json を使用します）。次を追加します。

{
  "mcpServers": {
    "svglab": {
      "serverUrl": "https://svglab.app/mcp"
    }
  }
}

保存して Cascade の MCP リストを更新し、SVG Lab にサインインして、求められたら Approve を押します。

Gemini CLI

gemini mcp add --transport http --scope user svglab https://svglab.app/mcp

または ~/.gemini/settings.json に追加します。url ではなく httpUrl を使用してください。Gemini CLI では、url は旧式の SSE トランスポートを意味します。

{
  "mcpServers": {
    "svglab": {
      "httpUrl": "https://svglab.app/mcp"
    }
  }
}

Gemini CLI を起動すると、サインイン用のブラウザーが開きます。手動で開始するには、/mcp auth svglab と入力します。/mcp と入力して、svglab が接続されていることを確認します。

その他の MCP クライアント

• サーバー URL：https://svglab.app/mcp
• トランスポート：ストリーマブル HTTP（「HTTP」または「リモート」と表示されることもあります）。SSE でもローカルコマンドでもありません。
• 認証：OAuth。SVG Lab はアプリの自動登録と PKCE に対応しているため、クライアント ID とシークレットのフィールドは空欄にします。
• または、アプリにサインイン機能がない場合は、次のヘッダーを使用します：Authorization: Bearer svl_YOUR_KEY。SVG Lab でキーを作成するには、アカウントメニューから SVG Lab MCP、Use a key instead of signing in、Generate key の順に選択します。

{
  "mcpServers": {
    "svglab": {
      "url": "https://svglab.app/mcp"
    }
  }
}

動作確認

AI アプリで新しいチャットを開始し、次のプロンプトを貼り付けます。

Use the SVG Lab MCP server (svglab). First check my SVG Lab account status and tell me which account you are connected to and whether design access is on. Then create a new SVG Lab project called "Setup test", design a simple 64 by 64 paper plane icon in it, and give me the link to the project.

期待される結果：アシスタントが SVG Lab に接続されていることとアカウント名を伝え、アイコンをデザインします（最初のデザイン手順では、SVG Lab が Design Engine を起動するため 10～30 秒かかる場合があります。以降の手順はすぐに完了します）。さらにリンクを提示し、新しいプロジェクトが My Projects に追加されます。プロジェクトは SVG、PNG、PDF として編集またはエクスポートできます。

使用例

svglab.app/mcp-server に掲載されている、SVG Lab MCP で作成したアプリ画面です。

## アクセス

SVG Labはクレジット制です。すべてのSVG Labアカウントには、お試し用として100クレジット（アプリ画面最大24枚）が一度だけ付与されます。フォームへの入力は不要です。ツールの呼び出しは1クレジット、参考画像の検索は2クレジットで、失敗した呼び出しには料金がかかりません。その後は、プランに応じて毎月クレジットが追加されます。Starter（月額$7、2,500クレジット、アプリ画面最大600枚）、Plus（$20、7,400クレジット、アプリ画面最大1,800枚）、Max（$40、15,000クレジット、アプリ画面最大3,700枚）、Ultra（$99、37,400クレジット、アプリ画面最大9,200枚）があります。チーム向けのTeam（月額エディターシート1席あたり$10、2席以上、各席2,500クレジット、アプリ画面最大600枚、閲覧者は無料）もあります。追加購入したクレジットは期限切れにならず、どのアカウントでも利用できます。$10で5,000クレジット（アプリ画面最大1,200枚）、$25で10,000クレジット（アプリ画面最大2,400枚）、$50で25,000クレジット（アプリ画面最大6,100枚）です。

プランと追加購入：https://svglab.app/billing 。クレジットと使用状況：https://svglab.app/usage 。

よくある質問

APIキーは必要ですか？ いいえ。上記のすべてのアプリでサインインできます。SVG Labのサインインページが開いたら、「Approve」を押すだけで接続できます。APIキーは、コマンドラインアプリやブラウザーのないマシン向けの代替手段にすぎません。

SVG Labをタブで開いたままにする必要がありますか？ いいえ。SVG Labを開いておく必要はなく、入力するコードもありません。SVG Labは独自のサーバー上でDesign Engineを実行します。アシスタントが作成したものはすべて「My Projects」に保存され、SVG Labを開けばすぐに利用できます。

料金はいくらですか？ SVG Labはクレジット制です。すべてのSVG Labアカウントには、お試し用として100クレジット（アプリ画面最大24枚）が一度だけ付与されます。フォームへの入力は不要です。ツールの呼び出しは1クレジット、参考画像の検索は2クレジットで、失敗した呼び出しには料金がかかりません。その後は、プランに応じて毎月クレジットが追加されます。Starter（月額$7、2,500クレジット、アプリ画面最大600枚）、Plus（$20、7,400クレジット、アプリ画面最大1,800枚）、Max（$40、15,000クレジット、アプリ画面最大3,700枚）、Ultra（$99、37,400クレジット、アプリ画面最大9,200枚）があります。チーム向けのTeam（月額エディターシート1席あたり$10、2席以上、各席2,500クレジット、アプリ画面最大600枚、閲覧者は無料）もあります。追加購入したクレジットは期限切れにならず、どのアカウントでも利用できます。$10で5,000クレジット（アプリ画面最大1,200枚）、$25で10,000クレジット（アプリ画面最大2,400枚）、$50で25,000クレジット（アプリ画面最大6,100枚）です。プランと追加購入については、https://svglab.app/billing をご覧ください。

作業内容はどのアカウントに保存されますか？ 「Approve」を押してサインインしたSVG Labアカウントです。無料クレジット、プラン、追加購入分が適用されるよう、毎回同じアカウントを使用してください。

複数のアプリを接続できますか？ はい。好きなだけアプリを接続できます。最大2つのAIセッションが、同じSVG Labアカウント上で同時にデザインできます。それぞれ別のアートボードグループを使用し、その間もプロジェクトの残りの部分で作業を続けられます。

アプリの接続を解除するにはどうすればよいですか？ SVG Labを開き、アカウントメニュー（右上のメールアドレス）から「SVG Lab MCP」を選択します。「Connected apps」の下にある対象アプリの横で「Disconnect」を押してください。接続はすぐに停止します。

インストールするパッケージや、別のMCPサブドメインはありますか？ いいえ。インストールするものはなく、mcp.svglab.appもありません。サーバーアドレスはhttps://svglab.app/mcpのみです。

最初のリクエストが遅いです。 正常です。最初のデザイン工程でDesign Engineが起動するため、10～30秒かかることがあります。

その他の回答とトラブルシューティング：https://svglab.app/mcp-setup 。解決しない場合は、利用しているアプリと正確なメッセージを添えて[email protected]までメールでお問い合わせください。

リンク

• ウェブサイト：https://svglab.app/mcp-server
• AIアプリを接続：https://svglab.app/mcp-server#connect
• セットアップガイド：https://svglab.app/mcp-setup
• プランと追加購入：https://svglab.app/billing
• 使用状況：https://svglab.app/usage
• llms.txt：https://svglab.app/llms.txt
• MCPサーバーカード：https://svglab.app/.well-known/mcp/server-card.json
• 公式MCP Registryのエントリー app.svglab/svglab：https://registry.modelcontextprotocol.io/v0.1/servers?search=app.svglab

このリポジトリ内のファイル

パス	内容
configs/	クライアントごとのすぐに使える設定ファイル
skills/svglab-mcp/SKILL.md	エージェントスキル：SVG Lab MCP の追加、サインイン、検証を行います。npx skills add ottoman9/svglab-mcp でインストールできます
server.json	参照用の公式 MCP Registry マニフェストのコピー
LICENSE	Creative Commons Attribution 4.0 International

ライセンス

このリポジトリ内のドキュメント、設定ファイル、スキルは、CC BY 4.0 の下でライセンスされています。サンプル画像は svglab.app でホストされており、このリポジトリには含まれていません。SVG Lab 自体はホスト型サービスであり、サーバーコードはここでは公開されていません。