ui-toolkit-mcp
Provides tools for searching the shadcn/ui component registry by name, getting install commands, and fetching the real source code of components.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@ui-toolkit-mcpFind the shadcn card component source"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 |
| Find a brand/company logo by name, return it as SVG, JSX, or TSX |
| Search the shadcn/ui registry by name, get the install command |
| Fetch the real source code of a shadcn/ui component from the registry |
Related MCP server: Code Memory
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.jsonmacOS/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 Code |
|
Cursor |
|
Windsurf |
|
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.mjsSpins 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.
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/anomal3/ui-toolkit-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server