Docs

MCP for Claude Code and Cursor

Give your coding agent taste. The StyleDUI MCP server lets an agent explore design directions, lock what works, and read or export the result. Exploring, previews and DESIGN.md are free; code export needs a Pro API key.

Tools

Tool	Cost	Purpose
`explore`	free	Up to 6 directions for a brief, each with a genome token
`lock_explore`	free	Variants of a direction with locked aspects held fixed
`preview`	free	Summary, sections, and a share URL (when `STYLEDUI_BASE_URL` is set)
`design_md`	free	DESIGN.md for a direction
`export`	Pro	`files` or `dtcg`; needs `STYLEDUI_API_KEY`

Genome tokens are the same base64url JSON used in /s/?g= share URLs. Content from an explore run is held in memory for the session.

Claude Code and Cursor

From a checkout of the repository, run pnpm install first. Then add this to .mcp.json (Claude Code) or .cursor/mcp.json (Cursor), replacing the path:

{
  "mcpServers": {
    "styledui": {
      "command": "pnpm",
      "args": ["--silent", "--dir", "/absolute/path/to/styledui", "mcp"],
      "env": {
        "STYLEDUI_API_KEY": "your-key",
        "STYLEDUI_BASE_URL": "https://your-deployment.example",
        "DEEPSEEK_API_KEY": ""
      }
    }
  }
}

Or, with Claude Code, in one command:

claude mcp add styledui -- pnpm --silent --dir /absolute/path/to/styledui mcp

Environment

STYLEDUI_API_KEY: your Pro API key, used only by export. Create keys on your account page. Leave it out to explore for free.
STYLEDUI_BASE_URL: the deployment used to build share URLs in preview.
DEEPSEEK_API_KEY (or AI_GATEWAY_API_KEY): optional. Only the AI-assisted adapters make network calls, and only when one is set. Leave it empty to use the built-in engine alone.
STYLEDUI_API_URL: the server that checks your key and builds the export, default https://styledui.com. Plain http:// is accepted for localhost only.

export never builds anything locally: it sends the direction to the server with your key, and the server checks your plan. A revoked key stops working at once.

Using it

Ask your agent something like “use StyleDUI to explore a dashboard for a fintech treasury tool and pick the direction that suits a dense, technical audience”. It calls explore, compares the directions, and can call design_md to write a DESIGN.md into your repo so later work stays consistent. Exporting code or tokens needs the paid key, as described on plans and limits.