shadcn-mcp-server
Click on "Deploy 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., "@shadcn-mcp-server add a shadcn button component"
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.
Shadcn MCP Server
A containerized Model Context Protocol (MCP) server that enables AI agents to dynamically install shadcn UI components into a mounted project workspace.
Features
Standardized MCP Interface: Exposes an
add_shadcn_componenttool to add shadcn components.Dockerized Execution: Run within a clean Docker environment, shielding host dependencies.
Seamless Volume Mounting: Configured to run
npx shadcn@latest adddirectly inside the mounted host codebase.Automated Registry Publishing: Automatically tags and pushes Docker images to GitHub Container Registry (GHCR) via GitHub Actions.
Related MCP server: Shadcn Space MCP
Getting Started
Usage in Docker MCP Toolkit
If your server is published to GitHub Container Registry, users can add it to their local IDE workspace with these steps:
Create a local profile:
docker mcp profile create --name my-projectAdd the MCP server:
docker mcp profile server add my-project --server docker://ghcr.io/your-github-username/shadcn-mcp:latestConfigure the workspace mount directory:
docker mcp profile config my-project --set shadcn-mcp.volumes=".:/workspace"Connect the profile to your IDE (VS Code):
docker mcp client connect vscode --profile my-project
Local Development
Install dependencies:
npm installBuild TypeScript:
npm run buildStart the server:
npm start
Available Tools
1 tooladd_shadcn_componentC
Adds a shadcn component to the project workspace.
Inputs: componentName (required).
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 1 tool
Only one tool exists, so there is no risk of confusion between tools. Disambiguation is perfect.
The single tool name follows a clear verb_noun pattern (add_shadcn_component) in snake_case, which is consistent and descriptive.
With only one tool, the server feels thin for a component management server. While the core operation is covered, additional tools for listing or removing components might be expected.
The server only supports adding a component, missing obvious operations like listing available components or removing them. This limits the agent's ability to manage shadcn components effectively.
Related MCP Connectors
Find, read and install shadcn components with Salesforce Lightning's look, for Radix and Base UI.
Search, read and install ReUI shadcn components, examples, blocks and icons from your coding agent.
Search shadcn registry items, read props and get exact install commands for React components.
Search, read and install agent-ready React components, screens and blocks for AI products.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to discover, install, and generate code examples for shadcn/ui components, providing installation commands and usage examples for 37+ React UI components.MIT
- AlicenseAqualityCmaintenanceIntegrate Shadcn Space MCP server into your IDE to generate ready-to-use shadcn/ui components without guesswork.5215 npm3MIT
- FlicenseAqualityDmaintenanceProvides AI assistants with direct access to shadcn/ui components and blocks, enabling real-time fetching of component source code, documentation, and implementation examples.422 npm4-
- AlicenseAqualityDmaintenanceEnables AI assistants to access and manage shadcn/ui v4 components, including source code, demos, blocks, and CLI integration.1267 npmMIT