MCP Server

The Model Context Protocol (MCP) server allows you to integrate RetroUI components directly into your AI-assisted development workflow. Add components through natural language commands in Claude, Cursor, VS Code, and other MCP-enabled editors.

For more information about the MCP server, please refer to the shadcn/ui MCP documentation.

Automatic Configuration

Claude Code

Run the following command to automatically configure the MCP server for Claude Code:

Cursor

Run the following command to automatically configure the MCP server for Cursor:

VS Code

Run the following command to automatically configure the MCP server for VS Code:

Manual Configuration

First, install the shadcn package as a dev dependency:

Then, configure the MCP server based on your editor:

Claude Code

Add the following to your .mcp.json file:

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

Cursor

Add the following to your .cursorrules file:

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

VS Code

Add the following to your .vscode/settings.json file:

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

Windsurf

Add the following to your .windsurfrules file:

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

Usage

Once configured, you can use natural language commands in your AI-powered editor to add RetroUI components:

• → "Add a retroui button component"
• → "Install the accordion component from RetroUI"
• → "Add the card component with neobrutalist styling"

The MCP server will automatically install the components with the correct configuration for RetroUI's design system.