Skip to content
← All install options

Install Better Design MCP in Cursor

Follow the setup below to give Cursor Better Design's systems and interface guidance.

One-click install
Opens Cursor and adds the Better Design MCP server.
Add to Cursor

Setup

Config
json
{
  "mcpServers": {
    "better-design": {
      "url": "https://better-design.com/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>",
        "X-Better-Design-Client": "cursor"
      }
    }
  }
}

Choose a project or a global Cursor config

Save the JSON in .cursor/mcp.json to use Better Design in one project. Save it in ~/.cursor/mcp.json to use it in every project.

To keep the key out of the file, Cursor can read it from an environment variable in the headers, for example Bearer ${env:BETTER_DESIGN_API_KEY}.

Check the server in Cursor

Open Customize in the sidebar and find better-design. Its toggle turns the server on or off, and a disabled server does not load in chat. Cursor uses the tools listed under Available Tools when they fit your request, and it asks for approval before it runs an MCP tool.

What the agent can use after setup

Better Design gives the agent design context and review tools. The agent still writes the code, and your repository stays the source of truth.

  • Find a catalog design system or create one for your brand before frontend work starts.
  • Load UI principles for visual choices and UX principles for flows and behavior.
  • Get component and icon guidance that matches the chosen system.
  • Run review rules, comprehension checks and spacing checks on rendered pages.

Fix a Cursor MCP connection

Open the Output panel with Cmd+Shift+U on macOS or Ctrl+Shift+U on Windows and Linux, then select MCP Logs. The log names connection and authentication errors.

  • The server does not appear: check that the file is .cursor/mcp.json or ~/.cursor/mcp.json and that the JSON is valid, then restart Cursor.
  • The log shows an authentication error: replace the key in the Authorization header with a current one and restart Cursor.
  • A tool call fails in chat: retry it, then read MCP Logs for the cause.
  • Your company uses Cursor Enterprise: an admin may need to add https://better-design.com/api/mcp to the allowed MCP servers.

Questions

What does Add to Cursor do?

It opens Cursor with the Better Design server and your key already filled in. It is the same server as the JSON config, so use one or the other.

Why does Cursor ask before it runs a tool?

Cursor asks for approval before it uses MCP tools by default. You can approve each call as it comes.

Can I use an environment file for the key?

Not for this server. Cursor reads envFile only for local stdio servers, and Better Design is a remote server. Use ${env:...} in the header instead.

Official Cursor resources

Related