How to install Shadcn MCP for Windsurf

Look, if you're here, you probably already know that Windsurf is Codeium's answer to AI-first coding. But here's the thing—when you ask it 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 Windsurf 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

{
  "mcpServers": {
    "shadcn": {
      "serverUrl": "https://www.shadcn.io/api/mcp"
    }
  }
}

use shadcn to give me a list of all components available

use shadcn and give me information about color picker component

use shadcn and implement the color picker component in my app

That's it. Four simple steps and Windsurf now has access to the entire shadcn/ui component registry and the custom shadcn.io components and utilities.

What is Windsurf anyway?

If you're new to Windsurf, it's Codeium's AI-first editor built for intelligent coding. Think of it as an editor designed from the ground up for AI collaboration. The killer feature? It combines powerful AI assistance with a clean, responsive interface optimized for AI workflows.

What this actually gets you