My Ui MCP
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@My Ui MCPI need a settings form for a small team — ask me for the brief first, then hand me the source."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
My Ui MCP
A local stdio MCP server that turns the My Ui design system into an assistant you can drive from any MCP-capable IDE — OpenCode, Claude Code, Claude Desktop, Cursor, VS Code, Windsurf or Zed.
It ships three layers and one copy-first workflow:
Layer | What it is |
Verified local components | 57 exports across 35 |
Marketplace catalogue | All 8,157 records in |
Design tokens | Parsed live from |
8,214 components total, 6 tools, 2 prompts, 5 static resources + 2 resource templates.
Table of contents
Related MCP server: ai-ready-ds-auditor
Quick start
git clone https://github.com/tony9020/my-ui-mcp.git
cd my-ui-mcp
npm install
npm run smoke # spawns the real server and verifies everything
npm run setup -- --ide allExpected smoke output:
PASS tools=6 components=8214 catalogue=8157 suggestions=5sections sources=8 bundle=2 prompt=15713chars handoff=18879chars resources=62Then reload your IDE and ask the agent something like:
Use the myui MCP. I need a settings form for a small team — ask me for the brief first, then hand me the source.
The agent should ask you questions before it writes anything, then return exact source blocks for you to copy into your project.
IDE setup
Option A — the installer (recommended)
npm run setup -- --ide opencode # one IDE
npm run setup -- --ide all # every IDE detected on this machine
npm run setup -- --ide cursor --project --dir ~/code/my-app
npm run setup -- --ide vscode --dry-run # preview, change nothing
npm run setup -- --list # supported IDEs + scopesFlag | Effect |
| Comma-separated list, or |
| Write to the IDE's user config (default — makes it work in every project). |
| Write to a specific project. Use |
| Server name to register (default |
| Print the merged config, write nothing. |
The installer is Node built-ins only, so it runs before anything else is installed. It is deliberately conservative:
Backs up any file it overwrites (
<file>.bak.<timestamp>).Merges into existing config — it never drops keys you already have.
Refuses to rewrite a file it cannot parse (JSONC comments, trailing commas, corruption) and prints the block for you to paste instead.
--ide allonly touches IDEs that are actually detected, so it will not litter your home directory with config files nobody reads.
Option B — manual
Every IDE launches the same entry point:
node /ABSOLUTE/PATH/TO/my-ui-mcp/mcp/run.mjsmcp/run.mjs resolves the repository from its own file location and sets the
child working directory itself, so the IDE's working directory never matters.
It also prints a clear npm install hint if dependencies are missing, and keeps
stdout reserved for JSON-RPC (all diagnostics go to stderr).
Copy the matching file from examples/ and replace
/ABSOLUTE/PATH/TO/my-ui-mcp:
IDE | File to edit | Key | Example |
OpenCode |
|
| |
Claude Code |
|
| |
Claude Desktop |
|
| |
Cursor |
|
| |
VS Code |
|
| |
Windsurf |
|
| — |
Zed |
|
|
OpenCode specifics
Tools appear as
myui_list_components,myui_get_component_bundle, … or undertools.myui.*in Code Mode.Prompts appear as
/myui:design_layout_guideand/myui:component_handoff.The server appears as
myuiinopencode mcp listwhen it connects cleanly.A project config with the same name overrides the global one. Both start this same server.
This repository ships its own
opencode.jsonand.mcp.jsonfor working inside this repo. For your own projects, use--scope global.
The process: 7 stages
The server is not a search box. It enforces a copy-then-adapt loop so the agent never describes a component from memory and never hands you a paraphrase.
Full text:
myui://handoffresource, or/myui:component_handoff.
Stage 1 — Ask for the brief
No component selection, no code. The assistant asks, in one compact block:
What are you building, for whom, and what is the one job the surface must do?
Which components or roles do you need? (name them, or describe slots like navigation, form, table, dialog, empty state, editor toolbar)
What is the target stack, framework, import alias and component folder?
What design system, tokens, typography and strategy already exist?
Are you replacing an existing component? If so, share its props, variants, states, behaviour and source.
What must stay identical: API, analytics, form integration, keyboard behaviour, copy or tests?
What constraints apply: licence, dependencies, accessibility, responsive breakpoints, bundle size, browser support?
What feedback can you return after copying: typecheck errors, build errors, screenshot, rendered DOM, token diff, review?
Stage 2 — Select from the local index
list_components searches verified local components first and falls back to
the marketplace catalogue only when a local component does not cover the role.
Never invents a component, prop, variant or token.
Use author/slug (e.g. kanchanasw/sketch-button) to target a specific
catalogue record.
Stage 3 — Share the exact source
get_component_bundle (or suggest_combination) returns, for every selected
component:
the exact source — never paraphrased, regenerated or truncated
a suggested copy target (e.g.
src/components/ui/button.tsx)import path, npm and internal dependencies
licence and registry install command for catalogue records
parsed props with types, defaults and required flags
tokens used, plus usage, accessibility and anti-pattern notes
Components that share one source file are de-duplicated — the file is printed once and referenced by the rest.
Stage 4 — Install in the user's project
You copy each block into the suggested path, install the listed dependencies,
resolve internal imports (@/lib/utils etc.), then run typecheck/build.
Install steps are generated per bundle, e.g. npm install lucide-react zustand.
React itself is assumed to exist in the target.
Stage 5 — Collect feedback and adapt
Return the exact errors, a screenshot or rendered DOM, the token changes you made, and what felt wrong. Then adapt in this order:
Keep behaviour, accessibility and analytics stable.
Map existing colours, type, spacing and radius to semantic roles.
Use component props or variants before adding wrapper classes.
Edit component source only when the API cannot express the need.
Validate the final composition and report the diff.
Stage 6 — Replace an existing component
For a replacement, inventory before editing:
old public props, variants, defaults, DOM semantics, analytics hooks, form integration and tests
every visual and behavioural state: default, hover, focus, active, disabled, loading, error, empty, selected, dark mode
an old-to-new API map marking vanished props, changed meanings and behaviour that must be preserved
Keep behaviour and accessibility stable in pass one; change appearance in pass two. If a state has no equivalent, compose primitives or add a documented variant — never silently drop it.
Editor and canvas surfaces additionally get: preserve selection state, drag handles, keyboard shortcuts, undo/redo affordances, focus rings and compact toolbar density. Test pointer and keyboard interaction, selection and multi-select.
Stage 7 — Validate
Run validate_ui_composition on the final usage and report what changed, what
stayed the same and what still needs a decision.
Design guide: Plan → Review → Build → Critique
The design_layout_guide prompt is the separate, page-level reasoning scaffold:
1. Plan
Establish the subject, audience and primary job; reject default visual clichés; choose a surface type and a component combination; produce a 4–6 hex palette with role and use per token, a typography pairing, an alignment concept and an ASCII wireframe.
2. Review the plan before building
Check the inventory: which verified local components are used, which gaps must
be solved with primitives or a new component, and any catalogue record's author
and licence. Then call get_component_bundle for the selected names — the
handoff is a copy step, not a description step.
3. Build
Write accessible TypeScript/React using the local components, semantic tokens and the established import paths. Copy each component's exact source before adapting it.
4. Critique the result
Run the review checklist and anti-pattern list against the built output. Replace every placeholder with a real value or a visibly labelled placeholder; never invent proof.
Output contract: use_case?, surface_type? (landing, dashboard, auth,
pricing, settings, docs, …) and constraints?.
Tools
Tool | Arguments | What it does |
|
| Pages through verified local components and catalogue records with import path, category, origin, author, prop count, variants and usage references. |
|
| The workhorse. Accepts component names or a requirements brief (it derives a shortlist from the brief when no names are given). Returns exact source, copy target, dependencies, install steps, adaptation rules, replacement guidance and feedback questions. |
|
| Full detail for one record: metadata, parsed props, CVA variants, dependencies, real usage examples, guidelines, related components, exact source, copy target and install instructions. Accepts a local name, a catalogue |
|
| Subject-driven design direction: palette, type pairing, alignment, ASCII wireframe, component selection (local first), review notes, gaps, TSX scaffold and the exact source of every selected component. |
|
| Colours, typography, spacing, radius, shadows or animations with CSS variables, guidance and contrast pairs. |
|
| Accessibility, tokens, specificity, typography, motion, copy, generic defaults and proof patterns. |
Prompts
Prompt | Arguments | Purpose |
|
| The copy-first workflow: ask for the brief, hand off exact source with install steps, then collect feedback and adapt or replace. With no arguments it returns the protocol + the eight questions + the local inventory. |
|
| Plan → Review → Build → Critique for a whole page. |
Resources
URI | Contents |
| Compact index of all 8,214 components: id, name, slug, origin, author, category, import path, prop count. |
| Full parsed token model as JSON. |
| Design philosophy, anti-patterns and checklist as Markdown. |
| The 7-stage protocol, including replacement and style-decision rules. |
| Human-readable verified local inventory + catalogue category summary. |
| One verified local component: props, variants, examples, guidelines, source. |
| One marketplace record: author, licence, stats, demo example, component source. |
The local template lists all 57 components, so clients that only surface
resources/list can still discover them. The catalogue template is unlisted
and uses completion for author and slug.
Why
myui://componentsis compact: the MCP stdio frame limit is 10 MB. The index carries one summary row per record; useget_component_bundle,get_component_detailsormyui://catalogue/{author}/{slug}for full source.
Design guardrails
Always-on rules the server states in its instructions and enforces in every tool result:
Subject-driven design. Ground choices in the industry, audience and job. A treasury tool should feel like a ledger, not a generic SaaS dashboard.
No generic SaaS defaults unless explicitly requested: warm cream + dark acid accent, near-black + neon green, glassmorphism, centred three-card feature grids.
Typography. At most two display/body families plus one mono. Never italicise or colour a single word inside a headline. No indiscriminate all-caps labels, no floating decorative eyebrows.
One primary CTA per page, action-specific copy.
Sparse motion — every animation needs a reduced-motion alternative.
WCAG AA contrast in every palette and validation report.
No fabricated proof — no invented logos, testimonials, metrics, prices or integrations. Use a real number, a visibly labelled placeholder, or change the structure.
Never invent components, props, token names or variant values.
Accessibility and behaviour before appearance when adapting.
Never copy pixels, text or layouts 1:1 from a reference — take the feel (density, hierarchy, contrast), take creative liberties.
Catalogue caveats
The 8,157 marketplace records are indexed from src/data/components.json. Their
componentCode and demoCode are often a representative reconstruction
rather than the original upstream file.
Every catalogue result therefore carries:
origin: "catalogue"alongside the local resultsauthor, licence, registry, preview URL and stats
a
sourceNotecaveat and the registry install commandthe instruction to verify the licence and the real implementation before production use
Local components are always ranked first in search and suggestion planning. Catalogue source is a fallback with an explicit warning attached.
Repository layout
my-ui-mcp/
├── mcp/
│ ├── run.mjs # portable entry point every IDE points at
│ ├── server.ts # tool / prompt / resource registration + stdio
│ ├── smoke-test.mjs # end-to-end client test against the real server
│ ├── README.md # deep-dive: internals, catalogue, tokens, dev
│ └── lib/
│ ├── component-index.ts # AST parsing, 8,214-record index, ranking
│ ├── handoff.ts # 7-stage workflow + copy-ready bundles
│ ├── prompt.ts # both prompts
│ ├── suggest.ts # combination planner
│ ├── suggest-recipes.ts # per-surface section recipes
│ ├── suggest-industries.ts
│ ├── validate.ts # composition review
│ ├── css-tokens.ts # globals.css parser + contrast
│ ├── design-principles.ts # the guardrails
│ ├── paths.ts # repo-relative path resolution
│ └── types.ts
├── scripts/setup.mjs # IDE installer
├── examples/ # copy-paste config per IDE
├── src/
│ ├── components/**/*.tsx # 57 verified local exports across 35 files
│ ├── data/components.json # 8,157 catalogue records (~27 MB, diff-suppressed)
│ ├── data/taxonomy.ts # category tree
│ ├── hooks/, lib/ # internal utilities the components import
│ └── app/globals.css # semantic token source
├── .mcp.json # Claude Code, this repo
├── opencode.json # OpenCode, this repo
└── .github/workflows/ci.yml # typecheck + smoke + installer dry-runDevelopment
npm run typecheck # tsc --noEmit over mcp/**
npm run smoke # spawns the real server, exercises all 6 tools
npm run mcp # run the server on stdio by hand (stderr for logs)
npm run setup -- --helpThe smoke test is the contract. It asserts:
exactly 6 tools registered
8,214 components indexed, 8,157 of them catalogue records
list_componentspaging + free-text searchget_component_bundlereturning source for explicit names and deriving a shortlist from a bare requirements briefsuggest_combinationincluding full source blocksboth prompts, all static resources, both resource templates
a real catalogue record's licence and source
Adding a component
Add or edit a
.tsxfile undersrc/components/.Keep props typed; use CVA for variants where it helps.
Use semantic token utilities from
src/app/globals.css.Restart the MCP server — the index is built in memory at startup. There is no generated cache to refresh.
Adding a token
Add the CSS variable and Tailwind mapping in
src/app/globals.css.Restart the server.
Verify with
get_design_tokens.
Updating the catalogue
Replace src/data/components.json, then restart the server and re-run
npm run smoke — the smoke test pins the record count, so update that
assertion alongside the data.
Troubleshooting
Symptom | Fix |
No tools in the client | Use an absolute path to |
Server exits immediately | Run |
|
|
Stale components | Restart the client/server. The index is built at startup. |
Prompt or tool not visible after an update |
|
| Deliberate — see Resources. |
Toggle not visible in another project | OpenCode loads global MCP config inside projects but not in bare directories. Run from inside a git project, or add a project config. |
Catalogue record missing a prop the demo shows | The record's source is a reconstruction. Verify against the upstream author before relying on it. |
License
MIT — see LICENSE.
Available Tools
6 toolsget_component_bundleGet a copy-ready component bundleARead-onlyIdempotent
Return the exact source, copy target, dependencies, adaptation notes, replacement guidance and feedback questions for one or more components. Use this after asking for requirements and before writing or editing code. Provide component names or a requirements brief. Never rewrite a component from its summary.
| Name | Required | Description | Default |
|---|---|---|---|
| components | No | Component names, slugs, import paths or catalogue author/slug values, for example ['Button', 'Input'] or 'Button, Input'. Omit to derive a shortlist from requirements. | |
| requirements | No | The user's brief: what they are building, for whom, the main job, target stack and constraints. Required when components are omitted. | |
| project_context | No | Existing design system, tokens, strategy, component being replaced, editor constraints or feedback already received. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive and closed-world, so the safety profile is covered; the description adds value by disclosing the exact returned artifacts and a hard behavioral rule ('Never rewrite a component from its summary'). It does not discuss volume, latency, or what happens when a requested component is not found, which keeps it below a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences, front-loaded with the returned payload, then when to call it, then the input mode and the key constraint. No filler or restated title.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description compensates by enumerating what comes back, and it supplies the workflow ordering an agent needs. The remaining gap is edge behavior — multiple components in one call, missing components, and how project_context affects results — none of which is stated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, including the components/requirements derivation rule, so the schema carries the parameter burden. The description's 'component names or a requirements brief' only restates that contract without adding syntax or format detail, which is the baseline-3 case.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (Return) and an enumerated resource payload: source, copy target, dependencies, adaptation notes, replacement guidance and feedback questions for one or more components. This 'copy-ready bundle' framing is clearly distinct from the summary-oriented siblings list_components and get_component_details, so an agent can pick it without opening a schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives explicit sequencing — 'Use this after asking for requirements and before writing or editing code' — and states the required input mode ('Provide component names or a requirements brief'). It stops short of naming alternatives or a when-not condition (e.g. use get_component_details when you only need metadata), so it is clear context rather than full routing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_detailsGet component detailsARead-onlyIdempotent
Return one component's metadata, parsed props, CVA variants, dependencies, real usage examples, guidelines, related components and exact source code. The markdown includes a copy target and install instructions. Both local components and marketplace catalogue records are supported.
| Name | Required | Description | Default |
|---|---|---|---|
| component_name | Yes | Component name, slug, export name, file, import path, catalogue author/slug or catalogue record id. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive and closed-world, so the safety profile is covered. The description adds context the annotations cannot: the full shape of the returned content (props, variants, dependencies, examples, source code) and the fact that the response is markdown containing a copy target and install instructions. It also discloses a scope trait — both local and marketplace catalogue records are supported.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no filler. The payload enumeration comes first, followed by the markdown/install note and the local-vs-marketplace scope. Every clause contributes information an agent would otherwise lack.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description carries the return-value burden and does so by naming the content categories and the markdown/install framing. Combined with annotations covering the safety profile and a fully documented single parameter, nothing an agent needs to invoke this correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single parameter's description already enumerates the accepted identifier forms (name, slug, export name, file, import path, catalogue author/slug, record id). The description adds nothing beyond that, so the baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description gives a precise verb ('Return one component's') and then enumerates the exact payload: metadata, parsed props, CVA variants, dependencies, usage examples, guidelines, related components and source code. That is far more specific than a bare 'get details'. It does not, however, differentiate itself from the sibling get_component_bundle, which an agent could plausibly confuse with a single-component lookup.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: an agent infers it should call this when it needs details for one named component, versus list_components for enumeration. There is no explicit when-to-use, no exclusion or prerequisite, and no mention of when get_component_bundle or get_design_tokens would be the better choice.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_design_tokensGet My Ui design tokensARead-onlyIdempotent
Expose semantic colours, typography, spacing, radius, shadows and animation tokens, with CSS variables, guidance and contrast pairs.
| Name | Required | Description | Default |
|---|---|---|---|
| token_type | No | Token family to return. Defaults to all. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare this as a read-only, idempotent, non-destructive, closed-world operation, so the safety profile is fully covered. The description adds value beyond that by disclosing what the payload contains — CSS variables, guidance, and contrast pairs — which matters because there is no output schema. It stops short of describing size or structure of the response.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence that front-loads the verb and enumerates the token families with zero preamble. The enumeration is slightly list-like but every item maps to a real return category, so nothing is wasted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
This is a simple, parameter-light read tool whose safety profile is fully covered by annotations and whose only input is fully covered by the schema. The description compensates for the missing output schema by naming the returned artifacts (CSS variables, guidance, contrast pairs). Only the shape and size of the response remain unspecified, which is a minor gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single parameter has an enumerated list, so the schema fully documents the token_type selector. The description restates the same token families as its content list but adds no filtering syntax or format guidance beyond what the schema provides, making 3 the correct baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description gives a clear verb ('Expose') and a concrete resource ('semantic colours, typography, spacing, radius, shadows and animation tokens'), so the agent immediately knows what comes back. It does not explicitly differentiate itself from siblings, though the sibling names (list_components, get_component_details, etc.) are component-oriented rather than token-oriented, making the distinction largely inferable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: an agent can infer this is the tool to call when it needs design token values. There is no explicit 'use this when…', no statement of prerequisites, and no routing away from alternatives. The default-to-all behavior is only stated in the schema, not in the description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList My Ui componentsARead-onlyIdempotent
List verified local components plus all 8,157 marketplace catalogue records, with category, origin, author, import path, description, prop count, variants and usage references. Filter by category, query or kind. Results are summaries only; call get_component_bundle or get_component_details for copy-ready source before writing code.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | Component kind. Use 'catalogue' for marketplace records. | |
| limit | No | Maximum number of components to return. Defaults to 50. | |
| query | No | Free-text search over names, tags, props, descriptions and files. | |
| category | No | Category name or slug, for example 'Primitives' or 'ui'. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already establish read-only, idempotent, non-destructive, closed-world behavior, so the description only needs to add context beyond that. It does so by disclosing that results are summaries rather than source, listing the returned metadata fields, and routing the agent to other tools for full source. It does not mention pagination behavior or how the 8,157 marketplace records are paged, but the core behavioral limitation is clearly surfaced.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two efficient sentences with no waste. It front-loads the scope and returned fields, then adds filters and the critical summaries-only caveat in a logical order.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description compensates by naming the returned metadata fields and clarifying that results are summaries only. Combined with annotations covering safety and the schema covering filter syntax, an agent has enough information to invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the input schema already documents all four parameters, including the enum meaning for catalogue mode and the limit default. The description adds a high-level filter summary but little parameter-specific meaning beyond what the schema provides. The baseline of 3 is appropriate when the schema carries parameter semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource: listing UI components, with precise scope covering verified local components and all 8,157 marketplace catalogue records. It also differentiates from siblings by explaining that results are summaries and that get_component_bundle or get_component_details must be called for source code, so an agent can tell these apart without opening schemas.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly says to filter by category, query or kind, and names the alternative tools to use when copy-ready source is needed. The condition for switching tools is clear: get_component_bundle or get_component_details should be called before writing code. No relevant when-to-use guidance is missing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
suggest_combinationSuggest a component combinationARead-onlyIdempotent
Turn a use case into a subject-driven design direction: palette, type pairing, alignment, ASCII wireframe, local component selection, review notes, gaps, a TSX scaffold and the exact source of every selected component. Copy the source blocks before editing; do not regenerate them.
| Name | Required | Description | Default |
|---|---|---|---|
| use_case | Yes | What the user is building, for whom, and the job it must do. | |
| constraints | No | Optional constraints, one per line or separated by semicolons. | |
| surface_type | No | One of: landing, dashboard, auth, pricing, settings, docs, onboarding, mobile, editor, marketplace, profile, generic. Inferred when omitted. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint and destructiveHint=false, so the safety profile is covered. The description adds real value beyond that: it discloses the full output composition and a concrete workflow rule ('Copy the source blocks before editing; do not regenerate them'), which tells the agent how to treat the returned source.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the purpose and then the operator instruction. The artifact list is dense but every item earns its place by telling the agent what comes back.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, so the description appropriately enumerates the return contents in lieu of one. Combined with annotations covering the safety profile and 100% schema coverage on parameters, an agent has nearly everything needed to call it correctly; only sibling routing is absent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so use_case, constraints and surface_type are all already documented in the schema. The description adds no syntax, format or defaulting detail beyond what the schema provides, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific transformation (use case -> design direction) and enumerates the concrete artifacts produced: palette, type pairing, wireframe, TSX scaffold, component source. That is far more than a restatement of the title. It does not, however, explicitly differentiate itself from siblings like get_design_tokens or validate_ui_composition.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description conveys the input-to-output story but never says when to reach for this tool versus the five siblings. There is no when-not guidance and no named alternative, leaving the agent to infer the routing decision.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_ui_compositionValidate a UI compositionARead-onlyIdempotent
Check a TSX, JSX, HTML or CSS snippet for accessibility, token, specificity, typography, motion, copy, generic-default and proof problems.
| Name | Required | Description | Default |
|---|---|---|---|
| file_name | No | Optional file name for the report. | |
| code_snippet | Yes | The composition code to inspect. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, non-destructive and closed-world, so the safety profile is covered. The description adds the analysis scope (accessibility, token, specificity, typography, motion, copy, generic-default, proof checks), which is useful context, but says nothing about output format, severity levels, or whether any fix suggestions are returned.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence with the verb and resource front-loaded and the check categories packed efficiently. Nothing is wasted and nothing is repeated from the title.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema, so the description carries the burden of describing what comes back; it names the problem categories but never says whether the result is a report, a list of findings, a pass/fail, or how 'file_name' shapes that report. For a no-output-schema validation tool this leaves a real gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% with only two simple parameters, so the schema already documents both 'code_snippet' and 'file_name'. The description adds no format, language-detection, or size-limit guidance beyond what the schema states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('Check') plus the resource (TSX, JSX, HTML or CSS snippet) and enumerates the exact problem classes it looks for. This is clearly distinguishable from the sibling tools, which are all design-system lookups (list_components, get_design_tokens, etc.) rather than validators.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The purpose implies you call it when you have a composition snippet to inspect, but there is no explicit when-to-use, no prerequisites, and no routing away from siblings. An agent must infer the trigger condition from the purpose statement alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
6 tool updates
v1.0.0- First observed
get_component_bundle - First observed
get_component_details - First observed
get_design_tokens - First observed
list_components - First observed
suggest_combination - First observed
validate_ui_composition
TDQS
Scored across 6 tools
Most tools are distinct, but get_component_details and get_component_bundle overlap heavily: both return exact source code and dependencies for components, and list_components even tells agents to call either one for copy-ready source. The bundle's multi-component/adaptation angle helps, but an agent can easily misselect between the two.
All six tools follow a clean verb_noun snake_case pattern (list_components, get_component_details, get_component_bundle, suggest_combination, get_design_tokens, validate_ui_composition). No mixed conventions or vague verbs.
Six tools is a well-scoped set for a component-source MCP, covering discovery, retrieval, tokens, suggestion and validation. The only slight redundancy is the details/bundle pair, which keeps it from a perfect score.
The surface covers the full workflow: listing/filtering, fetching metadata, fetching source bundles, tokens, design direction and validation. Minor gaps exist (no explicit versioning or project-write/install tool, though install instructions are embedded), but agents can work around them.
Maintenance
Related MCP Connectors
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Serves your design system and coding standards to coding agents, so they stop guessing.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.221 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables AI IDEs to query Figma design tokens, component specs, and audit issues via MCP tools, without cloud subscriptions.MIT
- FlicenseNot gradedqualityBmaintenanceEnables AI coding assistants to search, discover, and retrieve UI HUB components, source code, dependencies, templates, and animations via MCP.-
- FlicenseNot gradedqualityBmaintenanceEnables coding agents to search and retrieve 500+ production-ready React and Tailwind UI sections, page recipes, and brand-styled components over MCP, along with imagery and social post templates.-