shadcn MCP Server: shadcn/ui Components and Blocks for AI Agents

What is the shadcn MCP Server?

This server connects an AI coding agent to the shadcn/ui component library. Instead of recalling components from training data, the agent asks the server, which fetches current implementations from the official shadcn/ui repository and returns source code, dependencies and usage examples.

It runs on your machine. Cursor starts it with an npx command, requests travel as JSON-RPC, and each answer comes from a GitHub API call. A caching layer reduces repeat calls, and failures come back as readable messages.

What changes in your agent's output

• Button, dashboard and other component code matches the current repository instead of an older snapshot from training data.
• The README describes answers that include variants such as destructive, outline and ghost, size options, imports and accessibility features.
• A whole block like dashboard-01 can be pulled as one implementation, with required dependencies and a component breakdown.
• Asking which blocks exist returns a real list, so the agent stops guessing at names.

Who the shadcn MCP Server is for

Best for

• Developers in Cursor working on a project built on shadcn/ui who want current component source on demand.
• Readers weighing options: the shadcn MCP page and the shadcn/ui server approach the same library from other angles.
• Builders who also want a rules layer, such as a shadcn skill, that tells the agent how to use what it fetches.

Not for

• Anyone who needs search across third party registries. The four tools only cover shadcn/ui components and blocks.
• Offline work. Every fetch goes through the GitHub API, and without a token the limit is 60 requests per hour.
• Design to code from Figma. This is a component source, not a design reader.

Rate limits and the GitHub token

A GitHub personal access token is optional but recommended. The README says no special permissions are needed because the repository is public, and a token raises the limit from 60 to 5,000 requests per hour.

Use it with UiChemy

This server feeds shadcn/ui code to a coded front end. For a WordPress site, UiChemy is the route: Figma to WordPress converts a design, and Composer edits the result inside Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect shadcn MCP Server: shadcn/ui Components and Blocks for AI Agents to your AI client

npx @magnusrodseth/shadcn-mcp-server

1. Run the server

   Start it with npx, which needs no installation, or install it once with npm install -g @magnusrodseth/shadcn-mcp-server.

2. Add it to Cursor

   Put the mcpServers entry above into your Cursor configuration, then restart the MCP tool so the server appears in settings.

3. Add a GitHub token

   Optionally add a GITHUB_TOKEN value to the env block of the entry. It lifts the rate limit and makes heavy use more reliable.

4. Verify it

   Ask for the list of all available shadcn components or for the button component source. A working setup returns data fetched from the shadcn/ui repository.

Client configuration

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["@magnusrodseth/shadcn-mcp-server"]
    }
  }
}

Endpoints and ports

What you can do with it

• Current sourceComponents are fetched from the shadcn/ui repository, with caching to reduce API calls, so the agent is not relying on remembered code.
• Component detailsEach component comes back with source code, metadata, dependencies and usage examples.
• Whole blocksBlock tools return a complete layout implementation, including its dependencies and structure.
• Run with npxNo build step is needed. The npx entry always uses the latest published version.
• Optional tokenA GitHub token raises the request limit from 60 to 5,000 per hour.
• Cached requestsSmart caching reduces repeat API calls, and errors degrade gracefully with informative messages.
• Debug modeSetting DEBUG to true turns on detailed logging when a setup misbehaves.

Tools it exposes

Frequently asked questions