Open Components — Claude Code MCP server: UI component rules
Hands your agent the contracts and rules for UI components, section by section, so the code matches the UX, DX and AX standard. No sign-in needed.
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcpWhat Open Components does
Open Components is a standard for UI components built on three layers: user experience, developer experience and agentic experience. The MCP server serves an agent the contracts, every rule and the docs one section at a time, as tools. That matters when a model writes the components and you still want them to clear the same bar as hand-written ones.
The server runs at https://mcp.opencomponents.dev/mcp and needs no account. Docs are also published as markdown: https://opencomponents.dev/raw/<path>.md for a single page, https://opencomponents.dev/raw/<path>.yaml for a page's contract with every checklist rule. The JSON Schema at https://opencomponents.dev/schemas/contract.json describes the contract format, and https://opencomponents.dev/llms-full.txt packs the whole standard into one file when an agent needs all of it at once.
There is also an agent plugin under plugins/open-components. It wires up the same server and adds skills that build and review components against the standard. The plugin follows the Agent Plugin format, so it drops into VS Code, GitHub Copilot, Cursor, Codex and Claude. If you only want the rules, the server alone is enough.
What it helps with
- check a component against the standard's checklist
- build a button or input with predictable behaviour
- hand an agent a component contract instead of a long doc page
- keep a new component's API in line with the rest of the project
- get accessibility and state rules into model-written code
Example prompts for the agent
- Connect the open-components MCP server and show me the rules for a Button component
- Review my
Button.tsxagainst the contract athttps://opencomponents.dev/raw/docs/components/button.yaml - Build a date picker component following the Open Components standard
How to install Open Components
Platform CLI: remote server
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcpPlatform CLI: remote server
codex mcp add open-components --url https://mcp.opencomponents.dev/mcpConfig file
{
"mcpServers": {
"open-components": {
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}Config file
{
"servers": {
"open-components": {
"type": "http",
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http open-components https://mcp.opencomponents.dev/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Open Components
How do I install Open Components in Claude Code?
Run claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp. The server connects over HTTP and needs no registration.
What does Open Components do?
It gives an agent the contracts, rules and docs of the UI component standard, section by section. The agent reads them as tools and checks its own code against them.
How is the MCP server different from the agent plugin?
The server exposes the rules and contracts. The plugin in plugins/open-components connects that same server and adds skills that build and review components to the standard.
