Docs
Tools
The MCP server is the part an agent asks before it writes. It serves five read-only tools, two resources and a prompt over stdio.
All tools are read-only, have zod-validated input schemas with size limits (up to 1,000,000 characters of code for check_ui), and return compact Markdown for the model plus JSON structuredContent (with an output schema) for programs.
list_components- Input
path?- Returns
- Every component with a one-line description, the element it renders, variant values, parts and its import
get_component- Input
name:Button,CardHeaderorCard.Header,path?- Returns
- Import, props (types, defaults, JSDoc), cva variants and the classes each applies, parts, tokens used, docs and examples
search_components- Input
query,limit,path?- Returns
- Components ranked for an intent such as "confirm a destructive action"
get_tokens- Input
category?,query?,path?- Returns
- Tokens with resolved values, dark-mode values and usages (
bg-primary,var(--primary))
check_ui- Input
codeorpath,filename?,limit?- Returns
- Diagnostics with rule id, 1-based range, message, suggestion and edit-based fix (up to
limit, 50 by default, errors first, with totals per rule), and a notice when no components or color tokens were found
| Tool | Input | Returns |
|---|---|---|
list_components | path? | Every component with a one-line description, the element it renders, variant values, parts and its import |
get_component | name: Button, CardHeader or Card.Header, path? | Import, props (types, defaults, JSDoc), cva variants and the classes each applies, parts, tokens used, docs and examples |
search_components | query, limit, path? | Components ranked for an intent such as "confirm a destructive action" |
get_tokens | category?, query?, path? | Tokens with resolved values, dark-mode values and usages (bg-primary, var(--primary)) |
check_ui | code or path, filename?, limit? | Diagnostics with rule id, 1-based range, message, suggestion and edit-based fix (up to limit, 50 by default, errors first, with totals per rule), and a notice when no components or color tokens were found |
At a monorepo root (how projects are found), path picks the project: the file the agent is editing, or a project folder, relative to the root. check_ui takes the project from its path, or for code from filename, the path the code will be saved under; without either, and with more than one project, it asks for filename. Without a path, list_components, search_components and get_tokens answer for every project together, each component and token tagged with the package it comes from and the projects that use it, and get_component answers when the name is one component, or lists the components of that name and the path that picks each. In a single project, path is ignored. When the server was started outside the project and the client reports no roots, an absolute path (or filename) is how it finds the project: see how the server finds the project.
Resources: ds://components/{name} (Markdown, with name completion) and ds://tokens (JSON). Prompt: build-with-design-system, which takes a task and walks the agent through search, contract, tokens and check_ui. In Claude Code it is a slash command, /mcp__onsystem__build-with-design-system for a server added as onsystem.
What the agent sees, from the demo:
> get_component { "name": "Badge" }# BadgeA small status label: counts, states ("Active", "Overdue") or categories.import { Badge } from "@/components/ui/badge"Renders <span> · components/ui/badge.tsx:29 · docs: docs/badge.md## Props- variant?: "default" | "secondary" | "destructive" | "success" | "outline" = "default"- asChild?: boolean = false — Render the child element with badge styles instead of a `<span>`.- …plus 280 props from React.ComponentProps<"span"> (onClick, id, role, children, aria-*, data-*, …)## Variantsvariant (default "default") default border-transparent bg-primary text-primary-foreground destructive border-transparent bg-destructive text-white success border-transparent bg-success text-success-foreground …> check_ui { "code": "<Button variant=\"primary\" className=\"bg-blue-600 px-[18px]\">Save</Button>" }snippet.tsx: 2 errors, 1 warning1:17 error [no-unknown-variant] "primary" is not a valid variant for <Button>. Allowed: default, destructive, outline, secondary, ghost, link. Did you mean "default"?1:38 error [no-hardcoded-color] `bg-blue-600` is Tailwind's default palette, not a design-system color. No token has this hue; nearest is ring (ΔE 0.294), a gray. Pick the semantic token that fits. <Button> already sets bg-* through `variant`; prefer a variant over overriding it.1:50 warning [no-hardcoded-spacing] `px-[18px]` is 18px, which is on the spacing scale: use `px-4.5`.Generated from docs/tools.md when the site is built.