# Open Components

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 11
- Author: uxfront-com
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/uxfront-com/open-components
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/open-components

## What it 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.

## Requirements
- Remote server: `https://mcp.opencomponents.dev/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add open-components --url https://mcp.opencomponents.dev/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "open-components": {
            "url": "https://mcp.opencomponents.dev/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "open-components": {
            "type": "http",
            "url": "https://mcp.opencomponents.dev/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http open-components https://mcp.opencomponents.dev/mcp
```

## When to use it
- 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
- Connect the open-components MCP server and show me the rules for a Button component
- Review my `Button.tsx` against the contract at `https://opencomponents.dev/raw/docs/components/button.yaml`
- Build a date picker component following the Open Components standard

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md