MCP for AI

A Model Context Protocol server that feeds an AI agent the design system's real rules — component APIs, usage guidance, tokens, and brand context — so it assembles correct, accessible, on-brand UI instead of slop.

The point: kill AI slop

A model left to guess invents prop values, picks the wrong component, and hardcodes colours. The MCP replaces guessing with the system's own constraints, so the UI an agent produces is already valid, accessible, and on-brand — the same rules CI enforces.

§1

What it exposes

The context an agent needs to build with the system instead of around it.

Component API

Every component's props, variants, severities, and sizes.
The typed enum registry — no invented prop values.
asChild / compound-part shapes so composition stays correct.

Usage guidance

Which component / severity / variant for a use-case + viewport.
What NOT to use, and the alternative to reach for instead.
Pattern-triad rules: semantic, spatial, and linguistic.

Design tokens

The full 50–950 scale + semantic aliases per brand.
Mode-aware (light / dark) and shape / density axes.
So generated UI is token-driven, never hardcoded.

Brand context

The active brand's resolved token values.
One token set re-skins every component.
Output is on-brand by construction, not by prompt.

§2

Connect it

@idinstudio/mcp

json

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

Once connected, ask the agent to build a screen — it queries the server for the right components, severities, and tokens and returns UI that already passes the system's rules.

§3

Dogfooded, not theoretical

The same manifest that powers the MCP powers this showcase's Playground boards — every board is assembled from the system it documents.

One source of truth

Component manifest, usage-guidance data, and tokens are generated from the packages themselves — so the MCP, the docs, and CI never drift apart.