Automation · MCP

Read the design from any agent

drepo mcp is a Model Context Protocol server over stdio. Claude Code, or any MCP client, can list boards, read a frame's spec and screenshot, look up a component and check render health, from the app repo where the code is written.

stdioread-onlyapp#97

Start the server

Inside a design repo, or anywhere with CANVAS_REPO set. It speaks MCP on stdin and stdout, logs to stderr, and never writes to the repo: every tool is read-only, and screenshots and health PNGs go to a temp folder.

~/acme/storefront-designsh

$ drepo mcp
# waits for an MCP client on stdio; Ctrl-C to stop

Wire it into Claude Code

From the app repo, add it once and point it at the design repo. Claude Code starts it when a session needs it.

~/acme/storefront-websh

$ claude mcp add designrepo -e CANVAS_REPO=$HOME/acme/storefront-design -- drepo mcp
$ claude mcp list
# designrepo is listed and connected

Or check it in, so everyone on the team gets it. Point CANVAS_REPO at the design repo's checkout; a relative path is read from the folder Claude Code starts in.

.mcp.jsonjson

{
  "mcpServers": {
    "designrepo": {
      "command": "drepo",
      "args": ["mcp"],
      "env": { "CANVAS_REPO": "../storefront-design" }
    }
  }
}

Tools

Boards, frames and components come from the committed manifest.json, so run drepo manifest after editing boards. A tool that fails answers with an error; the server keeps running.

ToolInputReturns

list_projectsnone{ repo, langs, projects[] }The repo's projects, design or library: the libraries they use, board and component counts, and the repo's languages.

list_boardsproject?{ boards: [{ board, path, title, issue, frames, changed }] }Every board, or one project's, and how many of its frames changed against the live branch.

get_boardboard{ notes, frames[], issues[] }One board: its notes, its frames with captions, routes and issues, and the issues it cites, with links.

get_frameboard, frame, screenshot?, lang?{ spec, handover, route, components[], viewer } + PNGA frame's build spec and handover from the sidecar, every component it mounts with its file, and with screenshot: true a PNG.

get_componentname, project?{ file, props, imports, usedBy, docs }Its source file, props schema (data-props), what it imports, the frames and components that use it, and its docs.

list_commentsboard?, change?, unsent?{ comments[], count }The review comments pinned on the canvas for this checkout, or a change: text, author, and the component and frame each is about.

healthboard?, frame?, changed?{ summary, errors, warnings, frames[] }The render-health check, in every language. changed takes true (against the base branch) or a git ref. Takes a while.

tokensproject?{ tokens: [{ project, tokens }] }The design tokens of every project, or one, from its tokens.json.

A session

In the app repo, Claude builds the payment step from the frame instead of a screenshot in a ticket.

Build the checkout payment step from the design: 03 Checkout, frame 3a, with a screenshot.

designrepoget_frame · 03 Checkout 3a · screenshotspec · handover · png

designrepoget_component · patterns/OrderSummary9 props

Frame 3a is a two-column payment step: a 640px form and a 360px order summary, in three states (default, card declined, Apple Pay unavailable). I'll build PaymentStep from its spec and reuse OrderSummary's props.

designrepohealth · 03 Checkout 3a

Troubleshooting

Claude Code doesn't list the tools

Run claude mcp list. If designrepo is missing, add it from the app repo's root; .mcp.json is read from the folder Claude Code starts in.

get_frame returns no screenshot

Screenshots need Node and Playwright, as drepo shoot does. If drepo shoot frame "01 Home" 1a works in the design repo, so does get_frame with screenshot: true.

It reads the wrong design repo, or none

drepo mcp uses CANVAS_REPO, else the design repo at or above the folder it starts in. In an app repo, set CANVAS_REPO to the design repo's path, as above.

A board or frame is missing

The tools read the committed manifest.json. Run drepo manifest in the design repo after adding or renaming boards.

Pin the design, not the branch

Note the design repo's commit in the commit or PR that builds the frame (Copy for dev puts it first), so a later design change can't move the target.