React components and design rules your coding agent installs and follows.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
The code and guide for one component, block or template: when and when not to use it, every state, motion specs, accessibility notes, before/after. Includes the components it depends on and the npm packages to install. A template's own files come with the project path to write each one at (app/(app)/chat/page.tsx). Pro blocks and templates need a license key on the connection; without one they return a summary and how to get one.
Component name from list_components, e.g. button.
Target stack. Only react (CSS modules) for now.
True for a Tailwind CSS v4 project: each CSS module comes inside Tailwind's components layer, so utility classes passed in className override it. Leave out otherwise.
This tool isn't marked read-only, so it may change something on the server or in an account you connected.
Pick your client. Values in capitals, like YOUR_TOKEN, are yours to fill in.
Run in a terminal
claude mcp add --transport http mcp https://uipolish.com/mcp
The code and guide for one component, block or template: when and when not to use it, every state, motion specs, accessibility notes, before/after. Includes the components it depends on and the npm packages to install. A template's own files come with the project path to write each one at (app/(app)/chat/page.tsx). Pro blocks and templates need a license key on the connection; without one they return a summary and how to get one.
| Argument | Type | Description |
|---|---|---|
| name* | string | Component name from list_components, e.g. button. |
| stack | string | Target stack. Only react (CSS modules) for now. |
| tailwind | boolean | True for a Tailwind CSS v4 project: each CSS module comes inside Tailwind's components layer, so utility classes passed in className override it. Leave out otherwise. |
{
"type": "object",
"required": [
"name"
],
"properties": {
"name": {
"type": "string",
"description": "Component name from list_components, e.g. button."
},
"stack": {
"enum": [
"react"
],
"type": "string",
"description": "Target stack. Only react (CSS modules) for now."
},
"tailwind": {
"type": "boolean",
"description": "True for a Tailwind CSS v4 project: each CSS module comes inside Tailwind's components layer, so utility classes passed in className override it. Leave out otherwise."
}
}
}Foundation rules: concrete values for motion, states, typography, spacing, surfaces, focus and anti-patterns. Pass a topic for one file; omit it for the token roles, the finished? checklist and the list of topics.
| Argument | Type | Description |
|---|---|---|
| topic | string | One of: antipatterns, foundations, motion, spacing, states, surfaces, typography, tokens, checklist, tailwind (setup for Tailwind CSS v4 projects). |
{
"type": "object",
"properties": {
"topic": {
"type": "string",
"description": "One of: antipatterns, foundations, motion, spacing, states, surfaces, typography, tokens, checklist, tailwind (setup for Tailwind CSS v4 projects)."
}
}
}A color theme from one hue: the --ui-* accent, the text on it and in it, optionally tinted grays and accent primary buttons, light and dark, with every text color solved for 4.5:1 contrast. Returns CSS to paste after tokens.css. Use it when the project has a brand color.
| Argument | Type | Description |
|---|---|---|
| hue* | number | OKLCH hue, 0–360: about 25 red, 50 orange, 80 amber, 150 green, 190 teal, 262 blue, 295 violet, 350 pink. |
| tint | number | How much of the hue the grays take: 0 none, 1 a hint (default), 2 tinted. |
| brand | boolean | Primary buttons in the accent instead of near-black. Default true. |
{
"type": "object",
"required": [
"hue"
],
"properties": {
"hue": {
"type": "number",
"description": "OKLCH hue, 0–360: about 25 red, 50 orange, 80 amber, 150 green, 190 teal, 262 blue, 295 violet, 350 pink."
},
"tint": {
"enum": [
0,
1,
2
],
"type": "number",
"description": "How much of the hue the grays take: 0 none, 1 a hint (default), 2 tinted."
},
"brand": {
"type": "boolean",
"description": "Primary buttons in the accent instead of near-black. Default true."
}
}
}Every UI Polish template, block and component with a one-line summary and version. Templates are whole working apps (a chat app, an agent console, an agent workspace for coding); blocks are whole screens (sign-in, billing, team members, an approvals inbox, an agent task). Those marked pro need a UI Polish Pro license key.
No arguments.
{
"type": "object",
"properties": {}
}We read every tool's name, description and inputs the way the model will, looking for instructions hidden from you. A clean result means no warning signs, not a guarantee. Scanned Nov 6, 2026.
No readOnlyHint / destructiveHint annotations, so clients can't tell a read from a write without asking.
Fix: Add annotations to each tool, e.g. { readOnlyHint: true } for tools that only read.