INDIVIDUAL MCP TOOL

list-rules

Lists checklist rules as records, filtered by component, ID, scope, layer, level or check.

opencomponents.devnone authenticationAvailability not checked

LIVE ENDPOINT

https://mcp.opencomponents.dev/mcp

No auth detected

Connect to this endpoint to inspect the live schema for list-rules and invoke it with your own arguments.

{}

Inferred read-only · medium confidence · heuristic, not a guarantee.

No write-capable action terms were found; this is not proof that invocation has no side effects.

CONNECT WITH APPROVAL

Review this server and its permissions before adding it. Secret placeholders must be set locally.

Codex

~/.codex/config.toml

[mcp_servers.open-components]
url = "https://mcp.opencomponents.dev/mcp"
enabled = true

Claude Code

.mcp.json

{
  "mcpServers": {
    "open-components": {
      "type": "http",
      "url": "https://mcp.opencomponents.dev/mcp"
    }
  }
}

Claude Desktop

Settings → Connectors → Add custom connector

Name: open-components
Remote MCP URL: https://mcp.opencomponents.dev/mcp

Add this remote URL as a custom connector in Claude Desktop. Availability depends on the user plan and workspace policy.

Cursor

.cursor/mcp.json

{
  "mcpServers": {
    "open-components": {
      "url": "https://mcp.opencomponents.dev/mcp"
    }
  }
}

Visual Studio Code

.vscode/mcp.json

Add to Visual Studio Code

{
  "servers": {
    "open-components": {
      "type": "http",
      "url": "https://mcp.opencomponents.dev/mcp"
    }
  }
}

Generic MCP

Client-specific MCP configuration

{
  "name": "open-components",
  "transport": "streamable-http",
  "url": "https://mcp.opencomponents.dev/mcp"
}

MCP Inspector

Run the official MCP Inspector locally and enter the indexed Streamable HTTP endpoint.

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, 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.
get-page — Reads a docs page as markdown, whole or just the sections you name.
get-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, the helpers it shares with other components and its theme tokens.
list-components — 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.
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 excerpt, and for rules, their ID, level and scope.