MCP — Using the @udixio/mcp package

Deprecated. @udixio/mcp embeds a frozen snapshot of the docs and theme taken at build time, which goes stale with every evolution of the library. To connect an AI agent to Udixio UI today, use the Claude Code/Codex plugin or the markdown docs instead, which always read up-to-date data. This guide remains available for MCP clients that have no other integration option.

This guide explains how to use the MCP server to expose the UI library’s information to AI assistants (Claude Desktop, Cursor, MCP Inspector, etc.):

• List of the design system’s components
• Search in the documentation (MD/MDX)
• Theme tokens (colors, spacing, etc.)
• Access to doc files through a doc://{path} resource

The MCP server is published under the public npm name @udixio/mcp and exposes a udixio-mcp binary.

Prerequisites

• Node.js ≥ 18

The @udixio/mcp package is self-contained: it embeds a snapshot (docs, theme, component index) and works without any configuration.

Usage (zero setup)

# Install the binary globally
npm i -g @udixio/mcp

# Start the MCP server (uses the embedded data)
udixio-mcp

Client-side integration (e.g. Claude Desktop):

{
  "mcpServers": {
    "udixio-ui": { "command": "udixio-mcp" }
  }
}

Exposed MCP tools

The server registers several “tools” available to the MCP client:

• listComponents — returns the list of components and their relative source files (embedded data).
• getComponentDoc — takes { name: string } and returns the matching doc/story paths (embedded data).
• searchDocs — takes { query: string, limit?: number } and runs a full-text search in the embedded documentation.
• getThemeTokens — returns the theme object from the embedded snapshot.

Example call (from an MCP client):

{
  "tool": "searchDocs",
  "input": { "query": "Button", "limit": 5 }
}

MCP resources

A resource is registered to read doc files directly by path relative to apps/doc/src:

• Template: doc://{path}
• Example: doc://components/button.mdx

Integration with an MCP client (Claude Desktop)

Add or edit your user configuration to declare the MCP server. Minimal example:

{
  "mcpServers": {
    "udixio-ui": {
      "command": "udixio-mcp"
    }
  }
}

Then, in the client, ask for example:

• “Call listComponents”
• “Search the docs: searchDocs with query=colors”
• “Give me the theme tokens via getThemeTokens”
• “Open the resource doc://path/to/a/file.mdx”