Apply your design system guidelines in Claude Code
Claude Code adds MCP servers with the claude mcp add command. Point it at UI Rules over HTTP and Claude Code serves your brand ruleset, styles, and component vocabulary while it generates UI.
Prerequisites
- Claude Code installed and updated to a version with MCP support.
- A UI Rules brand with styles and rules configured. New brands start on a default theme, so import your brand styles first if a dashboard alert prompts you to.
- A connection key for the project you want to serve. See the next section.
The quick way
The CLI writes the config for you, with the key already in place:
$ pnpm dlx @ui-rules/cli login $ npx @ui-rules/cli setup claude
It merges into an existing config rather than replacing it, and warns you if the file it just wrote is not ignored by git. If that works, skip to Verify.
Get your connection key
Your connection key authenticates Claude Code to one project and serves that project's effective ruleset (the brand ruleset plus any overrides).
Open the project
In the UI Rules app, open the project (connected app) you want to serve to Claude Code.
Create a connection key
Open Connect your AI tools, pick Claude, and generate a connection key. The key identifies this project on its own, so there is nothing else to configure.
Keep your connection key private. Do not commit it to source control or paste it into shared channels.
Configure
UI Rules is a remote server over HTTP, so add it with the --transport http flag and pass your connection key in an x-api-key header. Choose a scope with --scope:
local(the default) keeps the server private to you in the current project.projectwrites a.mcp.jsonfile at the project root that you can commit so your team shares the connection.usermakes the server available across all of your projects on this machine.
Run claude mcp add from your project root. Flags come before the server name and URL.
claude mcp add --transport http uirules https://mcp.uirules.com/mcp \
--header "x-api-key: uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"To share the connection with your team, add --scope project so Claude Code writes the entry to .mcp.json.
claude mcp add --transport http uirules --scope project https://mcp.uirules.com/mcp \
--header "x-api-key: uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"Replace the key with the one you generated for your project.
Claude Code prompts for approval before it uses a project-scoped server from .mcp.json. Run claude interactively to review and approve the uirules server the first time.
Verify
Confirm the server connected
Run claude mcp list and check that uirules is listed as connected. You can also run /mcp inside a Claude Code session to see server status.
claude mcp listAsk the AI about your brand
In a Claude Code session, ask something that depends on your ruleset, such as a question about your brand's primary color or radius tokens. A correct answer that reflects your brand styles confirms the connection.
Claude Desktop and claude.ai
Claude Desktop and claude.ai cannot send a custom header, so they connect through a connector on your Claude account instead. This wires UI Rules into every Claude chat on the account, including chats about other work. To connect a single codebase, use Claude Code above.
Add a custom connector
Open Settings → Connectors → Add custom connector. Enter UI Rules as the name and https://mcp.uirules.com/mcp as the remote MCP server URL. Leave Advanced settings empty and click Add.
Authorize
Claude opens a UI Rules page in your browser. Sign in if you are not already, pick the project from the dropdown, and click Authorize.
If there is no project picker, the project has no connectable key yet. Generate one from Connect your AI tools and paste it when asked.
Troubleshooting
If the server does not connect or the AI ignores your brand, see Troubleshooting.
