Open Components
Guidelines for UI components with a perfect UX, DX and AX, whether humans or AI agents write them.
Connect it
Settings → Connectors → Add custom connector
URL: https://mcp.opencomponents.dev/mcpSettings → Apps & Connectors → Advanced → Developer mode
Create connector with URL: https://mcp.opencomponents.dev/mcp{
"mcpServers": {
"open-components": {
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp{
"servers": {
"open-components": {
"type": "http",
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}6 tools, verified live
get-contractread-onlyReturns the contract of a component or a foundation, as YAML: its API (props, slots and events), its DOM contract (element, role, states, keyboard and parts), its tokens, and every rule in its checklist, each with a stable ID (like button/keep-focus), a level (must or should), a scope (component, usage or both) and how to check it. It holds every requirement in a fraction of the page's length, and
get-pageread-onlyReads a docs page as markdown, whole or just the sections you name. Component pages explain why each rule exists, with examples in React, Vue, Svelte, Angular, Solid, Astro and Vanilla: pass a framework to keep only its examples. WHEN TO USE: for the reasoning, an example or the details behind a rule (like the sections ["Loading"] of the button's page), or for a page without a contract, like the
get-reference-implementationread-onlyReturns a shipped component's reference implementation: a Vue 3 component that meets every rule in its checklist, the tests that prove it, the helpers it shares with other components and its theme tokens. The live examples on the site run on this code. WHEN TO USE: to build a component that meets the standard, in Vue or by porting it and its tests to another framework, or to see how a rule is met
list-componentsread-onlyLists what the Open Components standard covers: the components that have shipped (like Button), the foundations every component follows (like Design Tokens), and the components planned on the Roadmap. WHEN TO USE: to check whether a component has a standard yet, to get the name the other tools take for it, or to see what's planned. WHEN NOT TO USE: if you already know the component, call get-cont
list-rulesread-onlyLists checklist rules as records, filtered by component, ID, scope, layer, level or check. Each rule has a stable ID to cite in reviews and commits, its level (must or should), its scope, its requirement, how to check it (like a unit test, a review or axe's button-name rule) and a link to it. WHEN TO USE: to review code rule by rule, to get only the rules that apply to a task, to look rules up by
search-docsread-onlySearches the whole standard, every section of every page and every checklist rule, and returns the best matches: where each one is, a short excerpt, and for rules, their ID, level and scope. WHEN TO USE: to find where a topic is covered when you don't know the page or the section, like "focus after delete", "spinner", "aria-pressed" or "dark mode". Then read a section with get-page, or rules with
Alternatives in AI & Agents
Compare →ASAstrocalB
AI-native scheduling: check availability, book meetings, cancel and reschedule via MCP
SHSelf Hosted AiB
Engineering log of self-hosted AI on NVIDIA DGX Spark (GB10/SM121A). 60+ articles indexed.
BOBowmarkB
Do things on live websites: prices, availability, quotes, bookings, anything behind a form or login.
SlopItB
Instant blogs for AI agents: sign up, publish markdown posts, get a live public URL in seconds.
OVOverwingB
Guardrails for LLM output: pass / fail / review verdicts and one recommended action. Hosted or npm.
SASavvlyB
Savvly MCP: query fund data, model projections, and compare against alternative retirement products.