Install the MCP

Code editors and CLI

Pick your IDE and copy the command. Sign up and we'll generate an API key and fill it in.

claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"

Apps and no-code tools

Step-by-step setup for ChatGPT, Claude, Lovable, Bolt, and more.

FAQ

What is the Better Design MCP?

The Better Design MCP is a Model Context Protocol server that gives AI coding agents access to design systems, UI principles, icon libraries, and review rules.

Which AI coding tools can install Better Design?

Better Design supports Cursor, VS Code, Claude Code, ChatGPT, Claude Desktop, Windsurf, OpenCode, Cline, and generic MCP clients.

Does the Better Design MCP require an API key?

Most MCP clients connect to Better Design with a bearer token created from the Better Design MCP page. ChatGPT connector setup uses OAuth.