SVG Lab

SVG Lab MCP: the Design Engine for AI.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

  • Account Status: 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). Ca
  • Run: 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 d
  • Look: 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), t

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

SVG Lab MCP: the Design Engine for AI. Connect Claude, ChatGPT, Codex or Cursor and SVG Lab's Design Engine gives your AI real design taste and drawing skills: ask for an app screen, an icon set, an illustration or a chart, and it builds finished SVG with layout, spacing, type and colour handled and checked before it hands it over. Your AI can zoom in and polish details, and every design saves to your SVG Lab (svglab.app) projects. No editor tab needs to be open.

Connect: add https://svglab.app/mcp as a custom connector and sign in (OAuth). No key needed.

Try it free: every SVG Lab account gets 100 free MCP requests, once, with no form. After that, the Plus and Max plans include a monthly allowance of requests, and top-ups add requests that never expire. One tool call is one request; failed calls are not counted. Plans and top-ups: https://svglab.app/billing

Setup guide for Claude, ChatGPT, Codex, Cursor, VS Code, OpenCode, Windsurf and Gemini CLI: https://svglab.app/mcp-setup

What it is not: SVG Lab is not SVGMaker, SVG Genie or any other SVG MCP. It is a remote MCP server over streamable HTTP at https://svglab.app/mcp with OAuth sign-in; it runs headless (no tab, no pairing code). It does not vectorize images, remove backgrounds or run over stdio, and it does not animate: animation is the separate SVG Animate MCP, in development.

Как подключить

Как подключить SVG Lab к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://svglab--svglab.run.tools

  1. Откройте Claude (сайт claude.ai или приложение для компьютера).
  2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
  3. Нажмите Добавить пользовательский коннектор (Add custom connector).
  4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
  5. В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить SVG Lab к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://svglab--svglab.run.tools

  1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
  2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
  3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
  4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
  5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
  6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить SVG Lab к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://svglab--svglab.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

  1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
  2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
  3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (8)

Технические названия из tools/list. Нужны только разработчикам.

account_statusCheck 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.
runRun 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
lookSee 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.
docsSVG 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.
projectThe 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.
search_photosFind 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.
place_imagePut 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.
upload_assetPlace 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.