---
title: "Apply your design system guidelines in Lovable"
description: "Connect Lovable to UI Rules as a custom MCP connector, so it builds to your brand and design system guidelines rather than its own defaults."
label: "Lovable"
date: "2026-10-05"
---

Lovable takes a custom MCP connector. Once connected, Lovable's agent reads your brand styles, rules, and component vocabulary while it builds.

<Callout type="info">
The connection is personal to your Lovable account. Other workspace members connect their own accounts.
</Callout>

You sign in to UI Rules as part of the setup, so there is no key to copy. The **Connect** dialog in the workspace top bar shows the same steps when you pick **Lovable**.

## Add the connector

<Steps>
<Step>
### Open the connector list

Open **Connectors**, click **+** in the top right, then choose **MCP server**.
</Step>
<Step>
### Fill in the form and sign in

Paste the name and URL, keep **OAuth**, and click **Add & authorize**. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.

- **Server name**: `UI Rules`
- **Server URL**: `https://mcp.uirules.com/mcp`
</Step>
<Step>
### Grant permissions

Under **Manage my agent's permissions**, set **Manage all permissions** to **Always allow**.
</Step>
<Step>
### Tell Lovable to use it

This step is not optional. Without it, Lovable's agent never calls UI Rules.

Click **Settings → Knowledge** and paste this into **Workspace knowledge**.

```text
Before any UI work, call the UI Rules MCP tools get_brand_brief, get_project_notes, get_rules_index and get_design_tokens, in that order. Do not generate design inspiration or choose a visual direction; the brand's rules and tokens are the design direction. Every word of copy you write is governed too: call get_rules for the area covering writing before you write any text. Run check_rule_compliance at the end and report what it returns.
```
</Step>
<Step>
### Check the connection

Ask **"Is UI Rules connected?"** to check.
</Step>
</Steps>

## Use an API key instead

In the Connect dialog, open **Use an API key instead** and click **Create API key**, or **Choose permissions** to limit what it can do. The key is shown once.

In the form, select **Bearer token or API key** instead of **OAuth** and paste the key.

## If it still builds without asking

A request that does not mention the design system gives the agent nothing to look up. If it builds without ever calling UI Rules, add this to your first message:

```text
Use my UI Rules design system: pull the tokens and the rules from the MCP and follow them.
```

## Troubleshooting

If Lovable does not connect or ignores your brand, see [Troubleshooting](/docs/connect/troubleshooting).