SVG Lab

SVG Lab MCP

“添加到 Claude”会打开 Claude 的“添加自定义连接器”对话框，其中已填好 SVG Lab；点击“添加”，然后点击“连接”。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 的设计引擎（布局、间距、字体、颜色和绘图，并在完成前进行检查），在你的 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

使用 Streamable HTTP，通过 OAuth 登录，无需密钥。

本仓库包含文档、现成的客户端配置和 Agent 技能，不包含服务器代码。完整且始终保持最新的设置指南位于 svglab.app/mcp-setup。

目录

• 面向 AI Agent
• 开始之前
• 快速设置：Claude · Claude Code · ChatGPT · Codex · Cursor · VS Code · OpenCode · Windsurf · Gemini CLI · 任意 MCP 客户端
• 检查是否正常工作
• 示例
• 访问权限
• 常见问题
• 链接
• 本仓库中的文件

适用于 AI Agent

你很可能正在为用户进行设置。请注意：

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 的工具。获得权限后会有数十种设计工具。如果只有一个工具（账户状态工具），说明连接正常，但账户暂时无法进行设计（100 个免费点数已用完，且没有套餐点数或充值点数、账户已暂停，或密钥已被替换）：请调用该工具，并将其消息转告用户。对于没有权限的账户，使用登录流程时通常会更早发现问题：SVG Lab 登录页面会提示免费点数已用完；用户仍可批准，之后账户状态工具会说明如何获取点数。
6. 测试。 运行检查是否正常中的测试提示词，并将其返回的项目链接提供给用户。第一个设计步骤可能需要 10 到 30 秒；这不代表失败。
7. 如果未获得权限， 请告知用户：“SVG Lab 已设置完成，但你的 SVG Lab 账户没有剩余 SVG Lab 点数：100 个免费点数已用完。请使用同一账户访问 https://svglab.app/billing 选择套餐或购买充值点数，之后无需进行其他设置即可使用。”

开始之前

1. 一个 SVG Lab 账户。使用 Google 账号或电子邮件链接，在 https://svglab.app/ 登录。
2. 试用无需付费：每个账户都会获得一次 100 个免费点数（最多可制作 24 个应用界面），无需填写表单（每次工具调用消耗 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 中。

所有应用的登录方式相同：添加地址，应用会打开“登录 SVG Lab”页面；登录后，确认是哪个应用发起了请求，再按下 Approve。

快速设置

以下是简短版本。可在 configs/ 中找到可直接使用的配置文件。完整指南（包含基于密钥的设置和故障排除）请访问 https://svglab.app/mcp-setup。

Claude（claude.ai 和 Claude Desktop）

Free、Pro、Max、Team 和 Enterprise 方案均可使用自定义连接器；Free 账户可以添加一个自定义连接器。

1. **一键添加：**打开 将 SVG Lab 添加到 Claude。Claude 会打开“添加自定义连接器”页面，并预先填入名称 SVG Lab 和 URL https://svglab.app/mcp。请检查这两项，并将“高级设置”（OAuth 客户端 ID 和 Secret）留空。
2. 按“添加”，然后按 SVG Lab 旁边的“连接”。登录 SVG Lab 并按“批准”。
3. 在聊天中，按左下角的 +，打开“连接器”，并确认 SVG Lab 已开启。

也可以手动添加：在 Claude 中打开“自定义”，然后选择“连接器”（网页版：https://claude.ai/customize/connectors），按 +，再选择“添加自定义连接器”。将名称设为 SVG Lab，粘贴 https://svglab.app/mcp 作为远程 MCP 服务 URL，然后继续执行第 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，再选择“Authenticate”。浏览器会打开 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。将 bearer token 和标头留空，然后按“保存”。
4. 在服务器列表的 SVG Lab 行中按“Authenticate”（位于齿轮图标旁、开关之前）。浏览器会打开 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 步所述，使用应用中的“Authenticate”按钮登录。

Cursor

一键添加：打开 svglab.app/mcp-server?app=cursor，按“添加到 Cursor”，然后在 Cursor 中按“安装”并登录。也可以手动添加到 ~/.cursor/mcp.json（适用于所有项目）或 .cursor/mcp.json（仅适用于此项目），并合并到现有的 mcpServers 中：

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

打开 Cursor 设置，在 MCP 列表中找到 svglab。当 Cursor 要求你登录时，在 SVG Lab 登录页面按“批准”。然后在 Agent 模式下的聊天中使用它。

VS Code（GitHub Copilot agent mode）

一键配置：打开 svglab.app/mcp-server?app=vscode，点击 Add to VS Code，然后点击 Install in VS Code 并登录。也可以手动配置：在项目中创建 .vscode/mcp.json（或运行“MCP: Open User Configuration”，以便用于所有项目）。顶层键是 servers，不是 mcpServers：

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

或者运行“MCP: Add Server”，选择 HTTP 并粘贴 https://svglab.app/mcp。启动服务；首次连接时，VS Code 会在浏览器中打开 SVG Lab 登录页面。然后在 Agent 模式下打开 Copilot Chat。

OpenCode

在 ~/.config/opencode/opencode.json 的 mcp 中添加 svglab 条目（适用于所有项目；Windows 上的路径为 C:\Users\YOU\.config\opencode\opencode.json），也可以添加到项目文件夹中的 opencode.json。文件也可能名为 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。请使用 httpUrl，而不是 url：在 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”或“remote”）。不是 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 并说出账户名称；它会设计图标（首次设计步骤可能需要 10 到 30 秒，因为 SVG Lab 正在启动 Design Engine；之后的步骤会很快）；它会提供链接，新项目也会出现在 My Projects 中，可随时编辑或导出为 SVG、PNG 或 PDF。

示例

通过 SVG Lab MCP 制作的应用界面，见 svglab.app/mcp-server。

## 访问

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（每位编辑者每月 $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 的登录页面，你点击“批准”即可完成连接。API 密钥只是命令行应用或无法使用浏览器的机器的替代方案。

我需要在标签页中一直打开 SVG Lab 吗？ 不需要。无需打开 SVG Lab，也无需输入代码。SVG Lab 会在自己的服务器上运行 Design Engine，助手创建的所有内容都会保存到“我的项目”，你打开 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（每位编辑者每月 $10，至少 2 个席位，每个席位有 2,500 个额度，最多可制作 600 个应用屏幕，查看者免费）。任何账户都可以购买额度包，添加的额度永不过期：$10 可购买 5,000 个额度（最多可制作 1,200 个应用屏幕），$25 可购买 10,000 个额度（最多可制作 2,400 个应用屏幕），$50 可购买 25,000 个额度（最多可制作 6,100 个应用屏幕）。订阅方案和额度包请参阅 https://svglab.app/billing。

我的作品会保存到哪个账户？ 保存到你点击“批准”时登录的 SVG Lab 账户。每次都使用同一个账户，这样才能使用该账户的免费额度、订阅方案或额度包。

我可以连接多个应用吗？ 可以。你可以连接任意多个应用。最多可以有两个 AI 会话同时在一个 SVG Lab 账户上进行设计，每个会话使用各自的画板组；在它们设计期间，你可以继续处理项目的其余部分。

如何断开应用连接？ 打开 SVG Lab，打开账户菜单（右上角的电子邮件地址），然后选择 SVG Lab MCP。在“已连接的应用”下，点击该应用旁边的“断开连接”。连接会立即断开。

我需要安装软件包，或使用单独的 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	Agent 技能：添加、登录并验证 SVG Lab MCP。使用 npx skills add ottoman9/svglab-mcp 安装
server.json	官方 MCP Registry 清单副本，供参考
LICENSE	知识共享署名 4.0 国际许可协议

许可证

此存储库中的文档、配置文件和技能均依据 CC BY 4.0 许可。示例图片托管在 svglab.app 上，不属于此存储库。SVG Lab 本身是一项托管服务；此处未发布任何服务端代码。