Connecting an app
Connecting an app links it to a project so the app receives your brand styles, rules, and component vocabulary over MCP. Once connected, the app serves the brand ruleset by default and applies any project overrides on top.
Signing in or using a key
A project is read over MCP with a key that belongs to it. Most tools get one by signing in: the tool opens a UI Rules page where you select the project and click Authorize, and UI Rules uses your own key for that project or makes one for you. You can also create a key and paste it into the tool yourself. Treat a key like a secret: anyone with it can read the ruleset that project serves.
A new project does not come with a key. Creating a project opens it with the Connect dialog already showing, so you can connect a tool straight away.
Never paste a real connection key into a shared doc, ticket, or repository. The examples below use a placeholder.
Connect an app
Open the project
Open the project for the app you want to connect. A new project serves the brand ruleset unchanged until you add overrides.
Pick your tool
Click Connect in the workspace top bar and pick your tool. The dialog shows the exact steps for it.
Configure your tool
Add UI Rules as an MCP server in your tool and sign in when it asks. To use a key instead, open Use an API key instead and click Create API key; the steps below it then include the key. A key's full value is shown only at the moment it is created.
Confirm the connection
Reload your tool and confirm it can read the project. The tool now receives the effective view: your brand ruleset plus any project overrides.
Connecting your first app starts your 14-day trial. No card is required. When the trial ends, the org drops to Starter.
Per-tool setup
The exact configuration steps differ by tool. For step-by-step instructions for Cursor, Claude Code, Codex, VS Code, v0, Lovable, and Figma Make, see Connect.
