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 — brand/company SVG logo catalog
• ui.shadcn.com — the official shadcn/ui component registry

Built with the official @modelcontextprotocol/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 18 or newer

Install

Clone and install dependencies:

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:

{
  "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):

{
  "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

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.