What is the shadcn/ui MCP server?
The shadcn/ui MCP server by Jpisnice is a Model Context Protocol server that lets an AI coding agent read shadcn/ui v4 component source, demos, blocks and metadata. It supports React, Svelte, Vue and React Native, and runs with a single npx command.
It is a Model Context Protocol server that fetches shadcn/ui v4 component source, demos, blocks and metadata from GitHub and hands them to your AI coding agent. The agent stops guessing at props and copies the real implementation instead.
What changes in the agent's output
Without a source of truth, agents invent component APIs or paste outdated snippets. With this server connected, the agent can read the current TypeScript source, check which dependencies a component needs, and look at a working demo before it writes your page.
- Components arrive as the latest shadcn/ui v4 source, not a remembered version.
- Blocks such as dashboards, calendars and forms can be pulled whole.
- Framework switches cover React, Svelte, Vue and React Native.
- A GitHub token raises the API limit from 60 to 5,000 requests per hour.
Best for
- Teams building interfaces on shadcn/ui who want the agent to follow the library exactly.
- Developers moving a design into code who need accurate component structure. See Figma design system handoff for the design side.
- Anyone running Svelte, Vue or React Native ports of shadcn/ui.
Who it is not for
If your project does not use shadcn/ui, this server adds nothing. It reads the shadcn repositories only, so it will not describe your own custom components or another design system such as Carbon.
Pair it with UiChemy
Once the interface is built, UiChemy helps carry the design onto a live WordPress site. UiChemy's Figma to WordPress and AI to WordPress products turn designs and generated code into editable pages. Get Started at uichemy.com.
Connect shadcn/ui MCP Server (Community): Components, Blocks, Themes to your AI client
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_hereRun the server
Start it with npx. A GitHub token is optional but recommended because the unauthenticated limit is 60 requests per hour.
Pick a framework
Add --framework svelte, vue or react-native. For Base UI instead of Radix on React, add --ui-library base.
Add it to your client
Register the command in your AI coding agent's MCP settings. In Claude Code, claude mcp add --transport http points at the HTTP endpoint if you run HTTP mode.
Claude Desktop shortcut
Download the .mcpb file from the Releases page and double-click it to install.
Client configuration
{
"mcpServers": {
"shadcn-ui": {
"command": "npx",
"args": ["@jpisnice/shadcn-ui-mcp-server"]
}
}
}Endpoints and ports
http://localhost:7423/mcpStarted with node build/index.js --mode http --port 7423What you can do with it
- Multi-framework supportSwitch between React, Svelte, Vue and React Native implementations with one flag.
- Current v4 sourceReads the latest shadcn/ui v4 component code so output matches the library today.
- Demos for usage patternsThe agent sees a working example before it writes your component.
- Block-level reusePull complete dashboards, calendars and forms instead of assembling them from parts.
- Smart cachingHandles GitHub API rate limits with caching so repeated lookups stay quick.
- HTTP transport and DockerRun a stateless /mcp endpoint for several clients, with Docker Compose provided.
Tools it exposes
Component source
Returns the shadcn/ui v4 TypeScript source for a component.
Component demos
Returns example implementations and usage patterns.
Blocks
Returns full block implementations such as dashboards, calendars and forms.
Metadata
Returns dependencies, descriptions and configuration details.
Directory browsing
Lets the agent explore the repository structure.
Frequently asked questions
What is the shadcn/ui MCP server?
It is an open-source Model Context Protocol server that gives an AI coding agent direct access to shadcn/ui v4 component source, demos, blocks and metadata. The agent reads the real code from GitHub rather than relying on memory, which reduces wrong props and outdated patterns.
How do I install the shadcn/ui MCP server?
Run npx @jpisnice/shadcn-ui-mcp-server, ideally with a GitHub token passed through --github-api-key. Then add the same command to your AI coding agent's MCP configuration. Claude Desktop users can instead download the .mcpb file from the Releases page and double-click it. Setup takes about a minute on most machines.
Do I need a GitHub token?
No, but it helps. Without a token the server is limited to 60 GitHub API requests per hour. With a personal access token the limit rises to 5,000 per hour, which matters when the agent pulls several components and blocks in one session.
Which frameworks does it support?
It supports React, Svelte 5, Vue and React Native versions of shadcn/ui. React is the default. Switch with --framework svelte, vue or react-native, and use --ui-library base if you want Base UI primitives instead of Radix on React. Pick the framework flag that matches your project.
Can I run it over HTTP instead of stdio?
Yes. Start it in HTTP mode with node build/index.js --mode http --port 7423 and connect clients to the /mcp endpoint. A Docker Compose setup is included for deployments where several clients share one server. Docker Compose is included for shared deployments.
Does it work with Claude, Cursor and other agents?
It follows the Model Context Protocol, so any MCP-compatible AI coding agent can use it, including Claude Code, Claude Desktop and Cursor. Setup differs only in where each client stores its MCP server list. Check your client's docs for where the config file lives.
Is the shadcn/ui MCP server free?
Yes. The repository is released under the MIT licence, so you can use and modify it freely. The only cost to plan for is a GitHub token if you want the higher rate limit, and that is free too. Pair it with a design system synthesizer for token work.