Shadcn/Ui MCP Server

shadcn/ui MCP server that provides structured component context, installation guidance, usage examples, and props for React, Svelte, and Vue UI work.

Local serverstdioTypeScript

What is the Shadcn/Ui MCP MCP server?

If you want an AI assistant working directly with Shadcn/Ui MCP, the shadcn/ui mcp mcp server is the bridge. shadcn/ui MCP server that provides structured component context, installation guidance, usage examples, and props for React, Svelte, and Vue UI work.

What Shadcn/Ui MCP does

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.

Tools it exposes

Once connected, the assistant can call this tool directly:

  • Prerequisites — The Prerequisites tool exposed by this server

Installing the shadcn/ui mcp mcp server

The server is distributed via npm as @jpisnice/shadcn-ui-mcp-server, so most clients can run it without a manual build step. Add it to your MCP client's configuration and restart the client to pick it up — the copy-paste configs for Claude Desktop, Claude Code and Cursor are on this page.

Configuration

Before the server will start you need to supply 2 environment variables: GITHUB_PERSONAL_ACCESS_TOKEN, YOUR_TOKEN. Keep credentials in your client's env block or a secrets manager rather than committing them.

Requirements

  • Node.js >= 18.0.0 - npm or pnpm

Good to know

  • This server runs locally, so it has whatever access your machine and its credentials allow. Scope those deliberately.
  • Written in TypeScript.
  • Every MCP client asks for confirmation before a tool call by default — keep that on while you learn what the shadcn/ui mcp mcp server does with your data.
  • Listed here as part of the SyncDev MCP directory; each entry is reviewed before it goes live.

Available tools

ToolWhat it does
PrerequisitesThe Prerequisites tool exposed by this server.

How to install the Shadcn/Ui MCP MCP server

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-value",
        "YOUR_TOKEN": "your-value"
      }
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

  • Node.js >= 18.0.0 - npm or pnpm
VariableDescriptionRequired
GITHUB_PERSONAL_ACCESS_TOKENCredential the server authenticates with.Yes
YOUR_TOKENCredential the server authenticates with.Yes

Example prompts to try

  • Use Shadcn/Ui MCP to Prerequisites.

Frequently asked questions

It connects Shadcn/Ui MCP to MCP-compatible AI assistants such as Claude and Cursor, exposing 1 tool (Prerequisites) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Shadcn/Ui MCP directly.