MCP server and agent skill

A coding assistant that has not been told about xUI will invent APIs that look plausible and do not exist. Two pieces of tooling fix that: a Model Context Protocol server that answers from the library sources, and a skill that carries the conventions.

Why a server rather than a doc page

The server extracts what it answers from the decorated classes themselves — every selector, signal input, two-way model, output and cva variant axis across all 104 packages, plus the design tokens and the maintained Storybook examples. It reports the version it extracted from, so the answers match the code you have installed rather than whatever shipped last.

Install

The server runs over stdio and ships its own extracted index, so it needs no checkout and no build:

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

That file is .mcp.json for Claude Code, .vscode/mcp.json for VS Code, or your assistant's equivalent. Restart it afterwards and the tools below appear.

Working inside the xUI repository?

Point the server at the workspace instead and it extracts live from libs/, so an API you changed a minute ago is already answerable. .mcp.json in the repo is set up that way — run pnpm nx build mcp once first.

What it exposes

Tool

Answers

xui_components_list

Every package, with its group and one-line description.

xui_components_get

One package in full: selectors, signal inputs, outputs, variant axes, exports.

xui_components_search

Find a package by what it does rather than by name.

xui_examples_get

The maintained Storybook examples for a package.

xui_tokens_list

The design tokens, by group, with their light and dark values.

xui_tokens_search

Find the token for a role — a muted border, a subtle surface.

xui_docs_list

The guide pages available.

xui_docs_get

One guide page in full.

It also publishes the token reference and the component index as MCP resources, and a few prompts for the jobs that come up constantly — building a form, theming an intent, picking between two packages.

The skill

The server answers what exists. The skill carries how to use it: the three-layer architecture, when to reach for a variant instead of a class, the styling rules, composition patterns for forms and overlays, and the conventions for authoring a package inside the monorepo.

# copy the skill into your project
npx degit Rikarin/xui/skills/xui .claude/skills/xui

Claude Code discovers skills under .claude/skills. The skill is small on purpose — it teaches the rules and defers every concrete API question to the MCP server, so it cannot go stale.

Checking it works

Ask your assistant something only the server can answer:

# in your assistant
What variant axes does @xui/button have, and what are the options?

A correct answer names variant, size and color with their exact options. A wrong one invents appearance or severity — which is what you get without the server.

Source

libs/mcp and skills/xui