Getting Started

MCP Server

Connect your agents to the standard, so they can read the contracts, every rule and the docs a section at a time as they build and review components.

Our MCP server gives your agents the whole standard as tools: the contracts, every rule, the docs and the reference implementations. It works with Claude, ChatGPT, Codex, Cursor, VS Code, GitHub Copilot, Gemini CLI and any other client that supports remote servers over the Model Context Protocol. Connect it shows you how to add it to yours.

You can point an agent at a page, but component pages are long. The Button's is about 35,000 tokens, mostly reasoning and examples in seven frameworks, which is far more than any one task needs. With the server, your agent reads the contract first, every requirement in about 3,000 tokens, then only the sections it needs, in your framework, and checks its work rule by rule.

The server is at https://mcp.opencomponents.dev/mcp, over streamable HTTP. It's free, with nothing to install and no account or API key to set up, and it's read-only: it serves the standard just as this site publishes it, since we build the two from the same files.

Connect it

Add the server under the name open-components. On every page of these docs, the menu next to Copy page can also copy the server's URL for you, with Copy MCP Server URL, or install it in Cursor, with Add MCP Server.

Most clients take a single command or a few lines of configuration. There's nothing to sign in to, so where a client asks about authentication, choose none.

Claude Code

claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp

That adds it for you, in the project you're in. Add --scope user to use it in every project, or --scope project to share it with your team through the project's .mcp.json, which asks each of them to approve it once. Run /mcp in Claude Code to check that it's connected.

Claude and Claude Desktop

Add the server as a custom connector. Go to Customize > Connectors, click + Add, then Add custom connector, name it open-components, enter the URL and choose No sign in under Authentication. You can then turn it on for a conversation from the + button, under Connectors. On Team and Enterprise plans, an owner adds it for everyone first, under Organization settings > Connectors.

Codex

codex mcp add open-components --url https://mcp.opencomponents.dev/mcp

That adds it to ~/.codex/config.toml, which the Codex CLI, the Codex extension for your editor and Codex in the ChatGPT desktop app all read. To share it with your team, add it to .codex/config.toml in your project instead, which Codex reads once you trust the project:

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

Run /mcp in Codex to check that it's connected.

ChatGPT

You can add it on the web, with a Plus, Pro, Business, Enterprise or Edu plan. Turn on Developer mode in ChatGPT's settings, then create an app named open-components with the URL, set Authentication to No Authentication and confirm that you trust the server. In a new chat, pick it from the + menu, under Developer mode. On Enterprise and Edu workspaces, an admin allows Developer mode first, and on Business, only admins and owners can use it, so they add the app for everyone. The menus can differ a little from plan to plan.

Cursor

Open the Cursor install link, or add the server to .cursor/mcp.json in your project, or to ~/.cursor/mcp.json to use it in every project:

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

VS Code

Open the VS Code install link, or add the server to a .mcp.json at your project's root, which Claude Code reads too:

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

In .vscode/mcp.json, the same entry goes under servers rather than mcpServers.

GitHub Copilot and Visual Studio

For Copilot in VS Code, add the server as in VS Code. In Copilot CLI:

copilot mcp add --transport http open-components https://mcp.opencomponents.dev/mcp

That adds it to ~/.copilot/mcp-config.json. Run /mcp show open-components in a Copilot CLI session to check that it's connected.

For Copilot's cloud agent on github.com, a repository admin pastes this under the repository's Settings > Copilot > MCP servers, then clicks Save MCP configuration:

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

In Visual Studio, add it to .mcp.json in your solution, or to %USERPROFILE%\.mcp.json to use it in every solution. It takes the same type and url, under servers rather than mcpServers. Then turn on its tools from Tools in Copilot Chat's agent mode.

On Copilot Business and Enterprise, an organization owner turns on the MCP servers in Copilot policy first, and for the cloud agent, the Copilot cloud agent policy too.

JetBrains IDEs

In AI Assistant 2025.3 or later, go to Settings > Tools > AI Assistant > Model Context Protocol (MCP), click Add, choose HTTP and paste the same JSON as Cursor's. Click OK, then Apply. To let Junie and the other agents in your IDE use it too, turn on Pass custom MCP servers under Settings > Tools > AI Assistant > Agents. For Junie CLI, add the same entry to ~/.junie/mcp/mcp.json, or to .junie/mcp/mcp.json in your project.

Zed

Add it under Settings > AI > MCP Servers > Add Server > Add Remote Server (in older releases, in the Agent Panel's settings), or to context_servers in your settings.json:

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

The dot next to it turns green once it's connected.

Gemini CLI and Antigravity

In Gemini CLI:

gemini mcp add --scope user --transport http open-components https://mcp.opencomponents.dev/mcp

That adds it to ~/.gemini/settings.json, which Gemini Code Assist's agent mode in VS Code (Standard and Enterprise) reads too, after Developer: Reload Window. Leave out --scope user to add it to .gemini/settings.json in the folder you're in instead, and start gemini from that folder, though not from your home folder, where it reports success but saves nothing. Run /mcp in Gemini CLI to check that it's connected.

In Antigravity:

agy mcp add open-components https://mcp.opencomponents.dev/mcp

That adds it to ~/.gemini/config/mcp_config.json, which the Antigravity CLI, the IDE and the desktop app share. In the IDE, open it from the agent panel's … menu, under MCP Servers > Manage MCP Servers > View raw config. Give a remote server a serverUrl there, the key Antigravity's docs ask for:

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

Grok

In Grok Build, xAI's coding agent:

grok mcp add --transport http open-components https://mcp.opencomponents.dev/mcp

That adds it to ~/.grok/config.toml. Run grok mcp doctor open-components to check that it's connected.

On grok.com, open Connectors, choose New Connector, then Custom, name it open-components, enter the URL as its Server URL and click Add Connector. On Grok Business and Enterprise, an admin adds it for everyone first, in the xAI console under Grok Business > Connectors.

To use it from the xAI API, pass it to the Responses API as a tool, and xAI connects to it for you:

"tools": [
  {
    "type": "mcp",
    "server_url": "https://mcp.opencomponents.dev/mcp",
    "server_label": "open-components"
  }
]

Hermes Agent

hermes mcp add open-components --url https://mcp.opencomponents.dev/mcp

Answer n when it asks whether the server needs authentication, then let it enable every tool. That adds it to ~/.hermes/config.yaml (%LOCALAPPDATA%\hermes\config.yaml on Windows), which you can also edit yourself:

mcp_servers:
  open-components:
    url: "https://mcp.opencomponents.dev/mcp"

Run hermes mcp test open-components to check that it's connected. In the Hermes desktop app, add it under Capabilities > Connectors > Add your own: set Type to Streamable HTTP, leave Auth on None and click Save.

Other clients

Amp: run amp mcp add open-components https://mcp.opencomponents.dev/mcp.
Cline: open Customize (the wrench), then MCP > Add Remote Server, and keep Streamable HTTP as its transport.
Continue: in ~/.continue/config.yaml, add an item to the mcpServers list, - name: open-components, with type: streamable-http and url: https://mcp.opencomponents.dev/mcp. Continue uses it in Agent and Plan modes.
Crush: in ~/.config/crush/crushrc, from Crush 0.88, add mcp add open-components --type http --url https://mcp.opencomponents.dev/mcp.
Factory Droid: run droid mcp add open-components https://mcp.opencomponents.dev/mcp --type http.
goose: in the desktop app, go to Extensions > Add custom extension, choose Streamable HTTP as its type and enter the URL as its endpoint. In the CLI, run goose configure and choose Add Extension > Remote Extension (Streamable HTTP).
LM Studio: add the same entry as Cursor's to ~/.lmstudio/mcp.json, which Program > Install > Edit mcp.json opens.
OpenCode: run opencode mcp add open-components --url https://mcp.opencomponents.dev/mcp. In releases from before June 2026, run opencode mcp add and answer its questions.
Qwen Code: run qwen mcp add --transport http open-components https://mcp.opencomponents.dev/mcp.
Warp: under Settings > Agents > MCP servers, click + Add and paste { "open-components": { "url": "https://mcp.opencomponents.dev/mcp" } }.
Windsurf and Devin Desktop: in Windsurf, add "open-components": { "serverUrl": "https://mcp.opencomponents.dev/mcp" } under mcpServers in ~/.codeium/windsurf/mcp_config.json. With the Devin CLI, run devin mcp add -s user open-components https://mcp.opencomponents.dev/mcp.

Any other client that supports remote MCP servers over streamable HTTP only needs the URL. If yours only runs local servers, it can still reach this one through mcp-remote: add it as a local server with the command npx -y mcp-remote https://mcp.opencomponents.dev/mcp.

What it offers

Tools

Your agent calls these on its own, following the instructions the server gives it.

Tool	What it's for
`list-components`	What the standard covers, shipped or planned, with the name the other tools take, like `button`
`get-contract`	The contract of a `component` or foundation, as YAML: its API, its DOM contract, its tokens and every rule
`list-rules`	Rules as records, filtered by `component`, `ids`, `scope`, `layer`, `level`, `check` or `automated`
`get-page`	A page by its `path`, or only the `sections` you name, with the examples in one `framework`
`search-docs`	The sections and rules that best match a `query`, across the whole standard
`get-reference-implementation`	A `component`'s reference implementation in Vue 3 and its tests, or only the `files` you name

A page longer than about 8,000 tokens, like the Button's, comes back as its outline, so your agent can ask for the sections it needs.

Prompts

Prompts are requests you start yourself, usually as slash commands, like /mcp__open-components__build-component button react in Claude Code, /build-component button --framework=react in Gemini CLI, or /mcp.open-components.build-component in VS Code, which then asks for its arguments. They ask for what the prompts on our pages ask for, then point your agent at the tools. Not every client runs them: Codex doesn't, and Continue, OpenCode and Zed can't pass their arguments yet, so only adopt-token-paths works there. Where yours doesn't, ask for the same in your own words.

build-component builds a component in your framework, from its contract, reference implementation and tests. For one on the Roadmap, it follows the Button's structure.
review-component reviews the code of a component or foundation, reporting every rule as pass or fail with its ID and the evidence, then fixes the failures.
review-usage does the same for a screen that uses a component, against the rules the screen meets.
adopt-token-paths renames your CSS variables to token paths, then adds the Stylelint rule that keeps them that way.

Resources

Resources are files you attach to a conversation yourself, with @ in Claude Code, or Add Context > MCP Resources in VS Code. They're every contract and every page, at their https://opencomponents.dev/raw/docs/<path>.yaml and .md URLs, and the contract schema.

How agents use it

The server tells your agent how to use it when it connects, so you don't have to. Your agent reads the contract first, and a page only for the reasoning or an example behind a rule.

To build or review a component, it checks the rules with a component or both scope, and to review a screen that uses one, those with a usage or both scope. It cites every rule by its ID, like button/keep-focus, exactly as the server writes it, so you can look each one up. A component meets the standard when it meets every must rule, and each should rule is expected unless there's a good reason not to follow it. Components still on the Roadmap have no contract yet, so your agent holds them to the three layers and Design Tokens, following the Button's structure.

An example

Once the server is connected, just ask, and mention it by name:

Build a Button component for our React design system that meets the Open Components
standard, using the open-components MCP server. Check your work against every rule
with a component or both scope, and cite the rule ID for any rule you can't meet.

Your agent reads the Button's contract with get-contract, ports the reference implementation and its tests from get-reference-implementation, and reads how the API looks in React with get-page. Then it checks its work against the contract's rules with a component or both scope, which list-rules can also return on their own. The build-component prompt asks for the same.

Edit this pageorReport an issue

Roadmap

The components we're bringing to the standard, in the order we plan to ship them, and what goes into every page.

Design Tokens

How to name the CSS variables behind your components, so that people, tools and agents all read them the same way.