@dodanko/erion

The MCP server for Erion — turns the selected Figma frame into a pixel-perfect implementation prompt for Claude Code, Codex, and any MCP-aware AI agent.

The one thing every platform and plugin wishes it had.

How it works

1. Install the Erion plugin in Figma (Community → Plugins → Erion).
2. Install this MCP server in your AI agent (Claude Code, Codex, Cursor, …).
3. Run the plugin on the frame you want built. It pushes the node + assets to the Erion engine.
4. Tell your agent to build the frame. The agent calls figma_fetch_node (or asks for the latest pushed frame), and gets back the semantic IR plus a non-negotiable pixel-perfect contract.

1. Get an API key

Sign up at erion.dodanko.com and copy your API key (fe_live_…).

2. Install for your agent

Claude Code

Project-scoped — drop into .mcp.json at the repo root:

{
  "mcpServers": {
    "erion": {
      "command": "npx",
      "args": ["-y", "@dodanko/erion"],
      "env": {
        "ERION_API_KEY": "fe_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

Or user-scoped via CLI:

claude mcp add erion -s user \
  -e ERION_API_KEY=fe_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \
  -- npx -y @dodanko/erion

Codex

Add to ~/.codex/config.toml:

[mcp_servers.erion]
command = "npx"
args    = ["-y", "@dodanko/erion"]

[mcp_servers.erion.env]
ERION_API_KEY = "fe_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Cursor / Continue / Windsurf

Any MCP-aware host. The pattern is always the same: command: npx, args: ["-y", "@dodanko/erion"], env contains ERION_API_KEY.

3. Use it

In Figma: select a frame → run the Erion plugin → click Send to agent.

In your agent:

Build the frame I just sent from Figma. Use the Erion tools.

The agent gets figma_fetch_node (and friends) which return the semantic IR plus a pixelPerfectPrompt it MUST follow.

4. Make your agent aware (recommended)

Drop this into your project's CLAUDE.md / AGENTS.md so the agent reuses the right tools and respects your codebase:

## Building from Figma

When the user asks to build, replicate, or implement a Figma frame:

1. Call `erion.figma_fetch_node` (source: `bridge`) to get the latest
   frame the user pushed from the Erion plugin. Do not guess geometry,
   colors, fonts, or layout from a screenshot.
2. Read `fidelity.implementationPrompt` and `fidelity.agentChecklist` from
   the response. They are non-negotiable — follow them literally.
3. BEFORE creating any asset (icon, image, svg, font, component, util,
   hook, token), search the existing codebase for one that already covers
   it. Reuse the existing path/name. Duplicates are a regression.
4. BEFORE writing code, detect the tech stack: read `package.json`, the
   build/lint config, and 2–3 sibling files in the target directory. Match
   it exactly — same framework, same styling primitive, same import style.
   Never introduce a new dependency or paradigm.
5. After implementation, screenshot your output at the same viewport as
   the Figma frame and compare. Fix every mismatch before reporting done.

Configuration

| Env var | Default | Purpose | | --- | --- | --- | | ERION_API_KEY | (required) | Per-user API key from erion.dodanko.com | | ERION_MCP_URL | https://figma-engine.dodanko.com/mcp | Override engine URL (self-hosted, staging) | | ERION_CLIENT_CONFIG | ~/.config/erion/client.json | Alternate config-file path |

Config file format:

{
  "url": "https://figma-engine.dodanko.com/mcp",
  "apiKey": "fe_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

Env vars always win over the config file.

Tools exposed

| Tool | What it does | | --- | --- | | figma_fetch_node | Fetch a node by URL or fileKey+nodeId. Returns semantic IR + fidelity audit + pixel-perfect prompt. Use source: "bridge" to read the frame the user just sent from Figma. | | figma_get_tokens | Extract design tokens (layout, colors, spacing, typography, radius, border, shadow) from a single node. | | figma_map_component | Map a semantic node to a shadcn/ui component (or semantic HTML fallback). | | figma_workspace_scan | Scan the repo for shadcn/ui components, Tailwind config, and CSS variables — used to ground component mapping in YOUR stack. | | figma_export_asset | Export nodes as SVG/PNG/JPG/PDF and write to outDir. | | figma_diff | Diff two semantic nodes — useful for incremental design updates. |

Troubleshooting

ERION_API_KEY not set — set the env var in your MCP config (see above) or save it to ~/.config/erion/client.json.

401 unauthorized — your API key is invalid or revoked. Generate a new one at erion.dodanko.com.

429 rate_limited — too many concurrent requests. Wait Retry-After seconds and retry.

Agent says "no frame available" — open Figma, select a frame, run the Erion plugin, click Send to agent, then retry.

License

MIT