Draftr
Join the beta
Documentation

Connect Draftr to your agent

The Draftr MCP server lets an agent such as Claude or Codex work in your designs as real, editable layers, while you and your team watch the changes in the editor. Its address is https://app.draftr.top/mcp.

Before you start

You need a Draftr account with a verified email address. During the beta your account also needs our approval and agent access. Write to [email protected] if you are waiting for either.

Claude

Add a custom connector with the address above. Sign in to Draftr when Claude asks and choose Allow.

Claude Code

Install the Draftr plugin:

claude plugin marketplace add Draftr-Solutions/draftr-plugin
claude plugin install draftr@draftr

Then open Claude Code, run /mcp, choose draftr and sign in.

Codex

Install the plugin and sign in:

codex plugin marketplace add Draftr-Solutions/draftr-plugin
codex plugin add draftr@draftr
codex mcp login draftr

Restart Codex and ask for your Draftr designs. Codex asks you to approve each edit, so make edits in an interactive session: codex exec cannot ask and cancels them.

Other agents

Add https://app.draftr.top/mcp as a Streamable HTTP MCP server. Agents that support OAuth sign in through the browser. For the others, create a personal token under Agent access tokens in the app and send it as Authorization: Bearer <token>. Keep the token in the agent's secret storage.

What an agent can do

  • Build screens from starter blocks, components, built-in fonts and icons, with auto layout, design tokens, styles and responsive breakpoints.
  • Read an existing design and change it, or find problems in it.
  • Build clickable prototypes with interactions, form fields and motion.
  • Read comments, make the requested changes, reply and resolve the threads.
  • Compare a design with a reference image and improve the match.
  • Check its work with screenshots and export PNG, SVG or PDF files.

Try asking

  • Design a landing page in Draftr for a bookkeeping service for independent cafes.
  • Open my latest Draftr design and list any layout or contrast problems you see.
  • Read the open comments in my Draftr design, make the requested changes and reply to each thread.

What an agent can reach

An agent acts for you and sees only the designs your account can see. When it connects, you see what it asks for and decide. A connection or token can be read-only, and a read-only agent cannot change anything. Each account has a daily limit of agent calls.

People in a design see an agent in presence with its task and the layers it last touched. A whole agent task can be undone as one action.

Disconnect an agent

Open Agent access tokens in the app and choose Disconnect, or revoke the token. Access ends at once.

If something goes wrong

  • The Draftr tools are missing, or you see 401: the agent is not signed in, or you disconnected it. Sign in again.
  • 403 INSUFFICIENT_SCOPE: this connection is read-only. Connect again and allow editing.
  • Agent access is not on for this account yet: write to us. The same goes for an account that waits for approval.
  • A limit error: the account has used today's agent calls. Try again tomorrow.
  • The browser cannot reach a localhost or 127.0.0.1 page after Allow: go back to your agent. It may have signed in already.

For anything else, see support. The privacy policy says what applications you connect receive.