What is the shadcn/ui MCP server?
The community shadcn/ui MCP server by Jpisnice gives an AI coding agent access to shadcn/ui v4 component source, demos, blocks and metadata. It supports React, Svelte, Vue and React Native, runs over stdio or Streamable HTTP, and adds tweakcn theme tools. It is separate from the official shadcn CLI server.
This is a community server, not the one shipped with the shadcn CLI. Its README describes it as giving AI assistants access to shadcn/ui v4 components, blocks, demos and metadata, for React, Svelte, Vue and React Native.
It reads the component repositories through the GitHub API, so a token raises the rate limit from 60 to 5,000 requests an hour. Frameworks map to shadcn/ui, shadcn-svelte, shadcn-vue and react-native-reusables.
What changes in your agent's output
- The agent fetches current component source and demos instead of recalling an older version.
- Blocks such as dashboards, calendars and forms come as complete implementations.
- Metadata exposes dependencies, so the agent knows what to install.
- Theme tools list tweakcn themes and can apply a preset, with a dry run option.
How it differs from the official server
The official shadcn MCP server works through the CLI against registries configured in your project. This server reads the open source repositories directly and adds other frameworks, so it suits agents working outside a standard shadcn project setup. The README says the base primitive library can be Radix or Base UI for React.
Who it is for
Best for
- Vue, Svelte and React Native projects that follow the shadcn pattern.
- Agents that need examples and blocks as reference without initializing a registry.
- Teams that want to host one shared server over Streamable HTTP, with Docker support.
Not for
- Projects that need private or third-party registries. See the official server or Plate MCP for registry-based installs.
- Reading a design file. Figma MCP fits that job.
- A broad catalog beyond shadcn. Magic MCP covers a wider component set.
Use it with UiChemy
The server returns front-end component code. For WordPress, UiChemy produces editable pages: Composer works inside Elementor or Gutenberg, and Figma to WordPress turns a design into native blocks. Click Get Started on uichemy.com.
Connect shadcn/ui MCP Server (Community): Components, Blocks, Themes to your AI client
npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKENGet a token
Create a GitHub personal access token with no scopes. It is optional, but it lifts the limit from 60 to 5,000 requests an hour.
Run the server
Run the command above. Add
--framework svelte,vueorreact-nativeto switch frameworks, and--ui-library basefor Base UI on React.Add it to your client
Use the JSON config above in your client's MCP settings. The README has guides for VS Code, Cursor, Claude Desktop and Continue.
Or run over HTTP
Start
node build/index.js --mode http --port 7423and connect tohttp://localhost:7423/mcp. Docker Compose is supported.Check health
In HTTP mode,
curl http://localhost:7423/healthconfirms the server is up.
Client configuration
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "YOUR_TOKEN"]
}
}
}Endpoints and ports
http://localhost:7423/mcpStateless Streamable HTTP, default port 7423http://localhost:7423/healthAvailable in HTTP modeGITHUB_PERSONAL_ACCESS_TOKENOptional, for higher GitHub rate limitsMCP_TRANSPORT_MODEstdio, http or dualWhat you can do with it
- Four frameworksReact, Svelte, Vue and React Native implementations from their shadcn ports.
- Blocks and demosComplete block implementations and usage examples alongside component source.
- Theme toolsList, inspect and apply tweakcn themes, with a dry run before writing CSS.
- Two transportsstdio by default and Streamable HTTP at one stateless endpoint, or both at once.
- Smart cachingHandles GitHub rate limits and adds cache hints on list and read results.
- Docker readyContainer and Docker Compose setup for shared deployments.
Tools it exposes
get_component
Returns component source code.
get_component_demo
Returns usage examples for a component.
list_components
Lists all available components.
get_component_metadata
Returns dependencies and info for a component.
get_block
Returns a complete block implementation.
list_blocks
Lists available blocks with categories.
get_directory_structure
Explores the repository structure.
list_themes
Lists available tweakcn themes.
get_theme
Returns details of one tweakcn theme.
apply_theme
Applies a tweakcn preset to the project and writes CSS. Supports dryRun.
Frequently asked questions
What is the shadcn/ui MCP server?
It is a community MCP server that gives an AI coding agent shadcn/ui v4 component source, demos, blocks and metadata. It covers React, Svelte, Vue and React Native, and also offers tweakcn theme tools.
Is this the official shadcn MCP?
No. The official one is run through the shadcn CLI and works with registries in your project. This one, by Jpisnice, reads the repositories through GitHub. See the shadcn MCP server page for the official version.
How do I install it?
Run npx @jpisnice/shadcn-ui-mcp-server, ideally with --github-api-key and a token with no scopes. Then add the same command to your client's MCP config so the agent can call it. HTTP mode and Docker deployment are also documented in the README.
Do I need a GitHub token?
It is optional. Without one you get 60 requests an hour, and with one 5,000. The README recommends a token. It needs no scopes and takes about two minutes to create.
Which frameworks does it support?
React by default, plus Svelte, Vue and React Native through the --framework flag. They map to the shadcn/ui, shadcn-svelte, shadcn-vue and react-native-reusables projects, and the Radix or Base UI choice applies to React only.
Which AI agents work with it?
Anything that can run a stdio MCP server or reach an HTTP one. The README has guides for VS Code, Cursor, Claude Desktop, Continue and Autohand Code, and a one-click bundle for Claude Desktop.
What license is it under?
The repository is MIT licensed, as GitHub shows. The components it fetches come from the shadcn ports, which have their own separate licenses, so check those before you ship any of the generated code.