Skip to main content

MCP server for the Web UI Component Specification — behavioral specs, tests, and principles for web UI component libraries

Project description

Web UI Component Specification — MCP Server

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.


What this does

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

Read the specification

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


Installation

Option 1 — uvx (recommended, no install required)

uvx web-ui-component-spec-mcp

Option 2 — pip

pip install web-ui-component-spec-mcp
web-ui-spec-mcp

Option 3 — Clone and run

git clone https://github.com/gcsebas99/web-ui-component-spec-mcp.git
cd web-ui-component-spec-mcp
pip install -r requirements.txt

Then execute server.py.

python server.py

MCP Client Configuration

Add to your MCP client config (Claude Desktop, Cursor, etc.):

uvx:

{
  "mcpServers": {
    "ui-spec": {
      "command": "uvx",
      "args": ["web-ui-spec-mcp"]
    }
  }
}

pip install:

{
  "mcpServers": {
    "ui-spec": {
      "command": "web-ui-spec-mcp"
    }
  }
}

Clone and run:

{
  "mcpServers": {
    "ui-spec": {
      "command": "python",
      "args": ["/absolute/path/to/web-ui-component-spec-mcp/server.py"]
    }
  }
}

Source files

The spec content (Markdown files) are included in the source/ directory (latest version available):

File Description
source/Core_Principles.md Component philosophy, design tokens, interaction principles
source/Component_Catalog.md Full catalog of all components with specs and tests
source/Step_By_Step_Guide.md Step-by-step build guide

Available tools

Tool Description
list_components Full component index with optional category/tier filtering
get_component_spec Full spec for one component
get_component_tests Test scenarios only for one or more components
get_component_summary Lightweight summary (description + main features)
get_components_by_scenario Curated component list for a project type
get_core_principles Core Principles by section
get_step_by_step Step-by-step guide by step number
get_related_components Dependencies, dependents, and alternatives
search_components Fuzzy search by behavior or description
validate_component_checklist Coverage report against spec requirements

Using the skill

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


Example prompts

See examples/example-prompts.md for ready-to-use prompts covering common scenarios: building a component, starting a library, reviewing code, writing tests.


Project structure

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 prompts

Spec version

This server is built for Web UI Component Specification v1.0.

Spec version Server version
v1.0 1.0.x

License

MIT

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

web_ui_component_spec_mcp-1.0.0.tar.gz (157.4 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

web_ui_component_spec_mcp-1.0.0-py3-none-any.whl (170.3 kB view details)

Uploaded Python 3

File details

Details for the file web_ui_component_spec_mcp-1.0.0.tar.gz.

File metadata

  • Download URL: web_ui_component_spec_mcp-1.0.0.tar.gz
  • Upload date:
  • Size: 157.4 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: uv/0.9.29 {"installer":{"name":"uv","version":"0.9.29","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"macOS","version":null,"id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}

File hashes

Hashes for web_ui_component_spec_mcp-1.0.0.tar.gz
Algorithm Hash digest
SHA256 3c8f22f5897903563fe42006e20e065dbe2acea8e0a3a3915fe7ef8c19a526fb
MD5 ff1b5e4f54d46ffa2c0f45fce832b15c
BLAKE2b-256 ac26e8cddbba8dc3e94238ad9adf0baae8f8a699853f81941ead75096f37d37a

See more details on using hashes here.

File details

Details for the file web_ui_component_spec_mcp-1.0.0-py3-none-any.whl.

File metadata

  • Download URL: web_ui_component_spec_mcp-1.0.0-py3-none-any.whl
  • Upload date:
  • Size: 170.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: uv/0.9.29 {"installer":{"name":"uv","version":"0.9.29","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"macOS","version":null,"id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}

File hashes

Hashes for web_ui_component_spec_mcp-1.0.0-py3-none-any.whl
Algorithm Hash digest
SHA256 d00d43208b122f7531e4450a3f98a926073a80fe68c12c9396ab75c31058515b
MD5 04a24a8dfa42516fac9bc05da47a66b7
BLAKE2b-256 82a41b3392935f35406af38d5e311fdc4c71aa617004f36ee24e1d683c77ca08

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page