UI Toolkit MCP Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| 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. |
| 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. |
| audit_componentA | Audit HTML/JSX/Vue/Svelte markup for accessibility (WCAG), performance, and responsive design issues. Returns scored findings with fix suggestions. |
| 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). |
| 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. |
| 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. |
| 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. |
| clear_tokensA | Clear all design tokens from the active token store. Use this to reset before importing a new set of tokens. |
| export_tokensB | Export active design tokens as CSS custom properties, JSON, or Style Dictionary format. |
| live_auditB | Audit a live web page by navigating to it and running accessibility, performance, and responsive checks on the rendered HTML. Requires Playwright. |
| 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. |
| responsive_previewA | Screenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports for responsive comparison. Requires Playwright. |
| compose_layoutA | Compose a page layout from previously generated components in the registry. Produces a full page with imports, semantic structure, and skip navigation. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| build_page | Workflow for generating a full page with multiple components using active design tokens |
| component_audit | Comprehensive audit workflow: analyze markup, report findings, and suggest fixes |
| design_to_code | Full design-to-code workflow: extract Figma styles, generate components, audit each, and generate Storybook stories |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| Active Design Tokens | Currently loaded design tokens. Import tokens with the import_design_tokens tool to populate this resource. |
| Component Pattern Library | Reference library of common UI component patterns with accessibility requirements, variants, and structure. |
| Component Registry | Registry of all generated components with metadata (name, framework, tokens used, audit score, timestamp). |
| Server Health | Server version, tool count, token count, and uptime. |
| Audit Checklist | Comprehensive checklist of accessibility, performance, and responsive design checks used by audit_component. |
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.