This server provides an MCP-based interface to the Web UI Component Specification, letting AI assistants query component specs, test scenarios, build guides, and more on demand.
Discover components: list_components returns the full catalog with optional category/tier filtering.
Fetch full specs: get_component_spec gives complete behavioral details (features, accessibility, keyboard nav, etc.) for one component.
Get test scenarios: get_component_tests retrieves only Test Scenarios for one or more components.
Get lightweight summaries: get_component_summary returns description + main features for planning.
Get curated build lists: get_components_by_scenario recommends a component set and build order for project types (SaaS, ecommerce, etc.).
Read core principles: get_core_principles retrieves sections like philosophy, design tokens, interaction principles.
Access step-by-step guide: get_step_by_step fetches individual build steps (1–11) or all steps.
Understand relationships: get_related_components shows dependencies, dependents, and alternatives for a component.
Search behaviorally: search_components does fuzzy search across names, descriptions, and features (e.g., 'focus trap', 'date range').
Validate implementations: validate_component_checklist compares implemented features against spec Main Features and Test Scenarios, producing a coverage report.
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., "@web-ui-component-spec-mcp show me the spec for the button component"
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.
An MCP (Model Context Protocol) server that gives AI coding assistants direct access to the Web UI Component Specification — a comprehensive behavioral reference for web UI component libraries covering component specs, test scenarios, accessibility requirements, and a step-by-step build guide.
Instead of pasting spec content into prompts manually, this server lets your AI assistant query exactly what it needs, when it needs it:
Building a component? → Fetch its full spec on demand
Writing tests? → Get just the test scenarios
Starting a library? → Get a curated component list for your project type
Reviewing an implementation? → Validate it against the spec automatically
Related MCP server: mcpsystem.design MCP Server
Prefer the human-readable version? Download the full spec as a PDF:
Web UI Component Specification (v1.0) — PDF
All exported versions live under exports/.
uvx web-ui-component-spec-mcppip install web-ui-component-spec-mcp
web-ui-component-spec-mcpgit clone https://github.com/gcsebas99/web-ui-component-spec-mcp.git
cd web-ui-component-spec-mcp
pip install -r requirements.txtThen execute server.py.
python server.pyAdd to your MCP client config (Claude Desktop, Cursor, etc.):
uvx:
{
"mcpServers": {
"ui-spec": {
"command": "uvx",
"args": ["web-ui-component-spec-mcp"]
}
}
}pip install:
{
"mcpServers": {
"ui-spec": {
"command": "web-ui-component-spec-mcp"
}
}
}Clone and run:
{
"mcpServers": {
"ui-spec": {
"command": "python",
"args": ["/absolute/path/to/web-ui-component-spec-mcp/server.py"]
}
}
}The spec content (Markdown files) are included in the source/ directory (latest version available):
File | Description |
| Component philosophy, design tokens, interaction principles |
| Full catalog of all components with specs and tests |
| Step-by-step build guide |
Tool | Description |
| Full component index with optional category/tier filtering |
| Full spec for one component |
| Test scenarios only for one or more components |
| Lightweight summary (description + main features) |
| Curated component list for a project type |
| Core Principles by section |
| Step-by-step guide by step number |
| Dependencies, dependents, and alternatives |
| Fuzzy search by behavior or description |
| Coverage report against spec requirements |
For best results, load the skill file into your AI assistant's system prompt before starting a component build session.
Full skill (recommended for new sessions):
skill/skill-full.md
Compact skill (for mid-session use when context is limited):
skill/skill-compact.md
See examples/example-prompts.md for
ready-to-use prompts covering common scenarios:
building a component, starting a library, reviewing code, writing tests.
web-ui-component-spec-mcp/
├── server.py # MCP server entry point
├── pyproject.toml # PyPI packaging (pip + uvx)
├── requirements.txt # Direct install dependencies
│
├── tools/ # One file per MCP tool
├── parsers/ # MD parsing logic
├── data/ # In-memory store (loaded at startup)
│
├── source/ # Spec MD files (bundled; VERSION.md pins the revision)
├── exports/ # Human-readable PDF exports of the spec
├── skill/ # Skill files for AI assistants
└── examples/ # Example promptsThis server is built for Web UI Component Specification v1.0.
Spec version | Server version |
v1.0 | 1.0.x |
Version | Changes |
1.0.3 | Pin |
1.0.2 | Script name updated to match package name; documentation updates. |
1.0.1 | Documentation updates. |
1.0.0 | Initial release. |
MIT
Return a curated component list and recommended build order for a project type. Use this when starting a library from scratch to get a sensible scope and sequence. Pass 'list' as scenario to see all available options.
Inputs: scenario (required).
Return the full behavioral specification for a single component. Includes description, all main features, secondary features (accessibility, keyboard navigation, touch, responsive, i18n, etc.), and implementation notes. Use this when implementing a component from scratch.
Inputs: component (required).
Return a lightweight summary for one or more components — description and main features only, no secondary features or test scenarios. Use this for planning and surveying before deep implementation work.
Inputs: components (required).
Return only the Test Scenarios for one or more components. Use this when writing tests or reviewing an implementation against the spec. More token-efficient than get_component_spec when tests are all you need.
Inputs: components (required).
Return content from the Core Principles section of the spec. Fetch only the section you need to minimize context usage. Use 'philosophy' when starting any component work. Use 'design_tokens' when reviewing token definitions. Use 'all' sparingly.
Inputs: section.
Return one or more steps from the Step-by-Step Build Guide. Fetch only the steps relevant to the current phase of work. e.g. pass [1, 2, 3] when defining design tokens, [7, 8] when building components.
Inputs: steps (required).
List all components in the Web UI Component Specification. Returns name, id, category, tier, and one-line summary for each. Always call this first in a new session to establish what exists. Optionally filter by category or tier.
Inputs: category, tier.
Fuzzy search across component names, descriptions, and features. Use this when you know what behavior you need but not which component provides it. e.g. 'focus trap', 'date range', 'file upload', 'keyboard navigation'
Inputs: query (required), limit.
Compare an implementation against the spec's Main Features and Test Scenarios. Returns a coverage report showing what's covered, what's missing, and an overall status. Use this to QA a component before marking it done.
Inputs: component (required), implemented_features (required), check_tests.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 10 tools
Each tool has a uniquely scoped purpose with no overlap. For example, get_component_spec returns full specs while get_component_summary returns only top-level info. Search and list tools target different access patterns. Naming and descriptions clearly distinguish them.
All tools follow a consistent verb_noun pattern using snake_case (e.g., get_component_spec, list_components, validate_component_checklist). The naming is predictable and intuitive.
10 tools is well-scoped for a specification server. Each tool addresses a distinct need (listing, searching, retrieving specs, tests, principles, dependencies, build steps, validation) without redundancy or excess.
The tool set covers the full lifecycle of working with component specs: discovery (list, search), detailed retrieval (spec, summary, tests, principles, related components), guided implementation (step-by-step), and quality assurance (validate checklist). No obvious gaps for the stated domain.
Serves your design system and coding standards to coding agents, so they stop guessing.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Give AI agents your deeepSpace design system: components, tokens, styles and code mappings.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
