MCP Server

Our MCP server gives your agents the whole standard as tools: the contracts, every rule, the docs and the reference implementations. Connect it once, then ask your agent to build or review a component. It reads only what the task needs, then checks its work rule by rule, citing each rule by its ID.

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. It's free, with nothing to install and no account or API key to set up.

This page covers:

• Quick start - connect it and try it in a minute
• Connect your client - the setup for each client, step by step
• What you can ask - prompts for building, reviewing and learning the standard
• How it works - what your agent reads, and in what order
• Tools, prompts and resources - everything the server offers
• Privacy and security - what it sees, and what it can't do
• Troubleshooting - what to check when it doesn't connect

At a glance

Quick start

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

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

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

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

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.

Connect your client

Every client needs the same three things: the URL, https://mcp.opencomponents.dev/mcp, the name, open-components, and no authentication. Most 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.

Coding agents

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

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

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

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

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

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

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

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

Editors

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

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

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

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

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

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

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

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

devin mcp add -s user open-components https://mcp.opencomponents.dev/mcp

Chat apps

Cloud agents and APIs

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

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

Other clients

• Amp:

  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: add the server to the mcpServers list in ~/.continue/config.yaml. Continue uses it in Agent and Plan modes.

  mcpServers:
    - name: open-components
      type: streamable-http
      url: https://mcp.opencomponents.dev/mcp
  

• Crush: from Crush 0.88, add this line to ~/.config/crush/crushrc:

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

• Factory Droid:

  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 server under mcpServers in ~/.lmstudio/mcp.json, which Program > Install > Edit mcp.json opens:

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

• OpenCode:

  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 instead.
• Qwen Code:

  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"
    }
  }
  

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, which you add as a local server with this command:

npx -y mcp-remote https://mcp.opencomponents.dev/mcp

What you can ask

Once the server is connected, ask in your own words. Mention it by name the first time, and your agent takes it from there: the server tells it which tools to use, and in what order. Here's what it can help with, and a prompt to start from for each.

Build a component

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. For a component on the Roadmap, which has no contract yet, it holds it to the three layers and Design Tokens instead, following the Button's structure. The build-component prompt asks for the same.

Review a component

Review our Button, in src/components/Button.tsx, against the Open Components standard,
using the open-components MCP server. Report every rule with a component or both scope
as pass or fail, with its rule ID and the evidence from our code. Then fix the failures.

Your agent lists the rules to report on with list-rules, then checks your code against each one. For a rule it's unsure of, it finds the section that explains it with search-docs, and reads it with get-page. The review-component prompt asks for the same.

Review a screen

Review how our checkout page uses buttons against the Open Components standard, using
the open-components MCP server. Report every rule with a usage or both scope as pass
or fail, with its rule ID and the evidence from our code.

Usage rules are the ones the code using a component meets, like button/one-primary, which keeps one solid primary button per view. Your agent lists them with list-rules, with a usage or both scope. The review-usage prompt asks for the same.

Move to token paths

Rename our CSS variables to follow the Open Components token paths, using the
open-components MCP server. List our token groups first, then rename every variable
along with every var() that reads it, keeping the values as they are. Then add the
Stylelint rule from the standard, and fix anything it reports.

Your agent reads the Design Tokens contract with get-contract, and the Stylelint rule from the page's Lint section with get-page. The adopt-token-paths prompt asks for the same.

Learn the standard

Using the open-components MCP server, how should a button behave while it's loading?
Link to the sections you used.

Your agent finds the sections that cover it with search-docs, then reads them with get-page, with the examples in your framework if you name one. To see what the standard covers so far, and what's planned, ask which components it has, and your agent lists them with list-components.

How it works

You could point your agent at a page instead, 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. Its contract holds every requirement in about 3,000.

When your agent connects, the server tells it how to use it, so you don't have to. Your agent:

1. Finds what the task is about, with list-components, or search-docs for a topic.
2. Reads the contract first, with get-contract: the component's API, its DOM contract, its tokens and every rule.
3. Reads only the sections it needs, with get-page, for the reasoning or an example behind a rule, in your framework.
4. Starts from the reference implementation, with get-reference-implementation, when it builds a component.
5. Checks its work rule by rule, with list-rules, citing every rule by its ID, like button/keep-focus, exactly as the server writes it, so you can look each one up.

Rules and scopes

Every rule has a level. 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.

A component's rules also have a scope, which says whose code to check them against:

Always in step with the site

The server is built from the same files as this site, and redeployed whenever they change, so it serves the standard exactly as the site publishes it. A contract from get-contract is the same file as its /raw/docs/<path>.yaml, and a page from the resources is the same as its /raw/docs/<path>.md.

Tools, prompts and resources

Tools

Your agent calls these on its own, following the instructions the server gives it. Every tool is read-only, and tells your client so.

A page longer than about 8,000 tokens, like the Button's, comes back as its outline, every heading with its anchor and length, so your agent can ask for the sections it needs. No reply is longer than about 36,000 characters, so clients like Gemini CLI and Codex pass it on whole.

Prompts

Prompts are requests you start yourself, usually as slash commands. They ask for what the prompts on our pages ask for, then point your agent at the tools.

How you start one depends on your client:

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, as in What you can ask, or install our agent plugin, whose skills your agent picks up on its own.

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 the same URLs as on this site, /raw/docs/<path>.yaml and .md, and the contract schema.

Privacy and security

The server only serves the standard, so there's little that can go wrong, but here's exactly what it does and doesn't do:

• It's read-only. Its tools read the standard and change nothing, on our side or in your project. Your agent makes every change to your code itself, with the permissions you give it.
• It takes no credentials. There's no account, API key or token, so there's nothing to set up, store or leak.
• It only sees what your agent sends it. Each call carries a few arguments, like a component's name, a search query or the sections to read. The exception is the code and screen arguments of the review prompts, which send whatever you pass in. To keep your code on your machine, pass the paths of your files instead, like src/components/Button.tsx, and your agent reads them itself.
• It serves what the site publishes. Everything it returns comes from the same files as this site, in its public repository, so you can read any of it before your agent does.

Troubleshooting

npx -y mcp-remote https://mcp.opencomponents.dev/mcp

Still stuck? Open an issue with your client, its version and what you tried, and we'll help you connect.