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.
The connection key
Each project exposes a connection key. Your AI tool uses the key to authenticate and read the project's effective ruleset over MCP. Treat the key like a secret: anyone with it can read the ruleset that project serves.
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.
Create a connection key
Open Connect your AI tools on the project overview, pick your tool, and generate a key. The key identifies the project on its own.
Configure your tool
Add UI Rules as an MCP server in your tool, using the connection key for authentication. The dialog shows the exact steps for the tool you picked, with the key already filled in.
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, v0, Lovable, Replit, and Figma Make, see Connect.
