Skip to content
← All install options

Install Better Design MCP in Gemini CLI

Setup

  1. 1

    Install Gemini CLI

    Skip this if you have it. Otherwise run npm install -g @google/gemini-cli.
  2. 2

    Open the config file

    Use ~/.gemini/settings.json for every project. .gemini/settings.json covers one project, but it holds your key, so keep it out of git.
  3. 3

    Paste the block

    Merge the Config block below under mcpServers and save. Or run gemini mcp add --scope user --transport http --header "Authorization: Bearer <YOUR_API_KEY>" better-design https://better-design.com/api/mcp with your key in place of <YOUR_API_KEY>.
  4. 4

    Keep httpUrl

    Gemini CLI reads httpUrl as Streamable HTTP. Renaming it to url makes Gemini CLI use the older SSE transport instead.
  5. 5

    Check the connection

    Run gemini mcp list, or type /mcp list in a session.

Need more detail? Read the official Gemini CLI MCP documentation.

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

Add the rule

Optional: paste this into your agent's instructions so it uses Better Design on every edit.