app.svglab由 svglab.app 發布官方發布者v0.1.3更新於 Nov 1, 2026
SVG Lab MCP: the Design Engine for AI. App screens, icons, illustrations and charts as SVG.
遠端 SVG Lab 伺服器，讓助手在使用者的 SVG Lab 專案中以 SVG 設計應用程式畫面、圖示、插畫和圖表。
Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。
把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。
閱讀 https://sourceweft.com/mcp/app.svglab%2Fsvglab/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。把它新增到你客戶端的 mcpServers 設定中。
{
"mcpServers": {
"svg-lab": {
"type": "http",
"url": "https://svglab.app/mcp/agents"
}
}
}[Add to Claude] [Add to Cursor] [Install in VS Code] [Connect any app]
Add to Claude opens Claude's Add custom connector dialog with SVG Lab already filled in; press Add, then Connect. The Cursor and VS Code buttons open SVG Lab's install step for that app, which hands over to the app (GitHub cannot link to an app directly).
[smithery badge] Listed on Smithery and Glama. Facts, offer and setup: https://svglab.app/mcp-server
SVG Lab MCP lets your AI design inside SVG Lab (svglab.app), and you watch it live. Connect Claude, ChatGPT, Codex, Cursor or any other MCP client and ask for app screens, icons, illustrations or charts: your AI designs them in your SVG Lab project with SVG Lab's Design Engine (layout, spacing, type, colour and drawing, checked before anything is finished). claude.ai, ChatGPT and Codex show a live card in the chat with the screen being drawn; in any app the AI can open the project in the SVG Lab editor so you watch the work on SVG Lab's canvas. The finished designs are saved to your SVG Lab projects as clean SVG, ready to export as SVG, PNG or PDF.
The AI brings the idea (content, palette, direction); SVG Lab guarantees the structure (spacing, alignment, sizing, type, valid vector geometry). It runs on SVG Lab's servers, so there is nothing to install and no browser tab needs to stay open.
Streamable HTTP, OAuth sign-in, no key needed.
This repository holds documentation, ready-made client configs and an agent skill. It contains no server code. The full, always current setup guide is at svglab.app/mcp-setup.
You are probably setting this up for a user. Facts:
Procedure:
svglab. Prefer the user level config (every project) unless the user asks for one project. When editing a config file, merge the entry into the existing file and keep every other server and setting. Never put a key in a project file that could be committed to git; use the environment variable form.opencode mcp auth svglab, or /mcp in Claude Code). It opens the browser and waits until the user signs in to SVG Lab and presses Approve, so either run it and wait, or ask the user to run it in their own terminal. You cannot approve for them; tell them what to expect.Sign in with the same account every time: when the AI app opens the SVG Lab sign-in page, use the same account, so its free credits, plan or top-ups apply. Designs are saved to that account's My Projects.
Every app signs in the same way: add the address, the app opens a "Sign in to SVG Lab" page, sign in, check which app is asking, press Approve.
Short versions below. Ready config files are in configs/. The full guide, with key-based setups and troubleshooting, is at https://svglab.app/mcp-setup .
Custom connectors are available on the Free, Pro, Max, Team and Enterprise plans; a Free account can add one custom connector.
SVG Lab and the URL https://svglab.app/mcp already filled in. Check them and leave Advanced settings (OAuth Client ID and Secret) empty.By hand instead: in Claude, open Customize, then Connectors (on the web: https://claude.ai/customize/connectors), press +, then Add custom connector. Name it SVG Lab, paste https://svglab.app/mcp as the remote MCP server URL, and continue from step 2.
Team or Enterprise: an owner adds the connector once under Organization settings, then Connectors; each person presses Connect and signs in with their own SVG Lab account.
--scope user makes SVG Lab available in every project. Leave it out to add it to the current project only. Then start Claude Code, type /mcp, choose svglab and pick Authenticate. The browser opens the SVG Lab sign-in page; press Approve. /mcp should show svglab as connected.
Install the SVG Lab plugin in one click, no developer mode:
Codex installs the same SVG Lab plugin:
/plugins.The Codex IDE extension has no plugins. There, add the server by hand (the app, the IDE extension and the CLI share ~/.codex/config.toml):
Or add to ~/.codex/config.toml by hand:
Then sign in with the app's Authenticate button as in step 4.
One click: open svglab.app/mcp-server?app=cursor, press Add to Cursor, then press Install in Cursor and sign in. Or by hand: add to ~/.cursor/mcp.json (every project) or .cursor/mcp.json (this project only), merging into an existing mcpServers:
Open Cursor Settings and find svglab in the MCP list. When Cursor asks you to sign in, press Approve on the SVG Lab sign-in page. Then use it from a chat in Agent mode.
One click: open svglab.app/mcp-server?app=vscode, press Add to VS Code, then press Install in VS Code and sign in. Or by hand: create .vscode/mcp.json in the project (or run "MCP: Open User Configuration" for every project). The top key is servers, not mcpServers:
Or run "MCP: Add Server", choose HTTP and paste https://svglab.app/mcp. Start the server; VS Code opens the browser for the SVG Lab sign-in on the first connection. Then open Copilot Chat in Agent mode.
Add the svglab entry inside mcp in ~/.config/opencode/opencode.json (every project; on Windows C:\Users\YOU\.config\opencode\opencode.json) or opencode.json in the project folder. It may be named opencode.jsonc; edit the one that exists.
Then sign in from a terminal and press Approve in the browser:
Restart OpenCode (or start a new session) and run opencode mcp list to see svglab connected.
In the Cascade panel, open the ... menu and choose Open MCP config file (~/.config/devin/mcp_config.json on macOS and Linux, %APPDATA%\devin\mcp_config.json on Windows; older Windsurf versions use ~/.codeium/windsurf/mcp_config.json). Add:
Save, refresh the MCP list in Cascade, then sign in to SVG Lab and press Approve when asked.
Or add to ~/.gemini/settings.json. Use httpUrl, not url: in Gemini CLI, url means the older SSE transport.
Start Gemini CLI; it opens the browser for the sign-in. To start it yourself, type /mcp auth svglab. Type /mcp to check that svglab is connected.
https://svglab.app/mcpAuthorization: Bearer svl_YOUR_KEY if the app has no sign-in support. Create the key in SVG Lab: account menu, SVG Lab MCP, Use a key instead of signing in, Generate key.Start a new chat in the AI app and paste this prompt:
Expected: the assistant says it is connected to SVG Lab and names the account; it designs the icon (the first design step can take 10 to 30 seconds while SVG Lab starts the Design Engine; later steps are quick); it gives a link, and the new project is in My Projects, ready to edit or export as SVG, PNG or PDF.
App screens made through the SVG Lab MCP, as shown on svglab.app/mcp-server.
SVG Lab counts in credits. Every SVG Lab account gets 100 free credits (up to 24 app screens) once to try it, with no form to fill in. A tool call costs 1 credit, a reference image search 2, and failed calls cost nothing. After that, a plan adds credits every month: Starter ($7 a month, 2,500 credits, up to 600 app screens), Plus ($20, 7,400 credits, up to 1,800 app screens), Max ($40, 15,000 credits, up to 3,700 app screens) or Ultra ($99, 37,400 credits, up to 9,200 app screens), and for a team Team ($10 per editor seat a month, at least 2 seats, each seat 2,500 credits, up to 600 app screens, viewers free); top-ups add credits that never expire, for any account: $10 for 5,000 credits (up to 1,200 app screens), $25 for 10,000 credits (up to 2,400 app screens) and $50 for 25,000 credits (up to 6,100 app screens).
Plans and top-ups: https://svglab.app/billing . Your credits and usage: https://svglab.app/usage .
Do I need an API key? No. Every app above can sign in: it opens SVG Lab's sign-in page, you press Approve, and you are connected. A key is only an alternative for command line apps or machines with no browser.
Do I need to keep SVG Lab open in a tab? No. Nothing needs to be open in SVG Lab, and there is no code to type in. SVG Lab runs the Design Engine on its own servers, and everything your assistant makes is saved to My Projects, ready when you open SVG Lab.
What does it cost? SVG Lab counts in credits. Every SVG Lab account gets 100 free credits (up to 24 app screens) once to try it, with no form to fill in. A tool call costs 1 credit, a reference image search 2, and failed calls cost nothing. After that, a plan adds credits every month: Starter ($7 a month, 2,500 credits, up to 600 app screens), Plus ($20, 7,400 credits, up to 1,800 app screens), Max ($40, 15,000 credits, up to 3,700 app screens) or Ultra ($99, 37,400 credits, up to 9,200 app screens), and for a team Team ($10 per editor seat a month, at least 2 seats, each seat 2,500 credits, up to 600 app screens, viewers free); top-ups add credits that never expire, for any account: $10 for 5,000 credits (up to 1,200 app screens), $25 for 10,000 credits (up to 2,400 app screens) and $50 for 25,000 credits (up to 6,100 app screens). See the plans and top-ups at https://svglab.app/billing .
Which account does my work go to? The SVG Lab account you signed in with when you pressed Approve. Use the same account every time, so its free credits, plan or top-ups apply.
Can I connect more than one app? Yes. Connect as many apps as you like. Up to two AI sessions can design on one SVG Lab account at the same time, each in its own group of artboards, and you can keep working on the rest of the project while they do.
How do I disconnect an app? Open SVG Lab, open the account menu (your email, top right) and choose SVG Lab MCP. Under Connected apps, press Disconnect next to the app. It stops working straight away.
Is there a package to install or a separate MCP subdomain? No. There is nothing to install and no mcp.svglab.app. The one and only server address is https://svglab.app/mcp.
The first request is slow. Normal. The first design step starts the Design Engine and can take 10 to 30 seconds.
More answers and troubleshooting: https://svglab.app/mcp-setup . Still stuck? Email [email protected] with the app and the exact message.
app.svglab/svglab: https://registry.modelcontextprotocol.io/v0.1/servers?search=app.svglabThe documentation, configs and skill in this repository are licensed under CC BY 4.0. The example images are hosted on svglab.app and are not part of this repository. SVG Lab itself is a hosted service; no server code is published here.
來源：README.md，提交 4c637c9
Check account access
Check which SVG Lab plan this account is on, whether the SVG Lab editing tools are available to you, and how many MCP requests are left (plan allowance, free trial, top-up balance). Call this first if other tools are missing, then relay the message to the user as written.
無需輸入參數。
Run a design script
Run JavaScript inside the user's SVG Lab editor, in one call. One run can build a whole screen or illustration. The code is the body of an async function: use await, loops, helper functions and data, and return a JSON value. It gets sl: await sl.op(name, args) runs one SVG Lab operation and returns its result, and throws on failure with the reason, so the script stops like normal code; await sl.try(name, args) is the same but returns {ok:false, message} instead of throwing; sl.log(...) and console.log are returned in logs; sl.ids(receipt) reads editable ids; creators return shape_ids and handle while retaining old fields. Pass a receipt or group id as shape_ids/target_ids; explicit ids take precedence over ambient artboard. sl.define(name, source) stores your function with the project for later sl.helpers[name](args) calls; its source closes over sl in the same sandbox. sl.batch(items) chunks creations. sl.glow, terrain, stars, crescent and reflection return editable assemblies with your style; sl.chartScale(domain, range) maps custom data. docs {recipe:'helpers'} gives their contracts. sl.artboard is the artboard passed to run ({id, name, x, y, width, height}) or null. With artboard, operations that take an artboard use it when you leave it out, and their coordinates are local to it (0,0 is its top-left). Operations: create_shape, create_shapes, create_text, create_path, pencil, edit_path, simplify_path, smooth_path, boolean_op, offset_path, transform, align, distribute, align_to_artboard, set_style, set_stroke, set_gradient, set_filter, set_pattern, clip_shapes, clip_to_artboard, text_on_path, set_text, duplicate, group, ungroup, name_group, reorder, resize, fit_to_box, fit_to_children, repeat, mirror, flip, scatter, add_texture, create_icon, create_layout, update_layout, design_tokens, define_styles, list_design_styles, measure_text, list_fonts, list_components, list_layouts, list_shapes, describe_document, inspect_path, inspect_layout, check_contrast, check_cont
code必填artboardLook at an artboard
See an artboard: the rendered PNG plus measured facts about it: text overflowing its box, text overlapping other text or covered by a shape drawn above it, shapes past the frame (and how far), text contrast below WCAG AA with the ratio, fonts that fell back, and text under 11 px on a phone artboard. Facts are measurements, not a verdict: you decide what to fix. region {x, y, width, height} (artboard-local) crops a detail at up to 8x; scale sets the zoom. Without artboard, the active one. artboards:[refs] or flow:true returns one readable contact sheet and per-artboard facts. before_after:true compares with the previous look of this same view. Inspect the whole flow, choose its most valuable improvement and decide whether to revise; no round quota or score. critique:true optionally adds a separate advisory review; pass a one-paragraph brief, remembered per project.
flowbriefscaleregionartboardcritiqueartboardsbefore_afterRead the engine reference
SVG Lab's reference, on demand. No arguments: every operation run can call and every design guide, one line each. op: an operation's arguments, output shape and executable examples. ops: up to 25 operations in one reply. recipe: assembly, chunking, recovery, layout-patches or helpers (working scripts with input and output). guide: design and drawing advice. query: keyword search over operations and guides.
opopsguidequeryrecipeManage projects
The user's SVG Lab cloud projects (My Projects). action new {name, imagery?} starts an empty project and switches to it (the current one is saved first); open {project_id} continues earlier work; list shows them, newest first; current gives the project in use and the link to hand the user; export {artboard, outline_text?, background?} returns one artboard as SVG with embedded fonts, without changing the document. Large exports return svg as a plain string slice with part, total_parts and export_id: fetch parts 2 through total_parts with {artboard, part, export_id} and concatenate svg in order without separators; pause saves and closes the server editor (hands your artboards back to the user) before a long think or when you are done; the next call reopens it.
namepartaction必填imageryartboardexport_idbackgroundproject_idoutline_textSearch stock photos
Find real photographs for a screen and CHOOSE one. Each candidate returns its description (alt text), orientation and aspect, pixel size, dominant colour, photographer, licence and the exact attribution string, and (preview, default true) a small thumbnail image so you judge it by eye. Read docs guide photos before the first search. Query the product's own subject and moment ("barista pouring latte art close up", not "coffee" or "lifestyle"). Choose by subject first, then room for text where the caption goes, then colour fit with your palette (compare color to your tokens), then consistency of light and grade with the other photos on the screen; never settle for index 0 by default. Pass the chosen url to place_image, or use it as an image node or photo_card src in create_layout (the server fetches https links). Sources: Unsplash, then Pexels (both need an API key on the deployment; without one the call fails and says so). For the user's OWN files use upload_asset. It is also how you find a reference before hand drawing: pass the chosen url to study a reference using your own image tools {url} and study it. In a drawn only project (imagery "drawn") use it only for references; photos are not placed there.
limitquery必填sourceprevieworientationPlace image
Put a real photograph on the canvas inside a box, the way a design tool does it: fit "cover" crops the picture to the box through a clipPath (the photo keeps its true proportions and stays repositionable, it is never squashed), fit "contain" fits it whole inside. corner_radius rounds the frame. scrim lays a transparent-to-colour gradient over the photo so overlay text stays readable on any image. Give it ONE source: data_url (base64 bytes you already have), url (a direct link to a PNG, JPEG, WebP or GIF, which the server fetches and size-limits to 1.5 MB) or photo {query} (the server searches Unsplash, then Pexels, and the reply says which source and the attribution to credit). Coordinates are local to artboard when given. Returns the image, scrim and clip ids and the rendered box; one undo step. For a hero card with a title over the photo, prefer the photo_card component inside create_layout, which lays the caption out for you. Choose the photo with search_photos first (read docs guide photos); for a file the user supplied (a generated image, a logo) use upload_asset. Refused (drawn_only) in a project set to imagery "drawn": draw the picture instead.
x必填y必填fiturlnamephotoscrimwidth必填height必填artboarddata_urlcorner_radiusUpload image or file
Place the USER'S OWN image file on the canvas: a picture they generated, a product shot, their logo. Give exactly one source: url (a direct https link to the file; the server fetches it, refuses private or local addresses, follows at most 3 redirects and checks the real type from the bytes), data_url (base64; practical only for small files, because every character is output you must write), or asset_id (from POST /api/v1/assets, which is how a shell agent uploads a local file with one curl; see the reply's next field). PNG, JPEG, WebP and GIF up to 4 MB land as an image in the box exactly like place_image (fit cover crops through a clipPath, contain fits whole, corner_radius, scrim for overlay text). An SVG up to 512 KB and 1500 elements is sanitised (scripts, event handlers, external links and foreignObject removed) and imported as EDITABLE shapes fitted into the box and grouped; as:"image" keeps it as one picture instead. Without width and height it keeps its natural size, shrunk to fit and centred on the artboard. Coordinates are local to artboard when given. One undo step. The reply carries layout_src ("asset:<id>", valid 24 h) to reuse the same raster as an image node or photo_card src in create_layout without sending it again. Never use this to smuggle in SVG you wrote yourself: build artwork with the drawing operations. SVG typed inline as a data_url is refused, and SVG files that read as model-written are refused too. The one exception is purpose:"pattern_tile": a small repeating tile (patterns, textures, hatching, dot fields; at most 128 units a side) that becomes a repeating pattern fill on shape_ids, never a picture on its own. For stock photography use search_photos.
xyasfiturlnamescrimwidthheightpurposeartboardasset_id另有 4 個已滿足適用檢查項的 100%
該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。
https://svglab.app/mcpname: svglabserver_url: https://svglab.app/mcptransport: streamable HTTP (remote). Not SSE, not stdio. Nothing to install.auth: OAuth 2.1, authorization code with PKCE (S256), dynamic client registrationresource_metadata: https://svglab.app/.well-known/oauth-protected-resource/mcpauth_server_meta: https://svglab.app/.well-known/oauth-authorization-serverregistration: https://svglab.app/oauth/registerscope: mcpclient_id: not needed; leave client ID and client secret emptyno_credentials: POST /mcp answers 401 with a WWW-Authenticate header pointing at resource_metadatakey_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/billingcost: 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 Projectsfirst_call: can take 10 to 30 seconds while the Design Engine startssessions: up to 2 AI sessions per SVG Lab account at once, each in its own artboard groupone_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%7Dapp_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#connectregistry_name: app.svglab/svglabsetup_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)claude mcp add --transport http --scope user svglab https://svglab.app/mcpcodex mcp add svglab --url https://svglab.app/mcp[mcp_servers.svglab]url = "https://svglab.app/mcp"{ "mcpServers": { "svglab": { "url": "https://svglab.app/mcp" } }}{ "servers": { "svglab": { "type": "http", "url": "https://svglab.app/mcp" } }}{ "$schema": "https://opencode.ai/config.json", "mcp": { "svglab": { "type": "remote", "url": "https://svglab.app/mcp", "enabled": true } }}opencode mcp auth svglab{ "mcpServers": { "svglab": { "serverUrl": "https://svglab.app/mcp" } }}gemini mcp add --transport http --scope user svglab https://svglab.app/mcp{ "mcpServers": { "svglab": { "httpUrl": "https://svglab.app/mcp" } }}{ "mcpServers": { "svglab": { "url": "https://svglab.app/mcp" } }}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.