shadcn MCP Server + Windsurf Editor: Complete MCP Integration

shadcn MCP Server is a MCP server that Use the shadcn MCP server to browse, search, and install components from registries with natural language..

When integrated with Windsurf Editor, you can:

• Access shadcn MCP Server functionality through Windsurf Editor

This guide provides step-by-step instructions to set up shadcn MCP Server in Windsurf Editor, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• shadcn MCP Server will be fully integrated and operational
• You can use shadcn MCP Server tools directly in Windsurf Editor
• All shadcn MCP Server capabilities will be available for your workflows

Prerequisites

Before starting, ensure you have:

• Windsurf Editor installed and configured
• Compatible operating system (Desktop App)

Installation

Step 1: Install shadcn MCP Server

Configuration

Step 2: Configure Windsurf Editor

1. Locate your configuration file:

   • Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
   • macOS: ~/.codeium/windsurf/mcp_config.json
   • Linux: ~/.codeium/windsurf/mcp_config.json

2. Add server configuration:

{
  "mcpServers": {
    "shadcn-mcp-server": {
      "command": "shadcn mcp server",
      "args": []
    }
  }
}

Note: If shadcn MCP Server requires environment variables, add them to the server configuration:
"env": {
  
}

3. Restart Windsurf Editor

Completely quit and restart Windsurf Editor to load the new configuration.

Examples

Once configured, you can use shadcn MCP Server in Windsurf Editor:

Testing Your Setup

1. Launch Windsurf Editor
2. Verify shadcn MCP Server is available in the tools list
3. Test basic shadcn MCP Server functionality

Troubleshooting

Common Issues

Tools Not Appearing

Symptoms: Cascade does not see new tools, Hammer icon missing

Cause: Configuration syntax error or server failed to start.

Solution:

• Check the JSON configuration for syntax errors.
• Verify the command (e.g., npx, python) is in your system PATH.
• Check Windsurf logs for MCP connection errors.

Environment Variables

Symptoms: Authentication failed, Permission denied

Cause: Missing API keys in configuration.

Solution:

• Ensure env block is correctly defined inside the server config.
• Restart Windsurf after changing environment variables.

shadcn MCP Server not appearing in Windsurf Editor

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check shadcn MCP Server installation
• Restart Windsurf Editor
• Check logs for error messages

Next Steps

Now that shadcn MCP Server is integrated with Windsurf Editor:

• Explore all shadcn MCP Server capabilities through Windsurf Editor
• Check out other MCP servers that work with Windsurf Editor
• Join the MCP community for tips and support
• Consider contributing to shadcn MCP Server development

Need Help?

• Search for shadcn MCP Server documentation
• Check the Windsurf Editor MCP guide
• Join the MCP community discussions