Developer & Agent Guide

How to Create Sketches with AI

Skissify is designed for AI agents. Fetch the manifest, build JSON, POST it -- get a beautiful hand-drawn sketch with a shareable URL. No UI interaction needed.

Fetch the manifest

GET the schema to understand all available element types, paper styles, and wobble settings.

fetch("https://skissify.com/api/manifest")
  .then(r => r.json())
  .then(manifest => {
    // manifest.schema.elementTypes
    // manifest.schema.paper
    // manifest.schema.wobble
    // manifest.examples
  });

Construct the sketch JSON

Build a SketchData object with paper, tool, wobble settings, canvas size, and an elements array.

const sketch = {
  paper: "cream",
  tool: "ballpoint",
  inkColor: "#222",
  amplitude: 0.7,
  waves: 0.8,
  humanness: 0.15,
  width: 640,
  height: 420,
  elements: [
    { type: "rect", x: 50, y: 50, w: 200, h: 120 },
    { type: "text", x: 100, y: 115, text: "Hello", fontSize: 22 },
    { type: "arrow", x1: 250, y1: 110, x2: 380, y2: 110 },
    { type: "circle", cx: 440, cy: 110, r: 50 }
  ]
};

POST to save

Send the sketch to the API. You'll get back a slug for the shareable URL.

const res = await fetch("https://skissify.com/api/sketches", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title: "My AI Sketch",
    data: sketch
  })
});
const { slug } = await res.json();
// View at: https://skissify.com/s/{slug}

View or embed

Open the shareable URL, fork in the editor, or fetch the sketch data back via GET.

// View:  https://skissify.com/s/{slug}
// Edit:  https://skissify.com/editor?edit={slug}
// Fork:  https://skissify.com/editor?fork={slug}
// API:   GET https://skissify.com/api/sketches/{slug}

Live Example

This JSON produces the sketch shown on the right. Try it yourself by pasting into the editor.

sketch.json

{
  "paper": "cream",
  "tool": "ballpoint",
  "inkColor": "#333",
  "amplitude": 0.6,
  "waves": 0.7,
  "humanness": 0.12,
  "width": 400,
  "height": 300,
  "elements": [
    {
      "type": "rect",
      "x": 40,
      "y": 40,
      "w": 320,
      "h": 220
    },
    {
      "type": "line",
      "x1": 200,
      "y1": 40,
      "x2": 200,
      "y2": 260
    },
    {
      "type": "line",
      "x1": 40,
      "y1": 160,
      "x2": 200,
      "y2": 160
    },
    {
      "type": "window",
      "x1": 80,
      "y1": 40,
      "x2": 160,
      "y2": 40
    },
    {
      "type": "door-symbol",
      "x": 200,
      "y": 80,
      "w": 45,
      "swing": "right"
    },
    {
      "type": "text",
      "x": 80,
      "y": 110,
      "text": "Room A",
      "fontSize": 16
    },
    {
      "type": "text",
      "x": 80,
      "y": 210,
      "text": "Room B",
      "fontSize": 16
    },
    {
      "type": "text",
      "x": 260,
      "y": 150,
      "text": "Hall",
      "fontSize": 16
    },
    {
      "type": "dim",
      "x1": 40,
      "y1": 280,
      "x2": 200,
      "y2": 280,
      "label": "4.0m"
    },
    {
      "type": "dim",
      "x1": 200,
      "y1": 280,
      "x2": 360,
      "y2": 280,
      "label": "4.0m"
    }
  ]
}

Preview (cream / ballpoint)

MCP Tool Setup

Install the Skissify MCP server so Claude, Cursor, or any MCP-compatible agent can create sketches as a native tool call.

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "skissify": {
      "command": "npx",
      "args": ["-y", "skissify-mcp"]
    }
  }
}

Direct API (curl)

No MCP? Use the REST API directly:

curl -X POST https://skissify.com/api/sketches \
  -H "Content-Type: application/json" \
  -d '{
    "title": "My Sketch",
    "data": {
      "paper": "cream",
      "tool": "ballpoint",
      "inkColor": "#222",
      "amplitude": 0.7,
      "waves": 0.8,
      "humanness": 0.15,
      "width": 540,
      "height": 420,
      "elements": [
        {"type":"rect","x":50,"y":50,"w":200,"h":120},
        {"type":"text","x":100,"y":115,"text":"Hello"}
      ]
    }
  }'

Element Types Reference

All available element types and their properties. Every element must have a type field.

line

Wobbly hand-drawn line

x1, y1, x2, y2, color, strokeWidth

rect

Hand-drawn rectangle

x, y, w, h, color, fill, strokeWidth

circle

Hand-drawn circle

cx, cy, r, color, fill

arc

Hand-drawn arc (degrees)

cx, cy, r, startAngle, endAngle, color

arrow

Line with arrowhead

x1, y1, x2, y2, color

text

Caveat handwriting text

x, y, text, fontSize, color, fontFamily

dashed

Dashed line

x1, y1, x2, y2, color, dashLength

dim

Dimension line with label

x1, y1, x2, y2, label, color

window

Window symbol (wall ticks)

x1, y1, x2, y2, color

door-symbol

Door with swing arc

x, y, w, swing, color

door-slide

Sliding door (parallel lines)

x, y, w, color

stair

Staircase with treads

x, y, w, h, steps, color

opening

Wall opening with returns

x1, y1, x2, y2, color

column

Structural column

cx, cy, size, color, shape

Full machine-readable schema:https://skissify.com/api/manifest