# How to add design review to Cursor

> Add the TheDesignAgent MCP server to Cursor's mcp.json, locally or hosted, and Cursor's agent 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-cursor · Workflow · 2026-10-04

To add design review to Cursor, add the TheDesignAgent MCP server to Cursor's `mcp.json`. Cursor's agent then has a design agent in its loop: `Discover` gives it a brief before it builds a screen, and `Ux` and `Visual` score the result for job fit, UX and visual quality, using a project memory every agent on the repo shares.

## Before you start

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

## Local or hosted?

- **Local** runs on your machine through `npx`. All three tools work, and `Visual` can screenshot pages on `localhost`.
- **Hosted** needs no install. `Discover`, `Ux` and `Visual` all work, but `Visual` can only reach public pages and preview deploys, not `localhost`.

Most people building locally want the local server.

## Add the server

Open Cursor's MCP settings, or edit `.cursor/mcp.json` in your project (`~/.cursor/mcp.json` applies it to every project).

Local:

```json
{
  "mcpServers": {
    "thedesignagent": {
      "command": "npx",
      "args": ["-y", "--package=@thedesignagent/mcp", "thedesignagent-mcp"],
      "env": { "THEDESIGNAGENT_API_KEY": "tda_..." }
    }
  }
}
```

Hosted:

```json
{
  "mcpServers": {
    "thedesignagent": {
      "url": "https://www.thedesignagent.ai/mcp",
      "headers": { "Authorization": "Bearer tda_..." }
    }
  }
}
```

Keep the `--package` form for the local server: the package has two commands, so a bare `npx @thedesignagent/mcp` won't start.

> **Keep the key out of your repo.** Run `npx -y --package=@thedesignagent/mcp thedesignagent login` once to save it to `~/.thedesignagent/credentials`, then drop the `env` line from the local config. Don't commit a project `mcp.json` that contains a key.

## Tell the agent when to use it

The tools tell Cursor's agent what they do, but a rule makes the loop reliable. Add a project rule along these lines:

```
For any new screen or significant UI change: call Discover with the task before building,
build from the brief, then call Ux and Visual (with render_url for a running page) and
fix critical and high findings before finishing.
```

Cursor can also install the plugin from its repository if your version supports Agent Plugins: `https://github.com/CMBurnett/the-design-agent-plugin`. That adds skills which teach the same loop.

## Check it works

Ask Cursor to build a small screen. On a new project, the first `Discover` asks the agent to scan the repo and send a project model; after that, briefs come back immediately. Then watch for the `Ux` and `Visual` calls once the screen is built.

## If something's wrong

If the tools don't appear, check the server shows as connected in Cursor's MCP settings and that the key is set. The [support page](/support) covers the common error messages. Other clients: [Claude Code and Grok Build](/field-notes/add-design-review-to-claude-code) and [Codex](/field-notes/add-design-review-to-codex).