> For the complete documentation index, see [llms.txt](https://docs.ui-color-palette.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ui-color-palette.com/mcp/readme.md).

# UI Color Palette MCP

The **UI Color Palette MCP** is a [Model Context Protocol](https://modelcontextprotocol.io) server that exposes the UI Color Palette engine to any MCP-compatible AI assistant — Claude, Cursor, Windsurf, and others.

It lets an AI generate, preview, audit, and publish color palettes without opening a design tool.

## Endpoint

```
https://mcp-uicp.yelbolt.workers.dev/mcp
```

The server runs on [Cloudflare Workers](https://workers.cloudflare.com) with durable state per session.

## Tools at a glance

### Palette tools — no authentication required

| Tool                                                                               | Description                                                            |
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [`get_palette`](/mcp/tools/palette.md#get_palette)                                 | Generate a complete color palette from a base configuration and themes |
| [`get_color_system`](/mcp/tools/palette.md#get_color_system)                       | Build a semantic color system from taxonomy bindings                   |
| [`create_color_harmony`](/mcp/tools/palette.md#create_color_harmony)               | Generate color harmonies from a base color                             |
| [`extract_dominant_colors`](/mcp/tools/palette.md#extract_dominant_colors)         | Extract dominant colors from an image URL                              |
| [`generate_code`](/mcp/tools/palette.md#generate_code)                             | Export palette tokens in CSS, SCSS, Tailwind, Swift, and more          |
| [`generate_colors_from_prompt`](/mcp/tools/palette.md#generate_colors_from_prompt) | Generate source colors from a natural language description             |
| [`preview_palette`](/mcp/tools/palette.md#preview_palette)                         | Render a palette as an inline image                                    |

### Community tools — authentication required

| Tool                                                                               | Description                            |
| ---------------------------------------------------------------------------------- | -------------------------------------- |
| [`list_published_palettes`](/mcp/tools/community.md#list_published_palettes)       | Browse publicly shared palettes        |
| [`list_my_published_palettes`](/mcp/tools/community.md#list_my_published_palettes) | List your own published palettes       |
| [`get_published_palette`](/mcp/tools/community.md#get_published_palette)           | Fetch a specific palette by ID         |
| [`publish_palette`](/mcp/tools/community.md#publish_palette)                       | Save a palette to the database         |
| [`update_published_palette`](/mcp/tools/community.md#update_published_palette)     | Update a published palette             |
| [`share_published_palette`](/mcp/tools/community.md#share_published_palette)       | Make a palette public in the community |
| [`unshare_published_palette`](/mcp/tools/community.md#unshare_published_palette)   | Make a palette private                 |
| [`unpublish_palette`](/mcp/tools/community.md#unpublish_palette)                   | Permanently delete a published palette |

## Installation

### Claude Desktop

Add the server to `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

### Claude Code

Add the server to `~/.claude/settings.json` (user-wide) or `.claude/settings.json` (project-level):

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "type": "http",
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

Or use the CLI directly:

```bash
claude mcp add --transport http ui-color-palette https://mcp-uicp.yelbolt.workers.dev/mcp
```

### VS Code

Add the server to `.vscode/mcp.json` in your project (or the equivalent user-level config):

```json
{
  "servers": {
    "ui-color-palette": {
      "type": "http",
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

### Cursor

Add the server to `~/.cursor/mcp.json` (user-wide) or `.cursor/mcp.json` (project-level):

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

### Windsurf

Add the server to `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "serverUrl": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

### OpenAI Codex

Add the server to `~/.codex/config.json`:

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

### Gemini CLI

Add the server to `~/.gemini/settings.json`:

```json
{
  "mcpServers": {
    "ui-color-palette": {
      "httpUrl": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}
```

***

## Quick start

**1. Add the server to your client** — see [Installation](#installation) above.

**2. Authenticate (optional)**

Community tools require a UI Color Palette account. The server implements OAuth 2.0 — your MCP client will handle the flow automatically when you first call an authenticated tool. See [Authentication](/mcp/authentication.md) for details.

**3. Generate a palette**

Ask your AI assistant:

> *"Generate a Tailwind palette from a deep forest green (#2D6A4F), light and dark themes, and show me a preview."*

The assistant will call `get_palette`, then `preview_palette` to render the result inline.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ui-color-palette.com/mcp/readme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.