Skip to main content
Glama
tony9020
by tony9020

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 .tsx files, parsed with the TypeScript AST. Always ranked first.

Marketplace catalogue

All 8,157 records in src/data/components.json, including componentCode, demoCode, author, licence, stats and tags. Marked origin: "catalogue" with a source caveat.

Design tokens

Parsed live from src/app/globals.css — colour, typography, spacing, radius, shadow and motion with WCAG contrast pairs.

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 all

Expected smoke output:

PASS tools=6 components=8214 catalogue=8157 suggestions=5sections sources=8 bundle=2 prompt=15713chars handoff=18879chars resources=62

Then 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

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 + scopes

Flag

Effect

--ide <ids>

Comma-separated list, or all.

--scope global

Write to the IDE's user config (default — makes it work in every project).

--scope project

Write to a specific project. Use --dir to choose it.

--name <name>

Server name to register (default myui-mcp).

--dry-run

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 all only 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.mjs

mcp/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

~/.config/opencode/opencode.json

mcp.servers

examples/opencode.json

Claude Code

~/.claude.json or <project>/.mcp.json

mcpServers

examples/claude-code.mcp.json

Claude Desktop

claude_desktop_config.json

mcpServers

examples/claude-desktop.json

Cursor

~/.cursor/mcp.json or <project>/.cursor/mcp.json

mcpServers

examples/cursor.mcp.json

VS Code

<project>/.vscode/mcp.json or user mcp.json

servers

examples/vscode.mcp.json

Windsurf

~/.codeium/windsurf/mcp_config.json

mcpServers

—

Zed

~/.config/zed/settings.json

context_servers

examples/zed-settings.json

OpenCode specifics

  • Tools appear as myui_list_components, myui_get_component_bundle, … or under tools.myui.* in Code Mode.

  • Prompts appear as /myui:design_layout_guide and /myui:component_handoff.

  • The server appears as myui in opencode mcp list when 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.json and .mcp.json for 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://handoff resource, or /myui:component_handoff.

Stage 1 — Ask for the brief

No component selection, no code. The assistant asks, in one compact block:

  1. What are you building, for whom, and what is the one job the surface must do?

  2. Which components or roles do you need? (name them, or describe slots like navigation, form, table, dialog, empty state, editor toolbar)

  3. What is the target stack, framework, import alias and component folder?

  4. What design system, tokens, typography and strategy already exist?

  5. Are you replacing an existing component? If so, share its props, variants, states, behaviour and source.

  6. What must stay identical: API, analytics, form integration, keyboard behaviour, copy or tests?

  7. What constraints apply: licence, dependencies, accessibility, responsive breakpoints, bundle size, browser support?

  8. 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:

  1. Keep behaviour, accessibility and analytics stable.

  2. Map existing colours, type, spacing and radius to semantic roles.

  3. Use component props or variants before adding wrapper classes.

  4. Edit component source only when the API cannot express the need.

  5. 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

list_components

category?, query?, kind?, limit?

Pages through verified local components and catalogue records with import path, category, origin, author, prop count, variants and usage references. kind: "catalogue" returns the 8,157 marketplace records. Summaries only — call get_component_bundle for copy-ready source.

get_component_bundle

components?, requirements?, project_context?

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.

get_component_details

component_name

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 author/slug, or a catalogue record id.

suggest_combination

use_case, surface_type?, constraints?

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.

get_design_tokens

token_type?

Colours, typography, spacing, radius, shadows or animations with CSS variables, guidance and contrast pairs.

validate_ui_composition

code_snippet, file_name?

Accessibility, tokens, specificity, typography, motion, copy, generic defaults and proof patterns.


Prompts

Prompt

Arguments

Purpose

/myui:component_handoff

requirements?, components?, project_context?

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.

/myui:design_layout_guide

use_case?, surface_type?, constraints?

Plan → Review → Build → Critique for a whole page.


Resources

URI

Contents

myui://components

Compact index of all 8,214 components: id, name, slug, origin, author, category, import path, prop count.

myui://design-tokens

Full parsed token model as JSON.

myui://design-principles

Design philosophy, anti-patterns and checklist as Markdown.

myui://handoff

The 7-stage protocol, including replacement and style-decision rules.

myui://inventory

Human-readable verified local inventory + catalogue category summary.

myui://components/{slug}

One verified local component: props, variants, examples, guidelines, source.

myui://catalogue/{author}/{slug}

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://components is compact: the MCP stdio frame limit is 10 MB. The index carries one summary row per record; use get_component_bundle, get_component_details or myui://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 results

  • author, licence, registry, preview URL and stats

  • a sourceNote caveat and the registry install command

  • the 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-run

Development

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 -- --help

The smoke test is the contract. It asserts:

  • exactly 6 tools registered

  • 8,214 components indexed, 8,157 of them catalogue records

  • list_components paging + free-text search

  • get_component_bundle returning source for explicit names and deriving a shortlist from a bare requirements brief

  • suggest_combination including full source blocks

  • both prompts, all static resources, both resource templates

  • a real catalogue record's licence and source

Adding a component

  1. Add or edit a .tsx file under src/components/.

  2. Keep props typed; use CVA for variants where it helps.

  3. Use semantic token utilities from src/app/globals.css.

  4. Restart the MCP server — the index is built in memory at startup. There is no generated cache to refresh.

Adding a token

  1. Add the CSS variable and Tailwind mapping in src/app/globals.css.

  2. Restart the server.

  3. 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 mcp/run.mjs. Clients often have a different working directory. Re-run npm run setup -- --ide <your-ide> to regenerate it.

Server exits immediately

Run npm run mcp in a terminal and read stderr. Never add console.log to server code — stdout must remain valid JSON-RPC.

Missing dependency from run.mjs

npm install in this repo, then restart the client.

Stale components

Restart the client/server. The index is built at startup.

Prompt or tool not visible after an update

opencode reload, or restart the IDE. MCP servers are spawned at session start.

myui://components looks compact

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 tools
get_component_bundleGet a copy-ready component bundleA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault
componentsNoComponent names, slugs, import paths or catalogue author/slug values, for example ['Button', 'Input'] or 'Button, Input'. Omit to derive a shortlist from requirements.
requirementsNoThe user's brief: what they are building, for whom, the main job, target stack and constraints. Required when components are omitted.
project_contextNoExisting design system, tokens, strategy, component being replaced, editor constraints or feedback already received.

TDQS

A4.2/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 detailsA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault
component_nameYesComponent name, slug, export name, file, import path, catalogue author/slug or catalogue record id.

TDQS

A3.9/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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 tokensA
Read-onlyIdempotent

Expose semantic colours, typography, spacing, radius, shadows and animation tokens, with CSS variables, guidance and contrast pairs.

ParametersJSON Schema
NameRequiredDescriptionDefault
token_typeNoToken family to return. Defaults to all.

TDQS

A3.7/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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 componentsA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault
kindNoComponent kind. Use 'catalogue' for marketplace records.
limitNoMaximum number of components to return. Defaults to 50.
queryNoFree-text search over names, tags, props, descriptions and files.
categoryNoCategory name or slug, for example 'Primitives' or 'ui'.

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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 combinationA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault
use_caseYesWhat the user is building, for whom, and the job it must do.
constraintsNoOptional constraints, one per line or separated by semicolons.
surface_typeNoOne of: landing, dashboard, auth, pricing, settings, docs, onboarding, mobile, editor, marketplace, profile, generic. Inferred when omitted.

TDQS

A3.5/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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 compositionA
Read-onlyIdempotent

Check a TSX, JSX, HTML or CSS snippet for accessibility, token, specificity, typography, motion, copy, generic-default and proof problems.

ParametersJSON Schema
NameRequiredDescriptionDefault
file_nameNoOptional file name for the report.
code_snippetYesThe composition code to inspect.

TDQS

A3.7/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

  1. 6 tool updatesv1.0.0
    • First observedget_component_bundle
    • First observedget_component_details
    • First observedget_design_tokens
    • First observedlist_components
    • First observedsuggest_combination
    • First observedvalidate_ui_composition

TDQS

A3.8/5.0

Scored across 6 tools

Disambiguation3/5

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.

Naming Consistency5/5

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.

Tool Count4/5

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.

Completeness4/5

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

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Provides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.
    221 npm
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI IDEs to query Figma design tokens, component specs, and audit issues via MCP tools, without cloud subscriptions.
    MIT
  • F
    license
    Not graded
    quality
    B
    maintenance
    Enables AI coding assistants to search, discover, and retrieve UI HUB components, source code, dependencies, templates, and animations via MCP.
    -
  • F
    license
    Not graded
    quality
    B
    maintenance
    Enables 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.
    -