Build Blueprint tools with Claude Code, Codex or Cursor

If you already pay for Claude Code, Codex or Cursor, you can now use it to build Blueprint tools. Your agent writes the tool. Blueprint checks it, saves every version and runs it in your Studio, where you tune the controls, export PNG, SVG or video, publish it and share it with a client. No Blueprint credits are used: the AI work happens on your own subscription.

What the connection does

Blueprint exposes an MCP server, the standard way coding agents talk to other apps. Through it, your agent can list your projects and tools, read a tool with all its versions, create a tool, save a new version, and get a preview link. When you ask for it, it can also publish a tool or share it with someone by email.

Your agent first reads the tool format: a short JSON description of the controls and presets, plus a JavaScript module that draws into one canvas with Blueprint’s small drawing library. It is the same format Blueprint’s own assistant writes, so a tool made by your agent behaves exactly like any other Blueprint tool.

Checked like in the Studio

Every version your agent submits goes through the checks the Studio runs: the shape of the controls and presets, the code (no network, no randomness without a seed, a defineTool call), and the fonts. When something is wrong, nothing is saved and the agent gets the exact problems back, such as code line 14: Math.random: not deterministic. It fixes them and submits again.

Checks are static: Blueprint does not run your agent’s code on its servers. The agent gives you a preview link, and the tool runs in your browser, in the same isolated sandbox as every Blueprint tool.

Two ways to connect

• Claude app: Settings › Connectors › Add custom connector, paste https://blueprint.page/api/mcp, click Connect, sign in to Blueprint and allow it.
• Claude Code, Codex, Cursor: in Blueprint, open Settings › Connect your agent, create a token and paste the line shown there, for example claude mcp add --transport http blueprint https://blueprint.page/api/mcp --header "Authorization: Bearer bp_…".

Then ask in plain words: “Build a risograph halftone tool in Blueprint, two inks, slight misregistration.” Your request is kept with the tool’s history, so you see in the Studio what was asked and which version answered it.

Who it’s for

The connection is included in the Solo, Studio and Agency plans: one connection on Solo, three on Studio, ten on Agency. It suits designers who already work with a coding agent and want their tools to live somewhere clients can use them, with versions, presets, exports and sharing handled for them. If you don’t use a coding agent, nothing changes: describe the tool in the Studio and Blueprint’s assistant writes it.