English Français العربية

TheDesignAgent

Official registry Developer tools

A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.

Website

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http thedesignagent 'https://www.thedesignagent.ai/mcp' --header 'Authorization: <Optional: Bearer tda_... API key, for CI and headless use. Without it, clients that support MCP authorization sign in with OAuth.>'
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "thedesignagent": {
            "type": "http",
            "url": "https://www.thedesignagent.ai/mcp",
            "headers": {
                "Authorization": "<Optional: Bearer tda_... API key, for CI and headless use. Without it, clients that support MCP authorization sign in with OAuth.>"
            }
        }
    }
}
NPM package @thedesignagent/mcp
Claude Code 
claude mcp add thedesignagent -e 'THEDESIGNAGENT_API_KEY=<your thedesignagent_api_key>' -e 'CHROME_PATH=<CHROME_PATH>' -- npx -y @thedesignagent/mcp@0.5.3
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "thedesignagent": {
            "command": "npx",
            "args": [
                "-y",
                "@thedesignagent/mcp@0.5.3"
            ],
            "env": {
                "THEDESIGNAGENT_API_KEY": "<your thedesignagent_api_key>",
                "CHROME_PATH": "<CHROME_PATH>"
            }
        }
    }
}

Environment variables

  • THEDESIGNAGENT_API_KEY required secret Your TheDesignAgent API key (starts with tda_)
  • CHROME_PATH Browser binary for Visual screenshots, if not found automatically

Frequently asked questions

What is TheDesignAgent?

A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.

How do I install TheDesignAgent?

It runs as a remote server. In Claude Code: claude mcp add --transport http thedesignagent 'https://www.thedesignagent.ai/mcp' --header 'Authorization: <Optional: Bearer tda_... API key, for CI and headless use. Without it, clients that support MCP authorization sign in with OAuth.>'. For other clients, paste the JSON configuration from this page into their MCP settings.

Does TheDesignAgent need an API key?

Yes. It expects THEDESIGNAGENT_API_KEY, Authorization, which you set in its configuration.

Who maintains TheDesignAgent?

It is published by ai.thedesignagent. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.