Apply your design system guidelines in Codex
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.
Open a terminal
In the ChatGPT desktop app, open your project, send any message, and click View → Open Terminal.
Add the server
Run this. A UI Rules page opens in your browser. Sign in if asked, select the project, and click Authorize.
codex mcp add uirules --url https://mcp.uirules.com/mcpCheck the connection
Ask "Is UI Rules connected?" to check.
If no browser opened, run codex mcp login uirules.
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.
[mcp_servers.uirules]
url = "https://mcp.uirules.com/mcp"
http_headers = { "x-api-key" = "uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" }The key goes in your user file, never the project's .codex/config.toml, which is shared with the repo.
Troubleshooting
If the server does not appear, or Codex generates off-brand UI, see Troubleshooting.
