UI Toolkit MCP Server
Provides tools to generate and audit Angular UI components, compose layouts from a registry, and generate Storybook stories for Angular components.
Integrates with Figma to extract design tokens from Figma files via the REST API, enabling import of styles and variables.
Provides tools to generate and audit React UI components, compose layouts from a registry, and generate Storybook stories for React components.
Generates CSF3 Storybook stories with prop detection, play functions, and accessibility addon configuration for component code.
Provides tools to generate and audit Svelte UI components, compose layouts from a registry, and generate Storybook stories for Svelte components.
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., "@UI Toolkit MCP ServerGenerate a button component in React"
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.
UI Toolkit MCP Server
The most comprehensive UI MCP server available. 13 tools, 5 resources, 3 prompts for end-to-end UI development: generate components, manage design tokens, audit accessibility, auto-fix issues, inspect live pages, compare screenshots, generate Storybook stories, extract Figma styles, compose layouts, and preview responsive designs -- across React, Vue, Svelte, Angular, and Web Components.
Works with any MCP-compatible client including Claude Desktop, Claude Code, Cursor IDE, Continue.dev, Cline, and Zed.
Installation
npx (No Install)
npx -y @elsahafy/ui-toolkit-mcpnpm (Global)
npm install -g @elsahafy/ui-toolkit-mcpClaude Code CLI
claude mcp add ui-toolkit -- npx -y @elsahafy/ui-toolkit-mcpClaude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"ui-toolkit": {
"command": "npx",
"args": ["-y", "@elsahafy/ui-toolkit-mcp"]
}
}
}Cursor IDE
Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"ui-toolkit": {
"command": "npx",
"args": ["-y", "@elsahafy/ui-toolkit-mcp"]
}
}
}Optional: Browser Tools
For inspect_page, live_audit, and responsive_preview, install Playwright separately:
npm install playwright
npx playwright install chromiumAll other tools work without Playwright.
Related MCP server: memoire
Tools (13)
Component Generation
generate_component
Generate production-ready UI components from natural language. Automatically audits the output and reports issues inline.
"Generate a card component with image, title, and action buttons in React"Parameters:
description(required) -- What to buildframework(required) --react|vue|svelte|angular|web-componentscomponent_name(required) -- PascalCase name (e.g.,ProductCard)variant--default|outlined|filled|ghost|elevatedsize--sm|md|lg|xlauto_audit-- Automatically audit generated output (default: true)include_styles-- Include CSS with design tokens (default: true)include_tests-- Generate test file (default: false)responsive-- Include breakpoints (default: true)
Generated components are automatically registered in the component registry.
compose_layout
Compose a full page layout from previously generated components in the registry.
"Compose a page from Hero, Features, and Footer components in React"Parameters:
component_names(required) -- Array of component names from the registryframework(required) -- Target frameworklayout_description-- Description of the page layout
Produces a complete page with imports, semantic structure (<header>, <main>, <footer>), and skip navigation.
Design Tokens
import_design_tokens
Import design tokens from Figma Tokens JSON, Style Dictionary, or CSS custom properties.
Parameters:
tokens_json(required) -- Raw JSON string of tokensformat(required) --figma-tokens|style-dictionary|css-custom-propertiesnamespace-- Optional prefix (e.g.,brand)merge_strategy--replace|merge-overwrite|merge-keep
extract_figma_styles
Extract design tokens directly from a Figma file via the REST API.
Parameters:
figma_file_key(required) -- Alphanumeric file key from Figma URLfigma_pat(required) -- Figma Personal Access Token (never stored or logged)node_ids-- Optional specific nodes to extractnamespace-- Optional CSS variable prefixmerge_strategy-- How to handle existing tokens
export_tokens
Export the active token store as CSS custom properties, JSON, or Style Dictionary format.
Parameters:
format--css|json|style-dictionary(default:css)
clear_tokens
Clear all design tokens from the active store.
Auditing & Fixing
audit_component
Audit markup for WCAG accessibility, performance, and responsive design issues. Returns scored findings with fix suggestions.
Parameters:
markup(required) -- HTML/JSX/Vue/Svelte markupcomponent_name-- For report labelingcategories--["accessibility", "performance", "responsive"]wcag_level--A|AA|AAAframework-- Affects how markup is parsed
29 built-in rules: 12 accessibility (WCAG), 9 performance, 8 responsive design.
auto_fix_component
Automatically fix common accessibility and performance issues based on audit findings.
"Auto-fix the accessibility issues in this component"Parameters:
markup(required) -- The markup to fixfindings(required) -- Array of AuditFinding objects fromaudit_component
Supported auto-fixes: missing alt text, missing lang attribute, missing lazy loading, positive tabindex, px font-sizes to rem.
live_audit
Navigate to a live URL and audit the rendered HTML. Combines browser inspection with markup auditing in one call. Requires Playwright.
Parameters:
target_url(required) -- HTTP/HTTPS URL (private IPs blocked)categories-- Audit categories to runwcag_level-- WCAG conformance level
Browser Tools (Playwright)
Install separately:
npm install playwright && npx playwright install chromium
inspect_page
Navigate to a live URL and extract accessibility tree, component structure, performance metrics, and screenshot.
Parameters:
target_url(required) -- HTTP/HTTPS URL (private IPs blocked)viewport_width/viewport_height-- Viewport sizewait_for--load|domcontentloaded|networkidletimeout_ms-- Navigation timeoutinclude_screenshot-- Base64 PNG screenshot (default: true)
visual_diff
Pixel-by-pixel PNG comparison for visual regression testing. No Playwright required.
Parameters:
before_image(required) -- Base64 PNGafter_image(required) -- Base64 PNGthreshold-- Per-channel tolerance (0-255, default: 10)
responsive_preview
Screenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports. Requires Playwright.
Parameters:
target_url(required) -- HTTP/HTTPS URL (private IPs blocked)
Storybook
generate_story
Auto-generate CSF3 Storybook stories with prop detection, play functions, and accessibility addon config.
Parameters:
component_code(required) -- Full component source codeframework(required) --react|vue|svelte|angularcomponent_name(required) -- PascalCase namestory_title-- Storybook path (default:Components/{name})
Detects props via regex from: TypeScript interfaces (React), defineProps (Vue), export let (Svelte), @Input() (Angular).
Resources (5)
URI | Description |
| Currently loaded design tokens |
| Component pattern library (12 patterns with a11y requirements) |
| Registry of all generated components with audit scores |
| Server version, tool count, token count, uptime |
| Full audit rule reference (auto-generated from rule definitions) |
Prompts (3)
Prompt | Description |
| Generate a full page with multiple components using design tokens |
| Comprehensive audit + fix workflow |
| Full Figma-to-code: extract tokens, generate components, audit, generate stories |
Key Features
Audit-at-Generation-Time
Every component generated by generate_component is automatically audited for accessibility, performance, and responsive issues. Critical findings are reported inline. No other UI MCP server does this.
Component Registry
All generated components are tracked with metadata (framework, tokens used, audit score, timestamp). Use compose_layout to assemble them into full pages.
Design Token Pipeline
Import tokens from Figma, Style Dictionary, or CSS custom properties. Export in any format. Tokens are automatically applied to generated components.
Framework Agnostic
All 13 tools support React, Vue, Svelte, Angular, and Web Components. One server, any framework.
Architecture
src/
index.ts # Server entry (thin orchestrator)
lib/
types.ts # Shared TypeScript interfaces
token-store.ts # In-memory design token state
component-registry.ts # Component tracking
framework-templates.ts # 5 framework component generators
story-templates.ts # CSF3 story templates + prop detection
accessibility-rules.ts # 12 WCAG audit rules
performance-rules.ts # 9 performance audit rules
responsive-rules.ts # 8 responsive design rules
pattern-library.ts # 12 component patterns
browser.ts # Playwright lifecycle + URL validation
validation.ts # Shared input validation
utils.ts # Shared utilities (kebab, clamp, fileExt)
tools/
generate-component.ts # + auto-audit + registry
import-design-tokens.ts
audit-component.ts
auto-fix-component.ts
inspect-page.ts
visual-diff.ts
generate-story.ts
extract-figma-styles.ts
export-tokens.ts
clear-tokens.ts
live-audit.ts
responsive-preview.ts
compose-layout.ts
index.ts # Tool registry + dispatch
resources/
index.ts # 5 resources
prompts/
index.ts # 3 workflow prompts
tests/
lib/ # 11 library test files
tools/ # 12 tool test files184 tests across 23 test files. All source files have dedicated test coverage.
Security
No code execution -- all
markupparameters are analyzed via regex, never evaluatedURL validation blocks private IPs (127.x, 10.x, 172.16-31.x, 192.168.x, fe80::, fc00::, localhost)
Only HTTP/HTTPS schemes allowed for browser tools
Figma PAT is never stored, logged, or returned in responses (sanitized from error messages)
All string inputs have
maxLengthconstraints enforced at runtimeNo credential keywords in resource URIs
Input validation helper shared across all tool handlers
License
MIT
Available Tools
13 toolsaudit_componentA
Audit HTML/JSX/Vue/Svelte markup for accessibility (WCAG), performance, and responsive design issues. Returns scored findings with fix suggestions.
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes | HTML, JSX, Vue SFC, or Svelte markup to audit | |
| framework | No | Framework of the markup (affects parsing) | html |
| categories | No | Audit categories to run. Defaults to all three. | |
| wcag_level | No | WCAG conformance level | AA |
| component_name | No | Name of the component (for report labeling) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it does add one useful behavioral fact: the tool returns scored findings with fix suggestions. However, it omits whether this is purely static analysis (no runtime/rendered DOM), whether it mutates anything, and any size or rate constraints, so the disclosure is partial.
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 tightly packed sentences, front-loaded with the action and resource, then the return value. No filler, no redundancy.
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, but the description compensates by stating the return shape (scored findings with fix suggestions), and all parameters are documented in the schema. Minor gap: it does not clarify the static-vs-runtime nature of the analysis, which matters given the live_audit sibling.
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 framework, categories, wcag_level, and component_name are already fully documented in the schema. The description adds no meaning beyond that baseline (e.g., how framework changes parsing or what happens when categories is omitted).
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?
Uses a specific verb ('Audit') with a clearly bounded resource ('HTML/JSX/Vue/Svelte markup') and enumerates the three analysis dimensions (accessibility/WCAG, performance, responsive). An agent can tell it is a static markup analyzer, but it never names or distinguishes itself from close siblings such as live_audit or auto_fix_component.
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: the input types suggest 'use this when you have source markup to check.' There is no statement of when to prefer it over live_audit (runtime page auditing) or auto_fix_component (applying fixes), nor any prerequisites or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
auto_fix_componentA
Automatically fix common accessibility and performance issues in markup based on audit findings. Returns the corrected markup with a list of applied fixes.
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes | The markup to fix | |
| findings | Yes | Array of AuditFinding objects from audit_component |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry behavioral disclosure. It usefully bounds scope to 'common' accessibility and performance issues and states the return value, implying a non-destructive transform that hands back markup. It does not say whether every finding will be fixed, what happens to unfixable findings, or whether anything is written to disk.
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 tight sentences: the fix behavior and its scope lead, followed by the return value. No padding or repetition of the schema.
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?
For a two-parameter tool with no output schema and no annotations, the description covers purpose, scope limits, and the return shape (corrected markup plus applied-fix list). It is only mildly short on edge-case behavior such as findings it cannot auto-fix.
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 both parameters (markup, findings) are already documented in the schema. The description adds no syntax, format, or size guidance beyond referencing 'audit findings', 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 verb (fix) and resource (markup issues) scoped to accessibility and performance problems derived from audit findings. The phrase 'based on audit findings' effectively ties it to the audit_component sibling, though it does not name that sibling outright.
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: the input 'findings' come from an audit, so the natural workflow (audit_component then auto_fix_component) is inferable. There is no explicit statement of when to use this versus auditing again, nor when not to run it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
clear_tokensA
Clear all design tokens from the active token store. Use this to reset before importing a new set of tokens.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It does disclose the destructive scope ('clear all design tokens from the active token store'), which is the key behavioral fact, but says nothing about reversibility, undo, permissions, or confirmation, leaving significant gaps for a destructive operation.
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 short sentences, front-loaded with the action and scope, followed immediately by the use case. No filler or repetition.
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?
For a zero-parameter tool with no output schema and no annotations, the description covers purpose, scope, and intended timing adequately. It could add whether the operation is irreversible or what state remains after clearing, but nothing essential for invocation 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?
The tool takes zero parameters, so there are no parameter semantics to explain and the baseline of 4 applies. The description correctly implies no filtering options exist ('all tokens').
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 and resource — 'Clear all design tokens from the active token store' — with scope ('all') and target ('active token store'). It implies differentiation from import_design_tokens via the reset scenario, but does not explicitly name or contrast sibling tools.
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 a concrete situation for use: 'reset before importing a new set of tokens.' That is clear context, but there are no exclusions (e.g., what to do instead if you only want to remove a subset, or whether a backup/export is required first).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
compose_layoutA
Compose a page layout from previously generated components in the registry. Produces a full page with imports, semantic structure, and skip navigation.
| Name | Required | Description | Default |
|---|---|---|---|
| framework | Yes | Target framework for the composed page | |
| component_names | Yes | Array of component names from the registry to compose into a page | |
| layout_description | No | Description of the page layout |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It discloses meaningful output traits (imports, semantic structure, skip navigation), which is more than a bare restatement, but it omits failure modes, permission/auth needs, or what happens when a component name is unknown.
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 core action and zero filler. Every clause earns its place by adding scope or output detail.
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?
For a three-parameter tool with no output schema and no annotations, the description usefully sketches the return artifact ('a full page with imports, semantic structure, and skip navigation'). It is still thin on edge cases and on the relationship between component_names and the framework's expected output.
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 enum for framework is documented, so the schema does the heavy lifting. The description adds no parameter-level meaning (e.g., that component_names must match registry keys), so the baseline of 3 is appropriate.
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 ('Compose') and resource ('page layout') and scopes the source ('previously generated components in the registry'), which implicitly distinguishes it from the single-component sibling generate_component. It stops short of naming or directly contrasting with any sibling, but the resource is unambiguous.
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 phrase 'previously generated components in the registry' implies a precondition (components must already exist before composing), which is a useful usage cue. However, there is no explicit when-to-use vs. alternatives guidance, no mention of what to do if components are missing, and no routing to siblings such as generate_component.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
export_tokensB
Export active design tokens as CSS custom properties, JSON, or Style Dictionary format.
| Name | Required | Description | Default |
|---|---|---|---|
| format | No | Export format | css |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It hints that only 'active' tokens are exported, which is useful, but does not say whether output is returned inline or written to a file, nor whether the operation is read-only or mutating.
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 front-loaded sentence with no filler; every clause (verb, resource, formats) earns its place.
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?
For a simple one-parameter tool with no output schema, the description covers purpose and formats adequately, but omits the delivery mechanism (return value vs. file) and any usage context, leaving a meaningful gap for an unannotated tool.
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?
With a single parameter at 100% schema coverage, the baseline is 3. The description restates the enum options and slightly clarifies what 'css' means (CSS custom properties), but adds little beyond the schema's own enum.
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?
Names a specific verb (Export) and resource (active design tokens) and enumerates the three target formats. It implicitly contrasts with siblings like import_design_tokens and clear_tokens, but never explicitly distinguishes itself from them.
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 never states when to export versus using an alternative sibling, nor any prerequisites or context of use. An agent must infer the appropriate moment to call it purely from the name.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_figma_stylesA
Extract design tokens (colors, typography, effects) from a Figma file via the Figma REST API. Normalizes tokens and loads them into the active token store. Requires a Figma Personal Access Token.
| Name | Required | Description | Default |
|---|---|---|---|
| node_ids | No | Optional specific node IDs to extract. If omitted, extracts all published styles. | |
| figma_pat | Yes | Figma Personal Access Token for API access. Not stored or logged. Generate at figma.com/developers/api#access-tokens | |
| namespace | No | Optional prefix for extracted token CSS variables (e.g., 'figma' produces --figma-color-primary) | |
| figma_file_key | Yes | The Figma file key (alphanumeric ID from the file URL, e.g., 'abc123XYZ') | |
| merge_strategy | No | How to handle conflicts with existing tokens | replace |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does reasonably well: it discloses that a Personal Access Token is required, that extraction goes through a remote REST API, and that tokens are normalized and written into the active token store (a mutating side effect). It still omits what happens to pre-existing tokens when merge_strategy is left at its default and any rate-limit/error behavior.
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 short sentences, purpose front-loaded, no filler. The final auth sentence partially duplicates the figma_pat schema description, which keeps it just short of ideal.
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?
Covers source, destination, auth, and normalization for a 5-parameter tool with no annotations. The main gap is that no output schema exists and the description never indicates what the call returns or how success/failure is reported.
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 all five parameters are already documented in the schema, including the PAT, the namespace prefix, and the merge_strategy enum. The description adds nothing beyond 'Requires a Figma Personal Access Token', which the schema already states, 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 verb (extract) and resource (design tokens: colors, typography, effects), names the source (Figma REST API) and the destination (active token store). This clearly separates it from generic token siblings, though it never explicitly contrasts itself with import_design_tokens.
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?
No when-to-use guidance, no exclusions, and the obviously related sibling import_design_tokens is never referenced. The agent must infer that this tool is the Figma-specific path and that other importers cover other sources.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_componentA
Generate a production-ready UI component in any framework (React, Vue, Svelte, Angular, Web Components) from a natural language description. Uses active design tokens if loaded.
| Name | Required | Description | Default |
|---|---|---|---|
| size | No | Size preset | md |
| variant | No | Visual variant style | default |
| framework | Yes | Target UI framework for the generated component | |
| auto_audit | No | Automatically audit the generated component and report findings (default: true) | |
| responsive | No | Include responsive breakpoint styles | |
| description | Yes | Natural language description of the component (e.g., 'a card with image, title, description, and action buttons') | |
| include_tests | No | Generate a companion test file | |
| component_name | Yes | PascalCase name for the component (e.g., 'ProductCard') | |
| include_styles | No | Include CSS styles using active design tokens |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses two useful traits: output is 'production-ready' and token-aware ('uses active design tokens if loaded'). It does not explain side effects (does it write files?), what auto_audit actually does at runtime, or auth/permission needs.
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 tightly packed sentences with no filler; the core action is front-loaded and the token dependency is stated second as a qualifier.
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?
For a 9-parameter generator with no output schema and no annotations, the description is merely adequate. It never describes what the tool returns (code snippet, file path?) or how include_tests/auto_audit manifest, leaving those to the schema alone.
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 all nine parameters are already documented by the schema, including enums and defaults. The description adds no syntax or format detail beyond restating the framework list, so the baseline 3 is appropriate.
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 (Generate) and resource (UI component) and enumerates the supported frameworks, so the agent knows exactly what it produces. It does not name or contrast against siblings like generate_story or compose_layout, but the purpose itself is unambiguous.
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 implied by the generation verb, and the phrase 'Uses active design tokens if loaded' hints at a precondition (run import_design_tokens first). However, there is no explicit when-to-use versus alternatives guidance and no exclusion conditions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_storyB
Auto-generate a Storybook story file (CSF3 format) for a UI component. Detects props from code, includes default story, variant stories, play functions, and accessibility addon config.
| Name | Required | Description | Default |
|---|---|---|---|
| framework | Yes | Framework the component is written in | |
| story_title | No | Storybook story title/path (e.g., 'Components/ProductCard'). Defaults to 'Components/{component_name}' | |
| component_code | Yes | Full source code of the component to generate stories for | |
| component_name | Yes | PascalCase name of the component (e.g., 'ProductCard') |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It usefully discloses the generated output shape (CSF3, default + variant stories, play functions, a11y addon config), but says nothing about whether a file is written to disk, its path, overwrite behavior, or error conditions for unsupported frameworks.
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 tight sentences, front-loaded with the action and artifact format, then the contents. No filler or redundancy.
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?
For a generation tool with no annotations and no output schema, the description explains what the artifact contains but omits where it is written, what the tool returns, and any failure modes. Adequate but with clear gaps for an agent invoking it.
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 all four parameters are already documented, including the framework enum and the story_title default. The phrase 'Detects props from code' hints that component_code is parsed, but no param-level detail is added beyond the schema, 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 verb ('Auto-generate') and resource ('Storybook story file (CSF3 format) for a UI component'), and enumerates the artifact contents (default story, variant stories, play functions, a11y config). It is distinguishable from generate_component, but it never names that sibling explicitly, so the differentiation is left implicit.
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?
There is no when-to-use guidance, no prerequisites (e.g., must exist alongside generate_component), and no alternatives named among the many siblings. The only implied context is 'for a UI component', which is too thin to route an agent between this and generate_component.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
import_design_tokensA
Import design tokens from Figma Tokens JSON, Style Dictionary, or CSS custom properties into the active token store. Imported tokens are used by generate_component for styling.
| Name | Required | Description | Default |
|---|---|---|---|
| format | Yes | Format of the provided token data | |
| namespace | No | Optional prefix for all imported tokens (e.g., 'brand' produces --brand-color-primary) | |
| tokens_json | Yes | Raw JSON string of design tokens. Supports Figma Tokens, Style Dictionary, or flat CSS custom properties format. | |
| merge_strategy | No | How to handle conflicts with existing tokens. 'replace' clears all. 'merge-overwrite' overwrites conflicts. 'merge-keep' keeps existing. | replace |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It usefully discloses the destination store and the downstream consumer, but says nothing about whether the import mutates/overwrites existing tokens, permission needs, or failure behavior for invalid JSON; the merge semantics live only in the schema.
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, zero waste, and the core action plus destination are front-loaded before the downstream-use note. Nothing is padded or redundant.
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?
For a mutation tool with no annotations and no output schema, the definition should disclose more about side effects and results. Parameters are well covered by the schema, but the lack of any indication of overwrite risk, auth requirements, or return shape leaves a meaningful 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%, so the schema already documents all four parameters including the merge_strategy enum values and the namespace example. The description adds no syntax or format detail beyond what the schema provides, so 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 verb (Import) and resource (design tokens) and names the three supported source formats plus the destination (active token store). It is clear what the tool does, though it does not explicitly contrast itself with the related sibling extract_figma_styles, which an agent could easily confuse with this tool.
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: the agent can infer this is the tool for bringing external token data in, and the description notes the downstream consumer (generate_component). There is no explicit when-to-use guidance and no exclusion versus extract_figma_styles or clear_tokens/export_tokens.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
inspect_pageB
Inspect a live web page using a headless browser. Extracts accessibility tree, component structure, performance metrics, and an optional screenshot. Requires Playwright (optional dependency).
| Name | Required | Description | Default |
|---|---|---|---|
| wait_for | No | When to consider the page loaded | load |
| target_url | Yes | The URL to inspect (http:// or https:// only). Private/internal addresses are blocked. | |
| timeout_ms | No | Navigation timeout in milliseconds (5000-60000) | |
| viewport_width | No | Viewport width in pixels (320-3840) | |
| viewport_height | No | Viewport height in pixels (240-2160) | |
| include_screenshot | No | Include a base64 PNG screenshot in the response |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are supplied, so the description carries the full disclosure burden. It does reveal the payload (accessibility tree, component structure, performance metrics, optional screenshot) and the Playwright dependency, and inspection is inherently read-only, but it says nothing about runtime cost, latency of a headless navigation, failure modes, or whether the call has side effects against the target site.
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 tightly written sentences: the operation is front-loaded in sentence one, and sentence two covers output and the dependency. Nothing is redundant or padded.
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?
For a six-parameter, read-only inspection tool with no output schema and no annotations, the description supplies the missing return-value context (what gets extracted) and a dependency prerequisite. The remaining gap is disambiguation from near-neighbor siblings, but the operational picture is otherwise sufficient.
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 all six parameters (including enum, ranges, and defaults) are documented in the schema itself. The description only restates that a screenshot is optional, adding no syntax, format, or interaction detail beyond what the schema already provides — the baseline of 3 is correct.
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 specific verb ('Inspect') and resource ('a live web page using a headless browser'), plus an enumeration of what it extracts. It is clear what the tool does, but it never distinguishes itself from plausible siblings such as live_audit, visual_diff, or responsive_preview, which an agent would have to guess between.
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?
There is no statement of when to reach for this tool versus the audit/preview siblings, nor any exclusion guidance. The only contextual information is a dependency note ('Requires Playwright (optional dependency)'), which reads more like an environment caveat than usage direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
live_auditB
Audit a live web page by navigating to it and running accessibility, performance, and responsive checks on the rendered HTML. Requires Playwright.
| Name | Required | Description | Default |
|---|---|---|---|
| categories | No | Audit categories to run | |
| target_url | Yes | URL to audit (http/https only, private IPs blocked) | |
| wcag_level | No | WCAG conformance level | AA |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden. It mentions 'Requires Playwright' which is useful context about external dependencies. However, it doesn't disclose whether the audit is read-only, if it has side effects (e.g., page navigation), performance impact, timeout behavior, or what the output looks like. For a live navigation tool, these are significant omissions.
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 main action and scope, then the dependency requirement. No wasted words; efficient and clear.
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?
For a tool with no annotations, no output schema, and 3 parameters (all schema-documented), the description is adequate but incomplete. It doesn't explain what the audit returns, whether it modifies state, or how it differs from sibling tools. The Playwright requirement is helpful but insufficient for full behavioral disclosure.
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 schema already documents all three parameters including enum values and defaults. The description adds no additional parameter meaning beyond what's in the schema. Baseline 3 is appropriate when schema does the heavy lifting.
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 clear verb (audit), resource (a live web page), and scope (accessibility, performance, and responsive checks on rendered HTML). It distinguishes itself from audit_component by specifying 'live web page' with navigation. The only minor gap is that it doesn't explicitly contrast with inspect_page or visual_diff.
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 implies usage by requiring Playwright and navigating to a URL, but doesn't state when to use this over audit_component or inspect_page. No explicit when-to-use or when-not-to-use guidance is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
responsive_previewA
Screenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports for responsive comparison. Requires Playwright.
| Name | Required | Description | Default |
|---|---|---|---|
| target_url | Yes | URL to preview (http/https only, private IPs blocked) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It usefully discloses the exact viewport widths and the Playwright runtime dependency, but omits whether output is inline images or file paths, how page-load readiness is handled, and any auth or rate-limit behavior for a read-style capture.
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 tight sentences, front-loaded with the action and viewport specifics; the prerequisite follows. No filler or redundancy.
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?
For a single-parameter capture tool with no annotations and no output schema, the description covers what is captured and the Playwright requirement, but leaves the return format (images vs. saved files) unspecified, which is the main thing an agent still needs to know.
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?
Only one parameter and schema coverage is 100%: the schema already documents target_url, its maxLength, http/https restriction, and private-IP blocking. The description adds nothing about the parameter, 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?
States a specific verb (Screenshot) and resource (a URL), plus the exact scope: three named viewports with pixel widths. An agent immediately knows the output is a responsive-comparison capture, though it never names the nearby siblings (visual_diff, inspect_page) to disambiguate.
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 phrase 'for responsive comparison' implies the intended use case, but there is no explicit when-to-use guidance, no exclusions, and no pointer to an alternative such as visual_diff or inspect_page when only one viewport or a diff is wanted.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
visual_diffA
Compare two PNG screenshots pixel-by-pixel for visual regression testing. Returns diff statistics including changed pixel count and percentage. Does not require Playwright.
| Name | Required | Description | Default |
|---|---|---|---|
| threshold | No | Per-channel difference threshold (0-255) below which pixels are considered identical | |
| after_image | Yes | Base64-encoded PNG of the 'after' snapshot (no data URI prefix) | |
| before_image | Yes | Base64-encoded PNG of the 'before' snapshot (no data URI prefix) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses the return shape (changed pixel count and percentage) and a dependency fact (Playwright not required), which is genuinely useful, but says nothing about whether a diff image is produced, side effects, or processing limits for large images.
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 short sentences with zero filler; the core action is front-loaded and each sentence adds a distinct fact (action, return, dependency).
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?
For a two-image comparison tool with no output schema and no annotations, the description covers the action, inputs (base64 PNGs, inferable from schema), and return summary. It is nearly complete, only lacking detail on the optional threshold's effect and whether image artifacts are emitted.
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 threshold, before_image, and after_image parameters are already documented in the schema. The description adds no additional parameter meaning (e.g., how threshold interacts with the reported percentage), 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?
States a specific verb and resources ('Compare two PNG screenshots pixel-by-pixel') plus the domain ('visual regression testing'). No sibling tool does image-to-image comparison, so the agent can route to it without opening the 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?
The 'for visual regression testing' phrase implies the use case, and 'Does not require Playwright' hints at an alternative execution path, but no explicit when-to-use vs when-not guidance or named alternative tool is given.
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.
13 tool updates
v2.0.1- First observed
audit_component - First observed
auto_fix_component - First observed
clear_tokens - First observed
compose_layout - First observed
export_tokens - First observed
extract_figma_styles - First observed
generate_component - First observed
generate_story - First observed
import_design_tokens - First observed
inspect_page - First observed
live_audit - First observed
responsive_preview - First observed
visual_diff
TDQS
Scored across 13 tools
Most tools have clearly distinct purposes (generation, token management, auditing, layout composition). A few pairs could be confused: audit_component vs live_audit (static markup vs live page) and import_design_tokens vs extract_figma_styles (both load tokens into the store), but the descriptions clearly differentiate them.
Consistent snake_case throughout with a mostly predictable verb_noun pattern (generate_component, import_design_tokens, audit_component, clear_tokens, export_tokens). A handful lean noun-based (visual_diff, live_audit, responsive_preview), a minor deviation but still readable and coherent.
13 tools is well within the ideal 3-15 range and each maps to a distinct capability in the UI workflow (generation, tokens, audit, fix, storybook, layout, visual testing). No filler tools appear present.
The surface covers a broad lifecycle: token import/extract/export/clear, component generation, static and live auditing, auto-fix, storybook generation, responsive preview, visual diff, and layout composition. Minor gaps exist (no explicit component registry/list or delete operations), but core workflows are covered.
Maintenance
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server for Mint — AI-powered QA that runs your app in a real browser on every PR.
A MCP server built for developers enabling Git based project management with project and personal…
327 dev tools via REST API and MCP. Generate Dockerfiles, schemas, K8s, APIs, and more.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceA unified MCP server with composable tools for GitHub operations, file management, shell execution, kanban boards, Discord messaging, and package management. Features role-based security, HTTP/stdio transports, and a web-based development UI.-
- AlicenseAqualityBmaintenanceDesign system MCP server. 20 tools: extract design tokens from any URL, pull from Figma or Penpot, generate React + shadcn/ui components from specs, run WCAG audits, sync tokens bidirectionally.50262 npm41MIT
- FlicenseAqualityDmaintenanceComprehensive MCP server for Fluent UI React v9 development, providing component knowledge, design tokens, code generation, and validation tools.128-
- AlicenseNot gradedqualityDmaintenanceMCP server for automatic Storybook story generation, component analysis, and validation. Auto-detects React frameworks and syncs component documentation.49 npm1MIT