The MCP connector lets an AI assistant work in your editor. You ask in plain words; the assistant draws, animates, changes settings and exports, and you watch it happen in the editor tab. Every change lands in the undo history.
MCP (Model Context Protocol) is the standard way assistants such as Claude connect to tools.
See also: Editor guide, Animating.
Set it up#
You need to be signed in to the editor.
- In the editor: Account > MCP connector…
- Press Make a connector URL. Copy the URL. It is shown only once.
- In Claude: Settings > Connectors > Add custom connector. Paste the URL and save. There is no sign-in step; the URL is the key.
- Keep the editor tab open and in front, with the connector switched on. A small MCP on badge sits in the bottom right corner.
Then ask, for example:
- "In svgmo, make a new 600 by 400 document and draw a blue circle that bounces."
- "Make the star spin for the whole timeline and fade the box in over the first second."
- "Turn on the grid, switch to outline view, and tell me what layers there are."
- "Give the card a blue to pink gradient at 45 degrees."
- "Make the ball travel along the curved line and turn to face the way it goes."
- "Export this as an animated SVG."
How it works#
assistant --MCP--> svgmo server <--waits for work-- your editor tab
- The assistant sends a tool call to the svgmo server, at your connector URL.
- Your editor, with the connector on, is waiting for work. It takes the call and carries it out with the same code the menus and tools use.
- The editor reports the outcome, and the server hands it back to the assistant.
Nothing runs on the server. Your document stays in your browser, as always. If the editor is closed or the connector is off, the assistant is told that no editor is connected.
What the assistant can do#
| Tool | What it does |
|---|---|
get_state |
The document, its layers with ids, the selection, the playhead and the tool. Compact by default; detail: full adds every value and all settings; ids narrows it to some layers |
render_frame |
A picture of the artboard, so the assistant can see its work. Several frames come back side by side as a labelled contact sheet |
get_document |
The whole document as JSON, with exact keyframes |
set_document |
Replace the whole document with JSON (validated first) |
new_document |
A new blank document in a new tab |
document_setup |
Name, artboard size, frame rate, length, background |
add_shape |
Rectangle, ellipse, polygon, star, line or a path from points |
import_svg |
Add the shapes of an SVG as layers |
trace_image |
Convert a picture (PNG, JPEG, WebP) to vector layers: colours, magic background remover, colours to remove, sampling, fit, specks, sharpen, smooth, straighten, corners |
update_layer |
Position, scale, rotation, opacity, size, corner radius, fill, stroke, dashes, trim, name, lock, hide, blend mode, parent, visible frames |
set_keyframes |
Animate a property by giving its value at several frames, with easing |
animate_layers |
The same animation on several layers at once, each starting a little after the one before. Values can be relative, so one description fits layers in different places |
remove_keyframes |
Remove a layer's keyframes at a frame |
set_gradient |
Linear or radial gradient fill: stops, angle, centre, radius; adjust or remove it |
set_motion_path |
Make a layer travel a curve: a starter route, your own points, or another layer's outline; timing, easing, turn to face the direction, repeat, reverse, remove |
delete_layers, duplicate_layers, reorder_layer, select_layers |
Manage layers |
list_presets, apply_motion_preset |
The 33 ready-made animations, with stagger |
playback |
Play, pause, move the playhead |
set_tool |
Any of the 13 tools |
set_settings |
Rulers, grid, transparency grid, bounding box, smart guides, outline, onion skin, presentation mode, tool strip, control bar, timeline, backdrop, open panel, auto-key, loop, speed, zoom, timeline zoom |
run_command |
Menu commands: undo, redo, arrange, flip, rotate, align, lock, hide, convert to path, split into shapes, keyframe timing, stagger, artboard fit and centre, and more |
export |
svgmo JSON, animated SVG (looping or once), Lottie JSON, the current frame as SVG, the project file |
batch |
Up to 100 operations in one request, in order, as a single undo step |
Units: positions and sizes are artboard pixels from the top-left, and a layer's x and y are its centre. Time is in frames. Colours are CSS colours; none removes a fill or stroke.
Speed#
Measured on a development machine, editor and server on the same computer:
| Time | |
|---|---|
| One tool call | about 55 ms |
One edit inside a batch |
about 10 ms |
| A picture of one frame | about 50 ms |
| A contact sheet of six frames | about 110 ms |
Over the internet, add the network time between the assistant, the server and your browser to each call. That is why batch matters: forty edits sent one by one pay that cost forty times; in a batch they pay it once.
An assistant works best when it looks first (get_state, render_frame), sends its changes together (batch, animate_layers), then looks again to check.
What it cannot do#
- It cannot draw freehand with the pointer. The assistant gives shapes as numbers and points, or as SVG, and does not drag the pen or pencil.
- It cannot read a picture from your disk.
trace_imagetraces a picture the assistant sends as data or as an https address; for a file on your computer, import it yourself and the assistant can work with the result. - It cannot save files to your disk.
exportreturns the content to the assistant, which can show or pass it on. Downloads through the File menu remain yours to do. - It cannot animate a gradient. The stops and angle are fixed and cannot be keyframed. The layer carrying it can still move, scale, rotate and fade.
Safety#
- Treat the URL as a secret. Anyone who has it can change the document in your open editor while the connector is on. Do not post it or commit it.
- With the switch off, the editor does not listen. With the tab closed, nothing can happen.
- The connector reaches only the editor. The tools above are the whole list, and it cannot read your account, your files or other browser tabs.
- You can replace or remove the URL at any time in the same dialog. The old one stops working at once.
- Each change the assistant makes is an ordinary edit, so Ctrl/⌘ + Z takes it back.
- The server stores a fingerprint of the URL's key and never the key itself.
If it does not work#
| The assistant says | Cause and fix |
|---|---|
| No editor is connected | Open the editor, sign in, and switch the connector on. Wait a few seconds and try again. |
| The editor did not answer in time | The tab is in the background and the browser has paused it, or the editor is busy. Bring the tab to the front. |
| Unknown connector key | The URL was replaced or removed. Make a new one and update it in the assistant's settings. |
| No layer with id … | The assistant used an old id. Ask it to call get_state again. |
Two tabs of the editor open at once both listen; whichever asks first gets the command. Keep one editor tab open while using the connector.
For developers#
The endpoint is POST /api/mcp/<key>: Model Context Protocol over Streamable HTTP, answering each request with JSON (no server-sent stream). It implements initialize, ping, tools/list and tools/call. Tool definitions are in apps/api/app/mcp_tools.json; what each tool does in the editor is in apps/web/app/editor/mcp/commands.ts. The server side, including the queue between the assistant and the editor, is apps/api/app/mcp.py.
A tool call waits up to 40 seconds for the editor. The queue between the assistant and the editor is looked at every 50 ms on each side. Sign-in must be configured on the server, because a connector belongs to an account.