Shadcn MCP for Zed
Learn how to install Shadcn MCP for Zed. Connect Zed's AI agent to shadcn/ui components using MCP servers for smarter coding assistance.
Issues setting up the MCP in Zed?
Join our Discord community for help from other developers.
How to install Shadcn MCP for Zed
Look, if you're here, you probably already know that Zed is the fast, modern editor that's been making waves. But here's the thing—when you ask Zed's AI agent 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 Zed's AI 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
Add this to your Zed settings.json file:
{
"context_servers": {
"shadcn": {
"source": "custom",
"command": "npx",
"args": ["-y", "mcp-remote", "https://www.shadcn.io/api/mcp"],
"env": {}
}
}
}Alternative: Use the Agent Panel
- Open the Agent Panel's settings view (or run
agent: open settings) - Click "Add Custom Server"
- Fill in the server details in the modal
This connects Zed to the entire shadcn/ui component registry. Takes about 10 seconds.
Check server status
Go to the Agent Panel's settings view and look for the indicator dot next to "shadcn".
Green dot = "Server is active" and you're good to go! Other colors mean something needs attention.
Explore available components
use shadcn to list all components availableWatch Zed's agent 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 componentZed's agent can now see actual component implementations, props, and usage patterns. Real information about how components actually work.
That's it. Four simple steps and Zed's AI agent now has access to the entire shadcn/ui component registry and the custom shadcn.io components and utilities.
What is Zed MCP support anyway?
Zed uses the Model Context Protocol to connect its AI agent with external context servers. Think of it as giving Zed's lightning-fast editor access to real-time tools and knowledge bases beyond what the AI learned during training.
The killer feature? The agent can automatically invoke MCP tools when processing your requests, and you can create custom profiles to control exactly which tools are available for specific workflows.
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 |