@basiiik/mcp
An MCP server that gives AI agents the Basiiik design system: what components exist, when to use them, their exact React props, and the tokens.
It is read-only, runs locally over stdio, and needs no network or API key. All data ships in data/bundle.json, generated from components/specs and tokens/.
Tools
| Tool | Use it to |
|---|---|
get_design_system_guide | Load the rules for generating UI (components first, tokens only, a11y, theming). |
list_components | List all 88 components, filtered by category or status. |
search_components | Find a component from a need ("show progress", "confirm delete"). |
get_component | Full spec: when to use / not, React props and allowed values, a11y, Figma variants, tokens. |
get_component_snippet | Import + JSX. Props are validated against the real API, so bad values return an error listing what is allowed. |
search_icons / get_icon | Find an icon from a need ("delete", "go back") and get its SVG, React usage and when to use it. Appears when the bundle includes icons. |
list_tokens / get_token | Look up CSS variables with Light and Dark values. |
The lookup tools (get_component, get_component_snippet, get_icon, get_token) take one identifier. Agents often guess its name, so slug, name and id work as aliases, and a missing identifier returns a message saying what to pass and which search tool to call.
Resources: basiiik://guide, basiiik://components/{slug}.
Pro Agent Pack
The token linter (lint_source) and guided workflows (build-ui, review-ui, migrate-to-tokens) are in the commercial @basiiik/mcp-pro, which includes everything in this server. It is available to licensed customers.
Extend it
createServer(bundle, extensions) takes functions that register extra tools, resources or prompts:
import { createServer, loadBundle, json, readOnly, type ServerExtension } from '@basiiik/mcp';
const internalRules: ServerExtension = ({ server }) => {
server.registerTool('our_rules', { description: 'Our team conventions', annotations: readOnly }, () => json({ rules: ['...'] }));
};
const server = createServer(loadBundle(), [internalRules]);
Connect it
Claude Code:
claude mcp add basiiik -- npx -y @basiiik/mcp
Any MCP client (Cursor, Claude Desktop, ...):
{ "mcpServers": { "basiiik": { "command": "npx", "args": ["-y", "@basiiik/mcp"] } } }
Set BASIIIK_BUNDLE=/path/to/bundle.json to serve a customised bundle, for example one built from your own tokens.
Licence: MIT.