Quickstart

Connected in one block.

ThinkUI is a standard MCP server over stdio. There is no SDK to install into your project, no build step and no daemon to keep alive — your agent starts it when it needs it.

Step 1

Get your key.

Create an account and copy the key from your dashboard. It is the only credential you need, and it goes in one place: the THINKUI_KEY environment variable of the server entry.

Step 2

Add it to your agent.

Pick your client. The block is the same shape everywhere; only the file name and the top-level key differ, and those are noted where they do.

claude_desktop_config.json

{
  "mcpServers": {
    "thinkui": {
      "command": "npx",
      "args": ["-y", "thinkui-mcp"],
      "env": { "THINKUI_KEY": "your-key" }
    }
  }
}

Claude Desktop · macOS: ~/Library/Application Support/Claude/
Windows: %APPDATA%\Claude\. Restart the app after saving.

.cursor/mcp.json · .vscode/mcp.json

// Cursor: keep the key as written
{
  "mcpServers": {
    "thinkui": {
      "command": "npx",
      "args": ["-y", "thinkui-mcp"],
      "env": { "THINKUI_KEY": "your-key" }
    }
  }
}

VS Code uses the same block under a "servers" key instead of "mcpServers". Claude Code: claude mcp add thinkui -- npx -y thinkui-mcp.

Running from a local checkout instead of the published package? Use "command": "python" with "args": ["C:/path/to/thinkui-mcp/server.py"] — that is the same server, started directly.

Reference

The five tools.

Your agent chooses these on its own once they are connected. You can also ask for one by name.

ThinkUI tools. Each returns results that name the project or component they came from.
Tool	Answers	Returns
find_ui_references	How a screen, a flow or a pattern is actually designed	Screens and flows with the app they came from, plus the components they use
find_ui_elements	What a component should look like	The component's own markup and stylesheet, ready to paste
find_animated_icons	Which animated icon fits an action	Working animated SVG — no runtime, no icon font
find_ui_materials	Which typeface, icon set or design system to use	Candidates with their maintenance state and where they come from
corpus_stats	What the server holds	Counts by category, so a refusal is never a mystery

Step 3

Ask it something.

Talk to your agent normally. When a design decision comes up it reaches for the server instead of inventing an answer.

You

"Design the upgrade screen for a note-taking app. I want it to feel calm, not pushy."

Your agent calls find_ui_references with a query like "upgrade paywall trial", then builds from what comes back.

find_ui_references · abridged

{
  "query": "upgrade paywall trial",
  "results": [
    {
      "app": "Things 3",
      "flow": "upgrade",
      "screens": 4,
      "source": "spec + screenshots"
    },
    {
      "app": "Bear",
      "flow": "paywall",
      "screens": 2,
      "source": "spec"
    }
  ],
  "elements": [ "pricing table", "toggle switch" ],
  "materials": [ "Inter", "Lucide" ]
}

Illustrative shape, fields trimmed for readability. Unknown queries come back empty rather than approximate.

Troubleshooting

When it does not show up.

The tools are not listed in my agent.

Clients read their config at start-up: quit and reopen the app after saving the block. In most clients the server list is visible in settings — a red entry there means the command path is wrong rather than the key.

It runs but every call fails.

Check THINKUI_KEY is present in the server's env block, and that you are on the plan that includes what you are asking for. A free plan can call every tool, up to its monthly limit.

Which Node version is needed?

The published package runs on any current LTS Node with npx available. If you are starting the server from a local checkout instead, Python 3.10 or newer is what it needs.

Give your agent something to look at.

Create an account, paste one block, and ask a design question you already know the answer to.

Get access See pricing