Apply your design system guidelines in Codex
Connect the OpenAI Codex CLI 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.
Prerequisites
- The OpenAI Codex CLI installed and signed in. Run
codex --versionto confirm it is on your path. - A UI Rules brand with at least one connected project. The connection key is per project.
- Access to your project's Connect dialog in the UI Rules app.
Get your connection key
Open the project
In the UI Rules app, open the brand, then open the project (connected app) you want Codex to serve.
Copy the connection key
Open the Connect dialog and copy the connection key. You reference it below as UIRULES_CONNECTION_KEY. Keep it private, like a password.
Treat your connection key like a secret. Do not commit it to source control or paste it into shared files. The examples below read it from an environment variable so it never lives in your config file.
Configure
Codex reads MCP servers from ~/.codex/config.toml. Each server is a [mcp_servers.<name>] table. UI Rules serves over streamable HTTP, so you point Codex at the endpoint and pass your connection key as a bearer token.
Set your connection key as an environment variable
Export your key so Codex can read it without storing it in the config file. Add this to your shell profile (for example ~/.zshrc or ~/.bashrc).
export UIRULES_CONNECTION_KEY="your-connection-key"Add the UI Rules server
Open ~/.codex/config.toml and add the following table. The bearer_token_env_var field tells Codex which environment variable holds your key.
[mcp_servers.uirules]
url = "https://mcp.uirules.com/mcp"
bearer_token_env_var = "UIRULES_CONNECTION_KEY"The environment variable name is yours to choose. UI Rules accepts the key as Authorization: Bearer <key>, which is what Codex sends.
To write the same table from the command line, run codex mcp add uirules --url https://mcp.uirules.com/mcp --bearer-token-env-var UIRULES_CONNECTION_KEY.
UI Rules is a remote server over streamable HTTP. There is no local process to install and no stdio bridge, so the table above is the only shape.
Verify
List active servers
In a Codex session, run the /mcp command. The uirules server appears in the list of active MCP servers.
Ask for something on-brand
Prompt Codex to build a small piece of UI, for example a primary button or a card. The result should use your brand tokens and follow your authored rules rather than the default theme.
Troubleshooting
If the server does not appear, or Codex generates off-brand UI, see Troubleshooting.
