Professional next-generation AI-first vector graphics tool
"Illustmaker"

One line of code, vector designs come alive.
A simple HTTP JSON API (102 methods total) you can call from AI agents, server-side code, or cron — anywhere.
Realize whatever you envision.

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 an object

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":"ellipse","x":200,"y":150,"w":400,"h":300,"fill":"#4a9eff"}
  }'

3. Export SVG

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

4. Open in the browser (let the user edit)

Open open_url in a browser and the user can continue editing by hand.

Authentication / API key

The API can be used anonymously, but the rate limit is strict (30 req/min). For continued use we recommend issuing an API key.

Issuing an API key

curl -X POST https://asi.co.jp/illustmaker/api/keys.php \
  -H 'Content-Type: application/json' \
  -d '{"action":"issue","email":"you@example.com","purpose":"my_project"}'

{
  "ok": true,
  "api_key": "im_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "tier": "free",
  "rate_limit_per_min": 100
}

The issued API key is shown only once. Store it somewhere safe.

Usage

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -H 'X-API-Key: im_xxxxxxxxxx' \
  -d '{"method":"illust.health"}'

Rate limit tiers

Status check & revocation

# info
curl -X POST https://asi.co.jp/illustmaker/api/keys.php -H 'Content-Type: application/json' \
  -d '{"action":"info","key":"im_xxx"}'
# revoke
curl -X POST https://asi.co.jp/illustmaker/api/keys.php -H 'Content-Type: application/json' \
  -d '{"action":"revoke","key":"im_xxx"}'

Limits

Have AI design a logo

Prompt Claude/Cursor etc. → AI generates SVG code → hand it to MCP and open it in the browser. The first draft is in your hands in seconds.

1. Prompt the AI with "Sushi restaurant logo, Japanese modern, red and black"
2. The AI calls illust.create_session → illust.add_svg or individual add_ellipse/add_text
3. An open_url is returned, open it in the browser
4. Human fine-tunes → export SVG/PNG/PDF

Mass-produce 100 food labels

One template + CSV/JSON generates labels for 100 products in 2 seconds. Variable Data Printing for food factories, restaurants, and craft breweries.

1. Create template: create_session → border/logo/color bar via add_object
2. Add variable text: {{name}}{{net}}{{expiry}}
3. Extract array from product DB/CSV
4. batch_render with output:"pdf-imposition" to generate an A4 imposed PDF in one shot
5. Submit directly to a print shop

Bulk export price POPs as PDF

Supermarket sale POPs, restaurant price tags, retail show cards. Generate 30 PDFs at once from a CSV of prices and product names.

1. Create a POP template (red "Sale" ribbon + product image + price)
2. Build an array of product name, regular price, and sale price from POS or CSV data
3. batch_render takes you all the way to a print-ready PDF

Generate per-article OGP images

Generate SNS thumbnails for 100 blog posts at once with consistent design. Just swap title and author name.

1. Create a 1200x630 template (background + brand logo + variable title)
2. Extract a {title, author} array from your blog DB
3. batch_render with output:"png-zip" to get PNGs in bulk
4. Auto-place on each article page

Generate 10 logo variants for A/B testing

Generate 10 variants with different palettes/fonts for the same company name → compare side by side → pick the best one and refine.

1. Create a template (company name + logo mark)
2. Combine suggest_palette 12 themes x suggest_font 8 purposes
3. batch_render bulk-generates 10 color variants
4. Compare side by side in client / Slack / Notion

Data → auto-diagrammed graph SVG

Hand a sales CSV/JSON to the AI and it draws bar/pie/line charts directly as SVG. Embed straight into presentation slides.

1. Pass the data array to the AI and prompt "turn this into a bar chart SVG"
2. The AI computes properties → places chart elements via add_object (rect) and add_text
3. export_pdf for a presentation-ready PDF

Mass-produce numbered business cards & tickets

Mass production of event tickets, reception slips with QR codes, business cards — anything with sequential numbers and individualized info.

1. Create a template (QR position + serial number field + personal info fields)
2. Add variable text {{name}}{{qr_url}}{{seat_no}}
3. Extract array from attendee DB
4. batch_render with imposition places 10 tickets per A4 sheet → print

Product catalog printing

Auto-typeset EC / wholesale product catalogs from your product DB. All four elements — image + SKU + price + features — for every product.

1. Create a template for one catalog page
2. Use illust.import_from_url to fetch product images by URL
3. Loop the whole product DB → batch_render
4. Lay out 2x4=8 products per A4 portrait and print

Claude Desktop / Cursor / Cline (npm version)

Published: @illustmaker/mcp

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

If you get `failed to connect` on macOS / Homebrew: Claude Code and similar tools launch subprocesses with a minimal PATH, so npx may not be found. Specify the absolute path as shown below (check with which npx).

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

You can also call the HTTP API directly.

From the browser console (window.IM)

With the editor open, access all features from the browser DevTools console via window.IllustMaker (shorthand: IM).

IM.api()                          // list all methods
IM.newDocument({width:800,height:600})
IM.addRect({x:100,y:100,w:200,h:120,fill:"#4a9eff"})
IM.addText("Hello",{x:160,y:300,fontSize:48})
IM.exportSVG()                    // → string
IM.downloadSVG("logo.svg")

Object type

{
  "id": "o1",                    // required, alphanumeric
  "type": "rect"|"ellipse"|"text"|"path"|"line"|"poly"|"star"|"image"|"raw",
  "name": "label",               // display name
  "x": 0, "y": 0, "w": 100, "h": 100,
  "rotation": 0,                 // degrees
  "fill": "#000",                // color or {"stops":[...]}
  "stroke": "none",
  "strokeWidth": 0,
  "visible": true,
  "locked": false,
  // per-type:
  // text: text, fontSize, fontFamily, fontWeight, letterSpacing, lineHeight
  // path/poly/star: nodes:[{x,y,hIn,hOut}], closed
  // line: x1, y1, x2, y2
  // image: href
  // raw: rawSvg (sanitized)
}

Accepted color formats

• HEX: #000, #ffffff, #00000080 (8 digits = alpha)
• RGB/RGBA: rgba(255, 0, 0, 0.5)
• HSL: hsl(120, 50%, 50%)
• Named: red, blue, currentColor
• Special: none, transparent
• Gradient: {"stops":[{"offset":0,"color":"#f00"},{"offset":1,"color":"#00f"}], "angle":0}