---
title: "Apply your design system guidelines in Codex"
description: "Connect Codex to UI Rules over MCP, for one project or everywhere, so the UI it generates follows your brand and design system guidelines."
label: "Codex"
date: "2026-10-05"
---

Connect Codex to UI Rules over MCP. Once connected, Codex reads your brand styles, rules, and component vocabulary as context, so the UI it generates matches your brand by default. The guide covers the Codex CLI, the IDE extension, and the ChatGPT desktop app.

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 **Codex**.

## Which way to connect

- **Everywhere.** One command adds it for the Codex CLI, the IDE extension, and the ChatGPT app on this computer. The Connect dialog opens on this one.
- **For one project.** UI Rules goes in the project's own `.codex/config.toml`.

<Tabs items={["Everywhere", "For one project"]}>
<Tab value="Everywhere">

<Steps>
<Step>
### Open a terminal

In the ChatGPT desktop app, open your project, send any message, and click **View → Open Terminal**.
</Step>
<Step>
### Add the server

Run this. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.

```bash
codex mcp add uirules --url https://mcp.uirules.com/mcp
```
</Step>
<Step>
### Check the connection

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

If no browser opened, run `codex mcp login uirules`.

</Tab>

<Tab value="For one project">

<Steps>
<Step>
### Open a terminal in your project folder

In the ChatGPT desktop app, open your project, send any message, and click **View → Open Terminal**.
</Step>
<Step>
### Add the server

Create or open `.codex/config.toml` in your project folder and paste this.

```toml
[mcp_servers.uirules]
url = "https://mcp.uirules.com/mcp"
```
</Step>
<Step>
### Trust the folder

Start a new chat in the project and trust the folder if asked. Codex reads a project's config only once the folder is trusted.
</Step>
<Step>
### Sign in

Run this. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.

```bash
codex mcp login uirules
```
</Step>
<Step>
### Check the connection

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

</Tab>

</Tabs>

## Use an API key instead

For the everywhere setup, you can use an API key instead of signing in. 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.

Instead of the add step, create or open `~/.codex/config.toml` and paste this with your key in place of the placeholder.

```toml
[mcp_servers.uirules]
url = "https://mcp.uirules.com/mcp"
http_headers = { "x-api-key" = "uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
```

<Callout type="warn">
The key goes in your user file, never the project's `.codex/config.toml`, which is shared with the repo.
</Callout>

## Troubleshooting

If the server does not appear, or Codex generates off-brand UI, see [Troubleshooting](/docs/connect/troubleshooting).