Open Components

Install

Works with Claude Code, VS Code, Cursor, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install connector/uxfront-com-open-components

About

Use cases: frontend-development, ui-design

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 25, 2026.

Tools

6 read · 0 write · 0 deleteRead-only

Secrets

None asked for

Install scripts

Nothing to install (hosted)

Runs as

Hosted (remote endpoint)

Tools (6)

As the server listed them on Oct 25, 2026. Descriptions are the server’s own words; hidden characters are shown as [U+…].

• get-contractGet Contractread-only

  Returns 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 …

• get-pageGet Pageread-only

  Reads 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…

• get-reference-implementationGet Reference Implementationread-only

  Returns 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-componentsList Componentsread-only

  Lists 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 …

• list-rulesList Rulesread-only

  Lists 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 AP…

• search-docsSearch Docsread-only

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

Compare and alternatives

Featured in

• Best MCP servers for frontend development

Signals

Stars

11

Forks

1

Open issues

0

Last commit

Oct 23, 2026 (5 days ago)

Last release

Oct 10, 2026 (18 days ago)

From GitHub (fetched Oct 24, 2026).

Details

Registry name

com.uxfront/open-components

Version

1.0.0

Auth

Auth not stated

License

MIT

Repository

github.com/uxfront-com/open-components

Website

opencomponents.dev/docs/getting-started/mcp-server

First seen

Oct 24, 2026

Last checked

Oct 24, 2026

Source

Official MCP Registrygithub-graphql