# ui-toolkit-mcp

Local, free MCP server: brand **logo search** + **shadcn/ui component search & source lookup**.

No API key, no login, no paid tier, no telemetry — it only talks to two public, free APIs:

- [api.svgl.app](https://api.svgl.app) — brand/company SVG logo catalog
- [ui.shadcn.com](https://ui.shadcn.com) — the official shadcn/ui component registry

Built with the official [`@modelcontextprotocol/sdk`](https://github.com/modelcontextprotocol/typescript-sdk), runs over stdio, so it works with any MCP-compatible client: **LM Studio**, Claude Desktop/Code, Cursor, Windsurf, Cline, etc.

## Tools

| Tool | What it does |
|---|---|
| `logo_search` | Find a brand/company logo by name, return it as SVG, JSX, or TSX |
| `shadcn_search` | Search the shadcn/ui registry by name, get the install command |
| `shadcn_get_component` | Fetch the real source code of a shadcn/ui component from the registry |

## Prerequisites

- [Node.js](https://nodejs.org) 18 or newer

## Install

Clone and install dependencies:

```bash
git clone https://github.com/anomal3/ui-toolkit-mcp.git
cd ui-toolkit-mcp
npm install
```

(No build step — it's plain ESM JavaScript, runs directly with `node index.js`.)

## Connect to LM Studio

LM Studio reads MCP servers from its `mcp.json`:

- Windows: `%USERPROFILE%\.lmstudio\mcp.json`
- macOS/Linux: `~/.lmstudio/mcp.json`

Open (or create) that file and add an entry under `mcpServers` — merge it in if the file
already has other servers, don't overwrite the whole file:

```json
{
  "mcpServers": {
    "ui-toolkit": {
      "command": "node",
      "args": ["/absolute/path/to/ui-toolkit-mcp/index.js"]
    }
  }
}
```

Replace the path with the actual location where you cloned the repo (on Windows use double
backslashes, e.g. `"C:\\Users\\you\\ui-toolkit-mcp\\index.js"`).

Then restart LM Studio (or reload MCP servers from **Program → Integrations**) and enable
`ui-toolkit` for your chat/agent.

### Without cloning (npx)

If you don't want to `git clone` manually, point LM Studio at `npx` instead and it will
fetch/run the repo on demand (requires `git` and `npm` on PATH):

```json
{
  "mcpServers": {
    "ui-toolkit": {
      "command": "npx",
      "args": ["-y", "github:anomal3/ui-toolkit-mcp"]
    }
  }
}
```

## Connect to Claude Desktop / Claude Code / Cursor / other MCP clients

Same `{"command", "args"}` shape works everywhere — only the config file location differs:

| Client | Config file |
|---|---|
| Claude Desktop | `claude_desktop_config.json` |
| Claude Code | `claude mcp add --scope user ui-toolkit -- node /absolute/path/to/index.js` |
| Cursor | `~/.cursor/mcp.json` |
| Windsurf | `~/.codeium/windsurf/mcp_config.json` |

## Usage examples

Once connected, just ask your assistant naturally — it decides when to call the tools:

- "Add the GitHub and Discord logos to this page" → `logo_search`
- "What shadcn components are there for dialogs?" → `shadcn_search`
- "Show me the source of the shadcn button component" → `shadcn_get_component`

## Test it standalone

```bash
node test/smoke.mjs
```

Spins up the server, calls all three tools, and prints the results — useful to sanity-check
your setup before wiring it into an MCP client.

## License

MIT — see [LICENSE](LICENSE).