Open Components MCP server
online · 100% uptimecom.uxfront/open-components·v1.0.0·11 starsGuidelines for UI components with a perfect UX, DX and AX, whether humans or AI agents write them.
11 stars
Reviews
Write oneNobody has reviewed Open Components yet.
If you have run it, two minutes of your experience saves the next person an afternoon.
Open Components tools (6)
write = sends, deletes, buys or postsget-contractFreeReturns 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 it's the same file as https://opencomponents.dev/raw/docs/<path>.yaml. WHEN TO USE: first, before you build, review or explain a component or its tokens. WHEN NOT TO USE: for some of the rules only (by scope, layer, level or check), use list-rules. For the reasoning or the examples behind a rule, use get-page with its sections.
get-pageFreeReads 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 introduction or the roadmap. WHEN NOT TO USE: for the requirements alone, use get-contract or list-rules, which are much shorter. To find which page or section covers a topic, use search-docs. A page longer than about 8,000 tokens, like the button's, returns its outline instead: every heading with its anchor and length, so you can ask for the sections you need. So do sections that are too long to return together.
get-reference-implementationFreeReturns 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 in code. WHEN NOT TO USE: for the requirements, use get-contract. For how the component is used in another framework, use get-page with that framework.
list-componentsFreeLists 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-contract directly. To find a topic in the docs, use search-docs. Shipped entries come with their page, their contract and how many rules they have. Planned ones have no page, contract or rules yet: hold them to the three layers and Design Tokens, following the Button's structure, as the build-component prompt does.
list-rulesFreeLists 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 ID, or to find the ones a tool can check. Pass scope ["component", "both"] to build or review a component, and ["usage", "both"] to review a screen that uses it. WHEN NOT TO USE: for a component's API, DOM contract and tokens, use get-contract, which has every rule too. It returns up to 50 rules at a time, and total counts every rule that matches. When there are more, pass nextOffset as offset, with the same filters, to get the next page. A component meets the standard when it meets every must rule. Each should rule is expected unless there's a good reason not to follow it.
search-docsFreeSearches 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 list-rules. WHEN NOT TO USE: to list a component's rules, use list-rules. To see which components there are, use list-components. Search for a few specific words rather than a whole question.
Public scan report
scanner v0.1.10 · 2026-10-13 · same rubric, same numbers if you re-run it
- –Code scanremote-only server, no package to scann/a
- Live reliabilityremote reachable in 1080ms20/20
- Tool poisoning6 tool descriptions checked15/15
- Auth qualityopen endpoint, read-only tools10/15
- Maintenancelast push 0 days ago15/15
- Maintainer identitynamespace and repository owner differ; GitHub account older than a year6/10
How Open Components compares
Against every graded MCP server, from our own scans and uptime checks. Updated after each scan run.
- Safety score
- 88/100
- higher than 75% of 48,255 servers
- Tools
- 6
- the typical server has 7
- Tools that change things
- 0%
- typical: 0%. Fewer write tools means less an agent can break
- Uptime
- 100%
- of our recent checks; the typical remote server answers 100%
- Response time
- 471 ms
- faster than 31% of 30,031 servers
- GitHub stars
- 11
- more than 88% of 28,688 servers
What its tools let an agent do: 6 read
Install Open Components in Claude Code, Cursor or VS Code
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp
What the publisher says
From the Open Components repository's README, as published. We do not edit it. Read it on GitHub
Open Components
Open Components is the standard for perfect UI components: guidelines for building UI components with a perfect user experience, developer experience and agentic experience, whether humans or AI agents write them. Open Components is part of UXFront, written and maintained by @alexgrozav. Homepage · Documentation · Changelog · llms.txt · Issue Tracker
Table of contents
- The standard
- Reading the standard
- For agents
- Bugs and feature requests
- Contributing
- Creator
- Copyright and license
The standard
The standard has three layers, one for each audience a component serves. A component meets the standard when it meets all three.
any device and for every ability. Accessible, predictable, every state, adaptive.
- User experience (UX): components behave the way people expect them to, with any input, on
component means knowing them all. Consistent, type-safe, composable, controllable.
- Developer experience (DX): one clear API, learned once and used everywhere. Knowing one
so their output meets the same bar as yours. Semantic, described, deterministic, verifiable.
- Agentic experience (AX): components that AI agents can read, reason about and build with,
Learn the guidelines once, then hold every component to the same high standards, whether you or your agents write it.
Reading the standard
Start with the Introduction, which walks through the three layers and what each one asks of a component. The guidelines live as markdown in content/docs/, so you can also read them right here on GitHub.
For agents
If your agent supports MCP, connect it to our MCP server at https://mcp.opencomponents.dev/mcp, free and with no sign-in. It gives agents the contracts, every rule and the docs a section at a time, as tools. The MCP Server page shows how to connect Claude, Codex, Cursor, VS Code, Gemini CLI, Grok, Hermes Agent and other clients.
Shortened. The full README is on GitHub.
Nothing above is checked by us. What we check is on the safety report.
Open Components: common questions
- Is Open Components MCP server safe?
- Yes, by our scan: it is graded A (88/100). Read the Open Components safety report
- How do I install Open Components?
- It runs remotely at mcp.opencomponents.dev. Add it to Claude Code, Cursor, VS Code or Claude Desktop with the snippets above, or call it through the mcp.market gateway without installing anything.
- Does Open Components need an API key?
- Not as far as the registry entry and our scan can tell: no credentials are declared or required.
- Is Open Components maintained?
- The last commit was 23 days ago (2026-10-12). The latest release is v1.0.0.
- Is Open Components up?
- 100% of our last 28 checks got an answer. We check remote servers about four times a day.
- How does Open Components compare with other MCP servers?
- safety score 88/100 (higher than 75% of 48,255 servers); tools 6 (the typical server has 7); tools that change things 0% (typical: 0%. Fewer write tools means less an agent can break). Full comparison.