Categories › Software Development › Frontend, UI components & design-to-code
Guidelines for UI components with a perfect UX, DX and AX, whether humans or AI agents write them.
Remote server: your requests and data go to mcp.opencomponents.dev. Claude Code: claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp · Claude app: Settings → Connectors → Add custom connector.
The tools this server listed when we connected to it, in its own words.
get-contract — Returns the contract of a component or a foundation, as YAML: its API (props, slots and events), its DOM contract (element, role, states, keget-page — Reads a docs page as markdown, whole or just the sections you name. Component pages explain why each rule exists, with examples in React, Vuget-reference-implementation — Returns a shipped component's reference implementation: a Vue 3 component that meets every rule in its checklist, the tests that prove it, tlist-components — Lists what the Open Components standard covers: the components that have shipped (like Button), the foundations every component follows (liklist-rules — 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 search-docs — Searches the whole standard, every section of every page and every checklist rule, and returns the best matches: where each one is, a short Not tested by KitScout yet. When our harness runs it, pros, cons and the tasks we tried appear here, with the date and evidence.