MCP Server

Use AI assistants to browse, search, and install Evolphin UI components using natural language.

The Model Context Protocol (MCP) enables AI assistants like Claude, Cursor, and GitHub Copilot to interact with the Evolphin UI registry using natural language.

MCP works out of the box with our registry. No special setup required on our end!

What Can You Do?

With MCP configured, you can prompt your AI assistant:

"Show me the components in the evolphin registry"
"Create a landing page using items from @evolphin"
"Add a contact form with @evolphin/input, @evolphin/button, and @evolphin/card"
"Find me a dialog component from @evolphin"

Quick Start

1. Configure Your Registry

Add Evolphin UI to your project's components.json:

{
  "registries": {
    "@evolphin": "https://ui.evolphin.com/r/{name}.json"
  }
}

2. Initialize MCP Server

pnpm dlx shadcn@latest mcp init --client claude

This creates a .mcp.json file in your project root.

pnpm dlx shadcn@latest mcp init --client cursor

This creates a .cursor/mcp.json file.

Create .vscode/mcp.json:

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Open the file and click Start next to the shadcn server.

Create the appropriate config file for your AI client:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

3. Restart Your AI Client

Restart Claude Code, Cursor, or VS Code to load the MCP server.

4. Verify Connection

Run /mcp in Claude Code to see connected servers. The shadcn server should show Connected.

Check Cursor Settings → MCP. You should see a green dot next to the shadcn server.

Open .vscode/mcp.json and verify the server is running.

Example Prompts

Once configured, try these prompts with your AI assistant:

Browse & Search

"List all components in the @evolphin registry"
"What button variants does @evolphin have?"
"Find form-related components from @evolphin"

Install Components

"Add @evolphin/button and @evolphin/card to my project"
"Install the dialog component from the evolphin registry"

Build with Components

"Create a login form using @evolphin components"
"Build a pricing card with @evolphin/card and @evolphin/badge"
"Make a navigation header using @evolphin/navigation-menu"

How It Works

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   AI Assistant  │ ───► │   MCP Server    │ ───► │ Evolphin Registry│
│ (Claude/Cursor) │      │ (shadcn CLI)    │      │  (public/r/)    │
└─────────────────┘      └─────────────────┘      └─────────────────┘
         │                        │                        │
         │   Natural language     │   Fetch registry.json  │
         │   "Add button component"│   Parse components     │
         │                        │   Install to project   │
         ▼                        ▼                        ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     Your Project                                     │
│   components/ui/button.tsx ← Component installed!                   │
└─────────────────────────────────────────────────────────────────────┘