Airframe MCP

Airframe MCP (@airframeui/mcp) is a stdio MCP server for Cursor, Claude Code, and other hosts. Coding agents use it to look up af-* patterns, --af-* tokens, and to validate markup on demand.

It reads the catalogs that ship with @airframeui/core and @airframeui/tokens. It is not a second source of truth. Theme tools use @airframeui/theme.

MCP does not put CSS on the page. Still install @airframeui/core in the app.

Do not dump catalogs into context. Lookup on demand. Do not invent af-* or --af-* names. Do not reimplement pattern CSS.

Install

Requires Node.js 24 or later. You do not add @airframeui/mcp to package.json.

npx downloads the server and the catalogs it depends on. Public packages share one version — pin MCP to the same version as @airframeui/core so lookups match the CSS in the repo.

Cursor

Create .cursor/mcp.json in the project root, or add a server in Cursor Settings → MCP:

{
  "mcpServers": {
    "airframeui": {
      "command": "npx",
      "args": ["-y", "@airframeui/mcp"]
    }
  }
}

Enable the server if Cursor prompts. Then restart airframeui (Cursor Settings → MCP) so the agent can call the tools.

Claude Code

Same JSON in .mcp.json at the project root.

Match @airframeui/core if you are not on @latest:

"args": ["-y", "@airframeui/mcp@<version>"]

Use

Ask the coding agent for Airframe markup. It should follow this loop:

search_patterns → get_pattern → get_example → compose af-* → validate_markup

get_pattern is dense by default (dense: true). Pass dense: false when you need every class.

Tokens: search_tokens / get_token. Prefer unsuffixed names in CSS (--af-color-background, not --af-color-background--dark).

Theme mapping is optional. Most apps override CSS variables. When mapping a foreign token file: generate_theme → lint_theme until clean. format defaults to auto (DTCG, Tokens Studio, CSS, Figma Variables, Style Dictionary, or an Airframe spec).

Tools

Tool	Use
`search_patterns`	Find a pattern or layout. Call this first.
`get_pattern`	One pattern or layout (`name` or base class, e.g. `button` / `af-btn`).
`get_example`	Extra markup samples. After `get_pattern`.
`validate_markup`	Unknown `af-` / `--af-` in HTML, JSX, or a class string. After composing.
`search_tokens`	Find `--af-*` tokens.
`get_token`	One token by exact name. Unknown names return suggestions.
`generate_theme`	Token file contents or an Airframe spec → `theme.css`. Lint afterward.
`lint_theme`	Lint `theme.css` or a spec. After `generate_theme`.
`list_patterns`	Full inventory. Prefer `search_patterns`.
`list_tokens`	Full inventory. Prefer `search_tokens`.
`map_tokens`	Foreign tokens → spec + unmapped list.
`validate_theme`	Map + lint inbound tokens in one step.

Resources

Hosts that support MCP resources can read these. Tools are enough if the host does not.

URI	What it is
`airframe://ai`	Short agent loop. Prefer tools; do not dump catalogs.
`airframe://rules`	Full markup contract (`@airframeui/core/rules`).
`airframe://theme/rules`	Theme generate/lint. Only when mapping a foreign token set.

AI Rules — markup contract
Installation — CSS in the project
Theming — CSS variable overrides; Theme Studio for foreign tokens
IntelliSense for Airframe — editor autocomplete
Packages — npm inventory
Package README: GitHub