Docs
Tools
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
- none
- 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- Returns
- Import, props (types, defaults, JSDoc), cva variants and the classes each applies, parts, tokens used, docs and examples
search_components- Input
query,limit- Returns
- Components ranked for an intent such as "confirm a destructive action"
get_tokens- Input
category?,query?- Returns
- Tokens with resolved values, dark-mode values and usages (
bg-primary,var(--primary))
check_ui- Input
codeorpath,filename?- Returns
- Diagnostics with rule id, 1-based range, message, suggestion and edit-based fix, and a notice when no components or color tokens were found
| Tool | Input | Returns |
|---|---|---|
list_components | none | 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 | Import, props (types, defaults, JSDoc), cva variants and the classes each applies, parts, tokens used, docs and examples |
search_components | query, limit | Components ranked for an intent such as "confirm a destructive action" |
get_tokens | category?, query? | Tokens with resolved values, dark-mode values and usages (bg-primary, var(--primary)) |
check_ui | code or path, filename? | Diagnostics with rule id, 1-based range, message, suggestion and edit-based fix, and a notice when no components or color tokens were found |
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__design-system__build-with-design-system for a server added as design-system.
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 the README when the site is built: #tools.