Connect your design system guidelines to AI tools

UI Rules serves your brand to AI coding tools over MCP, so the UI those tools generate matches your design language. You connect a tool once, and it reads your brand on every request.

What gets served#

When a tool connects, UI Rules exposes three things for the brand:

• Styles. Your token values for color, typography, radius, shadow, spacing, and sizing, with light and dark values where they apply.
• Rules. Your authored guidelines, each with its text, Guidance (Do, Don't, Caution, or Info), and Importance (Required, Recommended, or Optional), grouped by where they apply.
• Component vocabulary. The components and blocks that are switched on, including any variants that are switched on.

Together these act as design-system-as-context: the AI tool reads your brand and styles its output to match.

Serving is read-only. A connection key does not let a tool change your design system unless you grant it scopes that do, and none of those are granted by default. See What a tool can change.

The connection key#

Each project (connected app) has its own connection key. Create one from the project's Connect your AI tools dialog, on the project overview.

The key identifies the project and the organization on its own, so there is no project id, tenant id, or account name to configure anywhere. Point a tool at a key and it serves that project.

Keys look like this:

uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Connecting#

Every tool connects to one endpoint:

https://mcp.uirules.com/mcp

It is a remote server over streamable HTTP. There is no local process to install and no stdio bridge.

Authentication is a header, in either of two forms. Most tools take the first:

x-api-key: uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Authorization: Bearer uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Claude Desktop, claude.ai, and Lovable can also connect without a header. They point at the same URL and authorize through a UI Rules page instead, where you sign in and pick the project once.

The quick way#

For Claude Code and Cursor, the CLI writes the config file for you with the key already in place:

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

Use setup cursor for Cursor, with --global to cover every project. It merges into an existing config rather than replacing it, and warns you if the file it just wrote is not ignored by git. The CLI can also export your tokens as a file.

Everything in the per-tool guides is what the CLI produces, and stays the route for tools it does not cover.

What a tool can change#

Delivery is read-only by design. Serving the ruleset, the tokens, the export, and validation needs only read access, and a plain serving key carries nothing else.

Three tools do change your design system, and each needs its own scope that is never granted by default. Without the scope the tool gets a clean refusal and everything else keeps working.

• Set a token value changes one token for one project, as that project's override. Your brand keeps its own value and other projects are unaffected.
• Scan a site reads a site's tokens and writes them into the brand, which every project inherits from. It previews first and writes nothing until you approve.
• Import tokens takes a block of CSS you paste. By default it writes overrides for one project; pointing it at the brand is a separate grant.

A separate set of session tools lets an agent keep its own notes and send feedback. Those write to UI Rules' own storage, never to your brand's rules, and they also need their own scopes.

For every tool by name, the order the server asks agents to use them in, and the scope each needs, see the MCP tools reference.

Brand scope vs project scope#

The key you use determines what a tool sees.

• Brand is the source of truth. It is served untouched and inherited by every project.
• Project serves the same brand ruleset plus its own sparse overrides. On conflict the project wins, and the brand is never modified.

Because each project carries its own key, point a tool at the project whose effective view you want it to follow. The project overview lists its overrides, so you can confirm what it resolves to before you connect.

Per-tool guides#