Apply your design system guidelines in Cursor

Cursor reads MCP servers from an mcpServers object in a JSON file. Once you point it at UI Rules, Cursor's AI serves your brand styles, rules, and component vocabulary while it generates UI.

Prerequisites#

• Cursor 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.

The quick way#

The CLI writes the config for you, with the key already in place:

pnpmyarnnpmbun
$ pnpm dlx @ui-rules/cli login
$ npx @ui-rules/cli setup cursor

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#

Configure#

From the menu bar choose Cursor → Preferences → Cursor Settings, search for MCP, and click New MCP Server. Cursor asks where the server lives:

• User is just you, in every project. It writes ~/.cursor/mcp.json.
• Workspace is this repo, shared with everyone on it. It writes .cursor/mcp.json in the project root.

Cursor opens that scope's mcp.json. UI Rules is a remote server over HTTP, so use the url field with a headers entry carrying your key. Paste this and save the file:

{
  "mcpServers": {
    "uirules": {
      "url": "https://mcp.uirules.com/mcp",
      "headers": {
        "x-api-key": "uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

Replace the key with the one you generated. There is no local process to install and no stdio bridge.

Verify#

Troubleshooting#

If the server does not connect or the AI ignores your brand, see Troubleshooting.