Shadcn MCP for VS Code
Learn how to install Shadcn MCP for VS Code. Connect GitHub Copilot agent mode to shadcn/ui components using MCP servers for smarter coding assistance.
Issues setting up the MCP in VS Code?
Join our Discord community for help from other developers.
How to install Shadcn MCP for VS Code
Look, if you're here, you probably already know that VS Code with GitHub Copilot is pretty solid for web development. But here's the thing—when you ask Copilot about shadcn/ui components, it's been flying blind, working off whatever it remembered from training instead of actual, current component data.
That's where MCP (Model Context Protocol) comes in. Think of it as giving VS Code's GitHub Copilot agent a direct line to the shadcn/ui component registry and the entire shadcn.io community ecosystem. No more "this might be outdated" disclaimers.
Your first 5 minutes with Shadcn MCP
Install the MCP server
Create a .vscode/mcp.json file in your workspace (for project-specific setup) or use the global configuration:
{
"servers": {
"shadcn": {
"url": "https://www.shadcn.io/api/mcp"
}
}
}Alternative ways to add the server:
- Run
MCP: Add Serverfrom Command Palette - Use
MCP: Open User Configurationfor global setup - Visit the curated MCP servers list and click "Install"
This connects VS Code to the entire shadcn/ui component registry. Takes about 10 seconds.
Enable agent mode
Open the Chat view (Ctrl+Cmd+I on Mac, Ctrl+Alt+I on Windows/Linux) and select Agent mode from the dropdown.
Click the Tools button to view available shadcn tools and enable the ones you want to use.
Explore available components
use shadcn to list all components availableWatch Copilot pull up-to-date component information directly from the registry. No guessing, no outdated docs—just current component data.
Get component details
use shadcn and show me details about the color picker componentCopilot can now see actual component implementations, props, and usage patterns. Real information about how components actually work.
That's it. Four simple steps and VS Code's GitHub Copilot now has access to the entire shadcn/ui component registry and the custom shadcn.io components and utilities.
What is VS Code MCP support anyway?
If you're new to VS Code's MCP integration, it extends GitHub Copilot's agent mode by allowing you to connect any MCP-compatible server to your coding workflow. Think of it as supercharging Copilot with real-time access to external tools and knowledge bases.
The killer feature? Copilot can now invoke tools from MCP servers on your behalf, with your permission, making it ecosystem-aware instead of just context-aware.
What this actually gets you
| Prompt | Without MCP | With MCP |
|---|---|---|
| "How do I customize the color picker component?" | Generic HTML5 color input or random React examples | Exact color picker from shadcn.io registry with proper form integration |
| "Show me button variants" | Maybe mentions primary/secondary if you're lucky | All 6 actual variants with real examples |
| "I need a data table with sorting" | Basic table implementations from training data | The actual Data Table component with working sort/filter patterns |
Shadcn MCP for Windsurf
Learn how to install Shadcn MCP for Windsurf. Connect your AI-powered editor to shadcn/ui components using MCP servers for smarter coding assistance.
Shadcn MCP for JetBrains
Learn how to install Shadcn MCP for JetBrains IDEs (WebStorm, IntelliJ IDEA). Connect AI Assistant to shadcn/ui components using MCP servers for smarter coding assistance.