# How to add design review to Codex

> Save your API key once, then install the TheDesignAgent plugin from its marketplace, or add the MCP server to config.toml. Codex then gets a design brief before it builds a screen and a scored UX and visual review after.

Source: https://www.thedesignagent.ai/field-notes/add-design-review-to-codex · Workflow · 2026-10-04

To add design review to Codex, save your TheDesignAgent API key once, then install the plugin with two commands. Codex gets a design agent in its loop: `Discover` for a brief before it builds a screen, `Ux` and `Visual` for a scored review after, and a project memory shared by every agent on the repo.

## Before you start

- An API key from [your dashboard](https://www.thedesignagent.ai/dashboard/api-keys). It starts with `tda_`.
- Node.js 20 or later.

## 1. Save your key

Codex has no standard way for a plugin to ask for a key, so save it once on your machine:

```
npx -y --package=@thedesignagent/mcp thedesignagent login
```

It goes to `~/.thedesignagent/credentials`, readable only by you. Every client and the `thedesignagent` CLI use it, and the `THEDESIGNAGENT_API_KEY` environment variable still wins when it's set.

## 2. Install the plugin

```
codex plugin marketplace add CMBurnett/the-design-agent-plugin
codex plugin add tda@thedesignagent
```

The plugin brings the MCP server and the skills that teach Codex the brief → build → review → fix loop (`design-loop`, `setup`, `brief`, `review` and `design-md`).

## Or add just the MCP server

In `~/.codex/config.toml`:

```toml
[mcp_servers.thedesignagent]
command = "npx"
args = ["-y", "--package=@thedesignagent/mcp", "thedesignagent-mcp"]
```

If you skipped step 1, add `env = { THEDESIGNAGENT_API_KEY = "tda_..." }` to that block. The package has two commands, so keep the `--package` form: a bare `npx @thedesignagent/mcp` won't start.

Without the plugin, tell Codex when to use the tools in your `AGENTS.md`: call `Discover` before building a screen, then `Ux` and `Visual` on the result.

> **Headless runs and CI:** the same key file powers the `thedesignagent` CLI, so `codex exec` jobs and CI can score pages too. For example, `npx -y --package=@thedesignagent/mcp thedesignagent check <url>`.

## Check it works

Ask Codex to build a small screen in a repo with a UI. The first `Discover` call for a new project asks Codex to scan the repo and send back a project model. That happens once; after it, briefs come back straight away. When the screen is built, Codex calls `Ux` and `Visual` and fixes the high-severity findings.

## If something's wrong

An authentication error means the key wasn't found: rerun `thedesignagent login` or set the variable. More fixes are on the [support page](/support). Other clients: [Claude Code and Grok Build](/field-notes/add-design-review-to-claude-code) and [Cursor](/field-notes/add-design-review-to-cursor).