Vectorly

Model Context Protocol

Let AI agents
drive Vectorly.

Connect Claude Desktop, Claude Code, or any MCP client and design by conversation — draw, edit, transform, and export straight from the live canvas.

Connect a client How it works
Claude Desktop Claude Code Any MCP client

Setup

Connect a client in three steps

01

Register the server

Add vectorly to your MCP client's config.

{
  "mcpServers": {
    "vectorly": {
      "command": "/absolute/path/to/node",
      "args": ["/path/to/vectorly/mcp/server.js"],
      "env": { "VECTORLY_BRIDGE_TOKEN": "choose-a-token" }
    }
  }
}

Desktop use an absolute path to Node ≥ 18 — GUI apps don't see your shell's nvm. mcp/run.sh resolves one for you.

02

Reload the client

Claude Desktop: fully quit (⌘Q) and reopen — “vectorly” appears under Connectors. Claude Code: reconnect it with /mcp.

quit→relaunch→connected
03

Open the bridged editor

Open Vectorly with your token in the URL — the tab dials the server and this page's status turns live.

http://localhost:5173/?bridge=YOUR_TOKEN

Match the ?bridge= token must equal VECTORLY_BRIDGE_TOKEN. Add &unsafe-eval only if you want the JS escape hatch.

Capabilities

Anything you can do, an agent can do

25 tools across the whole editor surface — grouped below.

Draw & create

  • draw_shaperect · ellipse · line · polygon · star · text · path
  • import_svgplace any SVG art
  • get_svgexport the artboard as SVG

Edit & style

  • update_shapefill, stroke, geometry, text…
  • replace_shapeswap markup, keep id
  • delete_shapes
  • offset_path
  • outline_stroke

Transform & effects

  • transform_shapesmove · rotate · scale
  • repeat_opradial · grid · mirror
  • extrude_3d
  • run_commandgroup, z-order, more

Select & inspect

  • list_shapes
  • get_shape
  • get_selection
  • set_selectionids · all · none

Document & history

  • get_document
  • set_document
  • undo
  • redo

See & control

  • export_pngthe agent sees the canvas
  • export_jpg
  • status
  • list_commands
  • eval_jsgated escape hatch

Architecture

How it works

clientClaude Desktop / Code
→
stdiomcp/server.js
→
ws · 127.0.0.1token bridge
→
?bridgeeditor tab

A local Node server speaks MCP over stdio to your client and forwards each tool call to the running editor over a localhost WebSocket. Every mutating tool is exactly one undo step, so ⌘Z cleanly reverts an agent's action.

Security

Safe by default

01

Localhost only

The bridge binds to 127.0.0.1 — unreachable from other machines.

02

Token auth

Every connection presents a token (timing-safe compare); it never touches the MCP channel.

03

Origin-checked

Only a localhost page may connect — no drive-by from a random site.

04

Opt-in

Inert without ?bridge= — the bridge code isn't even loaded. eval_js needs a second flag.

FAQ

Common questions

Status says “Not connected”. Why?
One of three things: the tab isn't open with ?bridge=, the token doesn't match VECTORLY_BRIDGE_TOKEN, or two servers are fighting over the port. Call the status tool — it names the fix.
The server won't start from Claude Desktop.
Almost always Node. GUI apps launch with a bare PATH, so point command at an absolute path to Node ≥ 18, or use mcp/run.sh.
Can an agent undo its own work?
Yes — each tool call is a single undo step. Call undo, or press ⌘Z in the editor.
Is my work sent anywhere?
No. Everything runs on your machine over localhost. The server never phones home.