Pro-grade next-gen AI-first vector editor
"Illustmaker"

A single line of code is enough to bring vector design to life.
A simple HTTP JSON API (102 methods) you can call from AI agents, server-side programs, or cron — anywhere you write code.
Anything you can imagine, Illustmaker can bring to reality.

Quick start

1. Create a session

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{"method":"illust.create_session","params":{"width":800,"height":600,"bg":"#ffffff"}}'

{
  "ok": true,
  "session": "abc123def456",
  "state": {"docW":800,"docH":600,"docBg":"#ffffff","objects":[]},
  "open_url": "https://asi.co.jp/illustmaker/?s=abc123def456"
}

2. Add objects

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{"method":"illust.add_object","session":"abc123def456","params":{"type":"rect","x":100,"y":100,"w":300,"h":200,"fill":"#ff9a01"}}'

3. Export

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{"method":"illust.export","session":"abc123def456","params":{"format":"svg"}}'

Authentication

The MCP API is currently open during beta and does not require an API key for typical usage. Heavy or commercial integrations should reach out at asi.co.jp/contact.

Rate limits

Sessions

Objects

Text & fonts

Layers & ordering

Layers are simple groups in Illustmaker. Use group/ungroup for grouping, set_order to change z-order. Objects can also be locked or hidden via update_object.

Export

Batch rendering

Generate many variants from a single template using batch_render.

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{
    "method": "illust.batch_render",
    "session": "abc...",
    "params": {
      "items": [{"name":"Soy sauce A"}, {"name":"Soy sauce B"}],
      "output": "pdf-imposition",
      "imposition": {"cols": 2, "rows": 4}
    }
  }'

Supported output modes: svg, svg-zip, png, png-zip, pdf-imposition.

Palette / font suggestions

Gallery (community)

After building a session, publish it to the public gallery, browse others' works, remix them as new editable sessions, and post threaded comments — all from your AI agent.

Gradient mesh / Brand kits / Live share (v4.0)

Gradient mesh

Brand kits

Save palette + fonts + asset URLs as one anonymous brand kit (owner_fp = sha256(ip|ua)).

Live share (read-only)

Issue a read-only URL for an in-progress session. Viewers see live updates via 3-second polling at /illustmaker/live/{token}. Valid 30 days.

Viewer comments on shared sessions (v4.1)

When a share link is issued with mode='comment', viewers can post spatial comments (with x/y annotation pins) directly on the live viewer page. Rate-limited to 20/hour per viewer.

Real-time collaborative editing (v5.0)

When a share link is issued with mode='edit', multiple users can join /illustmaker/live/{token} and edit the same canvas simultaneously — drawing, moving, and deleting objects together. HTTP long-polling with LWW (Last-Write-Wins) conflict resolution. Participant cursors, selections and per-object edit locks are displayed live.

Claude Desktop

Published on npm: @illustmaker/mcp

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "illustmaker": {
      "command": "npx",
      "args": ["-y", "@illustmaker/mcp"]
    }
  }
}

If you see "failed to connect" on macOS / Homebrew: Claude Code and similar tools spawn subprocesses with a minimal PATH that may not include /usr/local/bin/. Use an absolute path instead (find yours with which npx):

{
  "mcpServers": {
    "illustmaker": {
      "command": "/usr/local/bin/npx",
      "args": ["-y", "@illustmaker/mcp"]
    }
  }
}

Cursor

Add to ~/.cursor/mcp.json or your project's .cursor/mcp.json:

{
  "mcpServers": {
    "illustmaker": {
      "url": "https://asi.co.jp/illustmaker/api/mcp.php"
    }
  }
}

Cline

Use the MCP marketplace inside Cline and search for "illustmaker", or add manually via the same endpoint format as Cursor.

Browser console — window.IM

Open the editor at /illustmaker/app/ and drive it from DevTools:

// 5 lines: make a sushi-shop logo
IM.newDocument({width:600, height:600});
IM.addEllipse({cx:300, cy:300, rx:200, ry:180, fill:"#e74c3c"});
IM.addText("Sushi",{x:230, y:330, fontSize:80, fill:"#fff", fontWeight:900});
IM.exportSVG();  // returns SVG string

Object schema

Color formats

Color strings accept:

• Hex: #ff9a01 or #ff9a01ff
• RGB(A): rgb(255,154,1), rgba(255,154,1,0.8)
• HSL(A)
• Named colors: red, orange, transparent
• Gradient objects: {type:"linear", stops:[...], angle:45}