Connect your AI to ColorFlipper

ColorFlipper exposes a hosted MCP endpoint that any MCP-capable AI tool can connect to. Once connected, your AI can read the live colors of the page you're looking at and push back new schemes that appear in the panel within seconds. No copy-paste.

1. Sign in

Install the extension and click the toolbar icon to open the panel on any page. In the panel's scheme bar, click the MCP button, then Sign in with Google. You'll see two values:

• MCP URL, like https://mcp.colorflipper.com/u/abc123. Safe to share or screenshot.
• Token. Secret. Paste into the Authorization: Bearer ... field of your AI tool. Rotate any time from the MCP modal in the panel if you suspect it's leaked. The URL stays the same after rotation.

2. Paste into your AI tool

Pick your tool from the dropdown in the MCP modal and copy the snippet. It comes with your URL and token already filled in. The examples below show the same shapes with placeholders. Each is a one-time setup.

Claude Code

Run in your terminal:

claude mcp add --transport http colorflipper \
  https://mcp.colorflipper.com/u/abc123 \
  --header "Authorization: Bearer YOUR_TOKEN"

Claude Desktop

Settings → Developer → Edit Config, then add to claude_desktop_config.json. Needs Node (npx) on your PATH.

{
  "mcpServers": {
    "colorflipper": {
      "command": "npx",
      "args": [
        "-y", "mcp-remote",
        "https://mcp.colorflipper.com/u/abc123",
        "--header", "Authorization: Bearer YOUR_TOKEN"
      ]
    }
  }
}

Cursor

Save to ~/.cursor/mcp.json (or .cursor/mcp.json in your workspace):

{
  "mcpServers": {
    "colorflipper": {
      "url": "https://mcp.colorflipper.com/u/abc123",
      "headers": { "Authorization": "Bearer YOUR_TOKEN" }
    }
  }
}

VS Code

Save to .vscode/mcp.json in your workspace:

{
  "servers": {
    "colorflipper": {
      "type": "http",
      "url": "https://mcp.colorflipper.com/u/abc123",
      "headers": { "Authorization": "Bearer YOUR_TOKEN" }
    }
  }
}

Lovable (paid plan)

Project settings → Integrations → MCP servers → Add. Paste the URL and the Authorization header.

ChatGPT

Settings → Connectors → Add. URL and bearer token as above. Requires a plan that exposes the Connectors UI.

3. Use it

Open the page you want to recolor, click the extension to open the panel, then in your AI tool say something like:

• "Make the hero warmer, give me three options."
• "Pull the current colors and propose a high-contrast variant."
• "Match the palette to this brand: #1a4dff and white."

The AI calls three tools under the hood: get_status (which browser/tab is connected), get_colors (the live color set from that page), and push_schemes (writes one or more named schemes into the panel). Schemes appear immediately, ready to click and compare.

Multiple browsers

Sign into the extension on every browser you want to drive. The MCP get_status tool lists them. Your AI either picks the most recently active one automatically, or you can name a session explicitly: "push it to the Chrome session on my laptop".

What's allowed

The free tier has a generous monthly cap as a runaway-loop circuit breaker. Real usage will never hit it. If you do, the AI will see a monthly_limit_reached error with the reset date.

Privacy

The AI tools you connect can see the URL and title of pages where you've opened ColorFlipper, plus the colors it reads from those pages. That's the point of the feature. Full details in our privacy policy.

Not supported yet

• claude.ai (web): their connector UI is OAuth-only with no bearer-token field. We'll add support if Anthropic ships that, or if enough users ask.
• Bolt, v0: no MCP client. Use Lovable, Cursor, or Claude Desktop alongside them.