Connected in one block.

ThinkUI is a hosted MCP server. Your agent connects to one URL and sends your key in the request header, so there is no SDK to add to your project, no build step, no package to install and no daemon to keep alive. Prefer to run the server yourself? That form is further down this page.

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 Authorization header of the server entry, written as Bearer your-key.

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": {
      "url": "https://thinkui.xyz/mcp",
      "headers": { "Authorization": "Bearer your-key" }
    }
  }
}

Two values are all a client needs: the URL, and an Authorization header carrying your key. A client with a field for a remote server URL takes them as they are. Restart the app after saving.

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

// the same two lines in Cursor, VS Code, Windsurf and Zed
{
  "mcpServers": {
    "thinkui": {
      "url": "https://thinkui.xyz/mcp",
      "headers": { "Authorization": "Bearer your-key" }
    }
  }
}

VS Code puts the same entry under a "servers" key rather than "mcpServers". Claude Code takes it from the command line: claude mcp add --transport http thinkui https://thinkui.xyz/mcp --header "Authorization: Bearer your-key".

Running the server yourself instead? Point your client at a command rather than a URL: "command": "python" with "args": ["C:/path/to/thinkui-mcp/server.py"]. That is the same server on your own machine, and it needs no key - the key is what gates the hosted URL.

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.

Licensing

What you may ship.

Every reference states its own position in the result, before you decide anything.

Permissively licensed

Where a screenshot or an asset comes from a source under MIT, Apache, BSD, CC0 or the OFL, the result names the licence and the source. Those you can ship on.

Shown as a reference

Where a screen is a product's own marketing material, the result says study reference only, do not ship or republish and credits the owner. Look at it, reason from it, then design your own.

The server never implies you may reuse something you may not, and it never hands you an asset without saying where it came from. That is the point of a reference library: evidence you can check, not material to copy.

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 the Authorization header is present and reads Bearer your-key with your own key in place of your-key. A missing or wrong key comes back as JSON-RPC rather than a blank failure, and the message says which it is.

Do I need Node or Python installed?

No. The server is hosted, so all your agent needs is the URL and your key - no Node, no Python, no package manager. Python 3.10 or newer only matters if you run the server from your own copy instead.

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