Integrate

Use UI Anatomy from your agent

The canon ships as an MCP server (https://uianatomy.dev/mcp) and as an agent-skill. Public, no auth. Drop the skill into any project and wire the MCP server with one JSON snippet.

Quick start ↓ What you get ↓

Quick start

One-liner that creates the skill in your project and wires the MCP server for Claude Code.

Install the skill. Run from your project root:

mkdir -p .claude/skills/uianatomy-mcp \
  && curl -fsSL -o .claude/skills/uianatomy-mcp/SKILL.md \
       https://uianatomy.dev/.well-known/agent-skills/uianatomy-mcp/SKILL.md

The skill is the canonical reference — Claude Code loads it at session start.

Wire the MCP server. Add to .mcp.json at the project root (or to your global Claude Code config):
```
{
  "mcpServers": {
    "uianatomy": {
      "type": "http",
      "url": "https://uianatomy.dev/mcp"
    }
  }
}
```
Restart your client. list_components should now show up in the tool list.

Other clients

Claude Desktop

Add to claude_desktop_config.json (Settings → Developer → Edit Config):

{
  "mcpServers": {
    "uianatomy": {
      "type": "http",
      "url": "https://uianatomy.dev/mcp"
    }
  }
}

Cursor / Windsurf / older Claude Desktop

For clients without native streamable-HTTP support, proxy via mcp-remote:

{
  "mcpServers": {
    "uianatomy": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://uianatomy.dev/mcp"]
    }
  }
}

Direct SDK (TypeScript)

Skip MCP-client config and call the server directly from Node ≥ 20:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";

const transport = new StreamableHTTPClientTransport(
  new URL("https://uianatomy.dev/mcp"),
);
const client = new Client({ name: "your-app", version: "1.0.0" });
await client.connect(transport);

const result = await client.callTool({
  name: "get_anatomy",
  arguments: { id: "modal" },
});

What you get

Read-only tools across three groups. Every tool returns JSON; null is the canonical "not declared" answer.

Components

Read the canonical anatomy, axes, mismatches, mistakes, and cross-framework mapping.

Tool	Args	Returns
`list_components`	`—`	Every canonical component (id, name, description).
`search_components`	`query`	Substring search across id / name / description / slots / variants.
`get_component`	`id`	Full canonical schema for one component.
`get_component_view`	`id, view`	Designer / dev / bridge projection.
`get_anatomy`	`id`	Slot and region definitions.
`get_mismatches`	`id`	Documented Figma ↔ code misalignments.
`get_component_section`	`id, sections`	One or more named sections in one round-trip: anatomy / axes / mismatches / mistakes / frameworkMap / tokens / motion / responsive / transitions / events / whenToUse.

Patterns (compositions)

Canonical compositions of components into recurring UI flows.

Tool	Args	Returns
`list_patterns`	`—`	Every canonical pattern with composed component ids.
`get_pattern`	`id`	Full pattern record (composition, decisions, mistakes, framework skeletons).
`get_patterns_for_component`	`componentId`	Every pattern that composes a given component, with its role.

Implementations (library audits)

Phase-2 library audits showing how each library diverges from the canon.

Tool	Args	Returns
`list_implementations`	`—`	Every library/component pair with divergence count.
`get_implementations`	`componentId`	Full audit records for one canonical component, sorted by library.
`validate_implementation`	`componentId, code, framework`	Heuristic structural conformance check. Reports missing required slots / variants / properties / events.

Typical flows

"How is a Modal structured?"

get_anatomy({ id: 'modal' }) — slots with required/optional, purpose, layout hints.
get_component_section({ id: 'modal', sections: ['axes', 'transitions'] }) — variants + states and closed → opening → open → closing → closed.

"How does Radix Dialog diverge from canonical Modal?"

get_implementations({ componentId: 'modal' }) — array of audits, one per library.
Inspect the radix entry's divergence list (omitted / renamed / extended / reshaped) and exampleCode.

"I just generated a Modal in React. Did I miss anything?"

validate_implementation({ componentId: 'modal', code, framework: 'react' }) — structural report listing missing required slots / variants / properties / events.
Treat missing entries as a checklist, not as defects — substring search has false negatives. Pair with /api/components/modal/a11y-fixture.json for behavioural tests.

"What patterns use this component?"

get_patterns_for_component({ componentId: 'modal' }) — every canonical pattern that composes the component, with the role it plays.

No-MCP fallback

If your client can't speak MCP, the same data is on a plain JSON API:

/api/components.json — full index.
/api/components/<id>.json — full canonical schema for one component.
/api/components/<id>/a11y-fixture.json — keyboardWalk + announcements + axeRules, ready for Playwright + axe-core.

Pages also serve markdown on Accept: text/markdown with x-markdown-tokens headers — useful for agents that prefer prose context over JSON.