---
title: "Connect any MCP tool to your design system guidelines"
description: "Connect an AI tool that has no guide of its own to UI Rules as a remote MCP server, by signing in or with an API key header."
label: "Custom MCP connection"
date: "2026-10-05"
---

If your AI tool is not one of the named guides but can add a remote MCP server, connect it with the server details below. It then reads your brand styles, rules, and component vocabulary like any other connected tool.

Open **Connect** in the workspace top bar and pick **Custom MCP connection**, the last entry in the list, for the same details with copy buttons.

<Steps>
<Step>
### Add a remote MCP server in your tool

- **Name**: `UI Rules`
- **Server URL**: `https://mcp.uirules.com/mcp`
</Step>
<Step>
### Sign in

Choose **OAuth** and connect. Sign in to UI Rules, select your project, and click **Authorize**.
</Step>
</Steps>

## Use an API key instead

For a tool that needs an API key rather than sign-in, open **Use an API key instead** in the Connect dialog and click **Create API key**, or **Choose permissions** to limit what it can do. The key is shown once. Then add this header in your tool:

- **Header**: `x-api-key`
- **Value**: your key

<Callout type="warn">
Treat a key like a password. Never paste a real key into a shared file or a screenshot.
</Callout>

The server is remote, over streamable HTTP, so a tool that only launches local MCP servers cannot connect. See [Connect overview](/docs/connect/overview#connecting) for the endpoint and header details, and [Troubleshooting](/docs/connect/troubleshooting) if it does not connect.