easels.dev

{
  "name": "get_document",
  "kind": "answer",
  "impl": "imperative",
  "description": "Read the design as HTML. Every element carries a data-easel id, which is the handle every other tool takes. Start here: the HTML is the document, not a summary of it, so whatever you see is exactly what will ship.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "artboardId": {
        "type": "string",
        "description": "Limit to one artboard. Omit for every artboard in the file."
      }
    }
  }
}

{
  "name": "get_guide",
  "kind": "answer",
  "impl": "imperative",
  "description": "How to use Easel well — layout rules, design taste, and the etiquette of sharing a document with a person. Call with topic \"overview\" before other tools; the other topics are layout, design, and turns.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "topic": {
        "type": "string",
        "enum": [
          "overview",
          "layout",
          "design",
          "turns"
        ],
        "description": "Which guide to fetch. Defaults to overview."
      }
    }
  }
}

{
  "name": "get_node",
  "kind": "answer",
  "impl": "imperative",
  "description": "One node in full: its tag, text, attributes, the CSS the document holds, and the box the browser actually laid it out at. Use this after a write to check what the layout really did — the children come back with their measured boxes too, so one call tells you whether a flex row really did sit its items side by side.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "The data-easel id."
      }
    },
    "required": [
      "id"
    ]
  }
}

{
  "name": "get_selection",
  "kind": "answer",
  "impl": "imperative",
  "description": "What the person at the keyboard has selected right now, and what they are looking at. Call this when they say \"this\" or \"that\" — it is how you find out what they mean."
}

{
  "name": "find_nodes",
  "kind": "answer",
  "impl": "imperative",
  "description": "Search the design by layer name, text content, or tag. Cheaper than reading the whole document when you already know what you are after.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "query": {
        "type": "string",
        "description": "Matched case-insensitively against name and text."
      },
      "tag": {
        "type": "string",
        "description": "Exact tag filter, e.g. \"button\"."
      }
    }
  }
}

{
  "name": "create_artboard",
  "kind": "act",
  "impl": "imperative",
  "description": "Add an empty artboard, which is one page of the design. Rarely needed: generate_design makes its own board for a new web page and stacks phone screens on the board they belong to. Give either a device name or an explicit size.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "device": {
        "type": "string",
        "enum": [
          "Desktop",
          "Laptop",
          "Tablet",
          "Phone"
        ],
        "description": "A size preset. Ignored if w and h are given."
      },
      "w": {
        "type": "number"
      },
      "h": {
        "type": "number"
      },
      "background": {
        "type": "string",
        "description": "Any CSS colour."
      },
      "page": {
        "type": "string",
        "description": "Which page it lands on. Defaults to the one showing."
      }
    }
  }
}

{
  "name": "manage_pages",
  "kind": "act",
  "impl": "imperative",
  "description": "Add, rename, delete or switch pages. A page is a named wall of artboards; every board stays addressable by id whichever page is showing, so you only need to switch when you want the person to see something.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "action": {
        "type": "string",
        "enum": [
          "add",
          "rename",
          "delete",
          "show"
        ]
      },
      "id": {
        "type": "string",
        "description": "The page, for rename, delete and show."
      },
      "name": {
        "type": "string",
        "description": "For add and rename."
      }
    },
    "required": [
      "action"
    ]
  }
}

{
  "name": "write_html",
  "kind": "act",
  "impl": "imperative",
  "description": "Insert markup you already have. For building a page, screen or section from a description use generate_design instead; this is for a small component, a fix, or a logo. Write an HTML fragment into a parent and it becomes real nodes the person can then select and drag. Use inline style attributes for CSS. Flow layout works: a div with display:flex lays its children out for real, so prefer flex and grid over positioning every child by hand. Position the fragment root with position:absolute plus left and top to place it on the artboard. Semantic tags are kept, so use h1, p, button and a rather than divs everywhere. Returns the ids created and the boxes the browser laid them out at.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "parentId": {
        "type": "string",
        "description": "Artboard or frame id to write into."
      },
      "html": {
        "type": "string",
        "description": "An HTML fragment. May have several roots."
      },
      "mode": {
        "type": "string",
        "enum": [
          "append",
          "replace"
        ],
        "description": "append adds to the parent; replace swaps its children. Defaults to append."
      }
    },
    "required": [
      "parentId",
      "html"
    ]
  }
}

{
  "name": "set_style",
  "kind": "act",
  "impl": "imperative",
  "description": "Patch CSS on one or more nodes. Keys may be camelCase or kebab-case, and an empty string removes a property — which is how you hand a width or height back to the browser. Returns the boxes after the browser has re-laid them out.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "style": {
        "type": "object",
        "additionalProperties": {
          "type": "string"
        },
        "description": "CSS declarations, e.g. { \"background\": \"#111\", \"borderRadius\": \"12px\" }."
      },
      "css": {
        "type": "string",
        "description": "Alternative to style: a declaration string like \"color: red; gap: 8px\"."
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "set_text",
  "kind": "act",
  "impl": "imperative",
  "description": "Replace a node's text content.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string"
      },
      "text": {
        "type": "string"
      }
    },
    "required": [
      "id",
      "text"
    ]
  }
}

{
  "name": "set_image",
  "kind": "act",
  "impl": "imperative",
  "description": "Point an image node at a URL or data URI. If you can generate or find an image, this is how it gets onto the canvas — Easel does not generate images itself, it shows the one you give it. Pass a node id for an existing image, or a parentId to create one.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "An existing image node."
      },
      "parentId": {
        "type": "string",
        "description": "Create a new image here instead."
      },
      "src": {
        "type": "string",
        "description": "https URL or data: URI."
      },
      "alt": {
        "type": "string"
      },
      "w": {
        "type": "number"
      },
      "h": {
        "type": "number"
      }
    },
    "required": [
      "src"
    ]
  }
}

{
  "name": "generate_image",
  "kind": "act",
  "impl": "imperative",
  "description": "Generate an image from a text prompt and place it on the canvas. It comes back as a data URI embedded in the document, so the export carries the picture rather than a link to it. Prefer set_image if you can make the image yourself — you will get a better one. Same prompt and seed gives the same image, so a retry is only different if you change something.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "prompt": {
        "type": "string",
        "description": "What the image should show."
      },
      "id": {
        "type": "string",
        "description": "An existing image node to fill."
      },
      "parentId": {
        "type": "string",
        "description": "Create a new image here instead."
      },
      "ratio": {
        "type": "string",
        "enum": [
          "1:1",
          "3:2",
          "2:3",
          "16:9",
          "9:16",
          "4:3",
          "3:4"
        ],
        "description": "Aspect ratio. Defaults to 1:1."
      },
      "w": {
        "type": "number",
        "description": "Node width in px. Defaults to the ratio."
      },
      "h": {
        "type": "number",
        "description": "Node height in px. Defaults to the ratio."
      },
      "x": {
        "type": "number",
        "description": "Offset inside the parent. Defaults to 24."
      },
      "y": {
        "type": "number"
      },
      "seed": {
        "type": "number"
      }
    },
    "required": [
      "prompt"
    ]
  }
}

{
  "name": "generate_svg",
  "kind": "act",
  "impl": "imperative",
  "description": "Generate a vector from a text prompt and place it on the canvas as real inline SVG — a div holding an <svg> element, not a raster and not an opaque blob. So the paths are readable, set_style on the wrapper's `color` recolours everything drawn with currentColor, and export_code hands back the markup. Good for icons, logos, marks and simple illustrations. Pass an existing svg node id to redraw it.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "prompt": {
        "type": "string",
        "description": "What to draw, e.g. \"moon icon in outline style\"."
      },
      "id": {
        "type": "string",
        "description": "An existing svg node to redraw."
      },
      "parentId": {
        "type": "string",
        "description": "Artboard or frame to draw into."
      },
      "ratio": {
        "type": "string",
        "enum": [
          "1:1",
          "3:2",
          "2:3",
          "16:9",
          "9:16",
          "4:3",
          "3:4"
        ],
        "description": "Aspect ratio of the drawing. Defaults to 1:1."
      },
      "w": {
        "type": "number",
        "description": "Node width in px. Defaults to the ratio."
      },
      "h": {
        "type": "number",
        "description": "Node height in px."
      },
      "x": {
        "type": "number",
        "description": "Offset inside the parent. Defaults to 24."
      },
      "y": {
        "type": "number"
      },
      "provider": {
        "type": "string",
        "description": "Which model: \"quiver:arrow-1.1\" (default, a dedicated vector model), \"quiver:arrow-1.1-max\", or \"openai\" / \"kimi\" / \"gemini\" to have a chat model write the markup. Only providers with a key configured are available."
      }
    },
    "required": [
      "prompt"
    ]
  }
}

{
  "name": "generate_design",
  "kind": "act",
  "impl": "imperative",
  "description": "The way to build. Give it what the person wants — \"a payment app for mobile\", \"landing page for a note taking app\", \"the checkout screen\", \"add a pricing section\" — and Easel designs it: it picks a real reference site for structure, follows the file's existing brand and colours, keeps a mobile app as phone screens (one under another on the same board), and lands everything as editable nodes with a live cursor. Do not write the html yourself and do not create an artboard first: a new web page gets its own artboard automatically, and a phone screen stacks below the last one. A mobile app landing as a phone shell centred on the Desktop board is the required result, not a mistake: never move it to a phone sized artboard or rebuild it. If this call returns while the cursor is still moving, the design is still landing; wait and call get_document rather than building anything. Call it once per page or screen. Returns a summary and the boards with what is on them. Use write_html only for a small component whose exact markup you already have.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "prompt": {
        "type": "string",
        "description": "What to design."
      },
      "artboardId": {
        "type": "string",
        "description": "Where it lands. Defaults to the first artboard."
      },
      "provider": {
        "type": "string",
        "description": "Which model: \"openai\", \"kimi\", \"gemini\", or \"variety\" to run every configured one at once and stack the results for comparison. Defaults to the first one with a key."
      },
      "x": {
        "type": "number",
        "description": "Offset inside the artboard. Defaults to a free row below the existing design."
      },
      "y": {
        "type": "number"
      }
    },
    "required": [
      "prompt"
    ]
  }
}

{
  "name": "generate_edits",
  "kind": "act",
  "impl": "imperative",
  "description": "Ask a design model to change what is on an artboard, by description: \"make the CTA green and bigger\", \"add a testimonials row under the pricing\", \"rewrite the hero copy for a bakery\". The model sees an outline of the artboard with every node id and answers with addressed operations (insert, replace, style, text, delete) that land through the same actions a person uses, as one undo step. Use this when the request refers to things already on the canvas; use generate_design for a new section from nothing, and set_style or set_text when you already know the exact change. Returns what was applied and the ids it touched.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "prompt": {
        "type": "string",
        "description": "The change, in words."
      },
      "artboardId": {
        "type": "string",
        "description": "Defaults to the artboard of the selection, then the first one."
      },
      "provider": {
        "type": "string",
        "description": "\"openai\", \"kimi\" or \"gemini\". Defaults to the first one with a key."
      }
    },
    "required": [
      "prompt"
    ]
  }
}

{
  "name": "list_comments",
  "kind": "answer",
  "impl": "imperative",
  "description": "The notes people have pinned to nodes, open ones first. Each carries the node id, that node's tag, name and text, and what was asked. This is the work queue: read a comment, look at its node with get_node, make the change with set_text, set_style, write_html or generate_edits, then call resolve_comment with a one line reply saying what you did.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "includeResolved": {
        "type": "boolean",
        "description": "Also return resolved ones. Default false."
      }
    }
  }
}

{
  "name": "add_comment",
  "kind": "act",
  "impl": "imperative",
  "description": "Pin a note to a node, as the agent: a question for the person, or a suggestion you did not act on. It shows as a pin on the canvas.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "node": {
        "type": "string"
      },
      "text": {
        "type": "string"
      }
    },
    "required": [
      "node",
      "text"
    ]
  }
}

{
  "name": "resolve_comment",
  "kind": "act",
  "impl": "imperative",
  "description": "Mark a comment done, with a one line reply that appears under the pin (\"Shortened to five words\", \"Set to #16a34a\"). Call it after the change has landed, not before.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string"
      },
      "reply": {
        "type": "string"
      }
    },
    "required": [
      "id"
    ]
  }
}

{
  "name": "set_tokens",
  "kind": "act",
  "impl": "imperative",
  "description": "Read or write the design tokens on an artboard. Tokens are real CSS custom properties, so once --brand exists you can use var(--brand) in any style on that artboard and changing the token restyles everything at once. Names may be given with or without the leading dashes. Pass an empty value to remove one, or omit tokens entirely to just read them.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "artboardId": {
        "type": "string",
        "description": "Defaults to the first artboard."
      },
      "tokens": {
        "type": "object",
        "additionalProperties": {
          "type": "string"
        },
        "description": "e.g. { \"brand\": \"#ff5c38\", \"radius\": \"14px\" }."
      }
    }
  }
}

{
  "name": "set_attributes",
  "kind": "act",
  "impl": "imperative",
  "description": "Change a node's HTML tag, its layer name, or its attributes (href, alt, placeholder, aria-label and so on). Changing the tag is how a div becomes an h1 without losing its style.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string"
      },
      "tag": {
        "type": "string",
        "description": "e.g. h1, p, button, a, section."
      },
      "name": {
        "type": "string",
        "description": "What the layers panel shows."
      },
      "attributes": {
        "type": "object",
        "additionalProperties": {
          "type": "string"
        },
        "description": "Merged into the existing attributes. Empty string removes one."
      }
    },
    "required": [
      "id"
    ]
  }
}

{
  "name": "delete_nodes",
  "kind": "transact",
  "impl": "imperative",
  "description": "Remove nodes and everything inside them. Undoable.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "duplicate_nodes",
  "kind": "act",
  "impl": "imperative",
  "description": "Copy nodes in place, alongside the originals. Returns the new ids.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "move_node",
  "kind": "act",
  "impl": "imperative",
  "description": "Reparent a node, or change its paint order among its siblings. A later sibling draws on top.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string"
      },
      "parentId": {
        "type": "string",
        "description": "New parent. Omit to keep the current one."
      },
      "before": {
        "type": "string",
        "description": "Insert ahead of this sibling. Omit for last."
      },
      "order": {
        "type": "string",
        "enum": [
          "front",
          "back",
          "up",
          "down"
        ],
        "description": "Reorder within the current parent instead of reparenting."
      }
    },
    "required": [
      "id"
    ]
  }
}

{
  "name": "group_nodes",
  "kind": "act",
  "impl": "imperative",
  "description": "Wrap siblings in a frame, or unwrap a frame back into its parent. Grouping is how you get a container you can then make a flex row.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "ungroup": {
        "type": "boolean",
        "description": "Unwrap the given frames instead."
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "select_nodes",
  "kind": "act",
  "impl": "imperative",
  "description": "Select nodes in the editor, which moves the person's selection and shows them the handles. Use it to point at what you are talking about instead of describing where it is.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "apply_effect",
  "kind": "act",
  "impl": "imperative",
  "description": "Apply a named visual effect, CSS gradient, or page texture — mesh, aurora, dawn, dusk, sunset, mint, ink, champagne, twilight, ember, ocean, bloom, haze, film grain, halftone, fluted and frosted glass, plus artboard fills like newsprint, kraft, linen, canvas_weave, fine_grain, coarse_grain, film_dust, grid, dot_grid, graph_paper, soft_wash, dawn_wash, marble, ascii_dither. Each one is plain CSS rather than a canvas, so it exports with the design and you can then tune any of its properties with set_style. Pass effect: null to clear. For a photograph as the fill, use set_background.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "effect": {
        "type": [
          "string",
          "null"
        ],
        "enum": [
          "mesh",
          "aurora",
          "dawn",
          "dusk",
          "sunset",
          "mint",
          "ink",
          "champagne",
          "twilight",
          "ember",
          "ocean",
          "bloom",
          "haze",
          "liquid_metal",
          "heatmap",
          "grain",
          "paper_texture",
          "halftone",
          "dither",
          "fluted_glass",
          "frosted_glass",
          "newsprint",
          "kraft",
          "linen",
          "canvas_weave",
          "fine_grain",
          "coarse_grain",
          "film_dust",
          "grid",
          "dot_grid",
          "graph_paper",
          "soft_wash",
          "dawn_wash",
          "marble",
          "ascii_dither",
          null
        ],
        "description": "The effect to apply, or null to remove whatever is there."
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "set_background",
  "kind": "act",
  "impl": "imperative",
  "description": "Set an artboard or frame background image from a URL or a data URI. It lands as background-image at cover, the same write the inspector makes, so it undoes and it exports. Pass src: null to clear. Pass a prompt to generate one at the node's size instead. Named CSS textures (newsprint, kraft, linen, …) go through apply_effect.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "ids": {
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "src": {
        "type": [
          "string",
          "null"
        ],
        "description": "https URL or data: URI, or null to clear."
      },
      "prompt": {
        "type": "string",
        "description": "Generate a background instead of passing src."
      }
    },
    "required": [
      "ids"
    ]
  }
}

{
  "name": "export_code",
  "kind": "act",
  "impl": "imperative",
  "description": "Hand the design off as code. Inline HTML, a standalone page, React with inline styles, or React with Tailwind classes. What comes out is what is on the canvas, because the canvas was already this.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "Node or artboard. Omit for the first artboard."
      },
      "as": {
        "type": "string",
        "enum": [
          "html",
          "page",
          "jsx",
          "tailwind"
        ],
        "description": "Defaults to html."
      }
    }
  }
}

{
  "name": "extract_colours",
  "kind": "answer",
  "impl": "imperative",
  "description": "Every colour the design actually uses, with how many nodes use each and which property it came from. Useful before recolouring, so you change the palette rather than guessing at it.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "artboardId": {
        "type": "string",
        "description": "Limit to one artboard."
      }
    }
  }
}

{
  "name": "undo",
  "kind": "act",
  "impl": "imperative",
  "description": "Step the document back. The same stack the person's cmd-z uses, so this undoes whichever of you went last.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "times": {
        "type": "number",
        "description": "How many steps. Defaults to 1."
      }
    }
  }
}