Shadcn AI Composer

An MCP server for designing and refining Shadcn UI components using AI. This server leverages OpenRouter to access Google's Gemini model for enhancing React components.

Features

List available Shadcn UI components
Get details and code for specific components
Refine and enhance existing components with AI assistance
Generate custom components based on your requirements
Create compositions of multiple components (pages or blocks)

Installation

npm install -g shadcn-ai-composer

Or run directly with npx:

npx shadcn-ai-composer

Configuration

Create a .env file with the following variables:

OPENROUTER_API_KEY=your_openrouter_api_key
OPENROUTER_MODEL=google/gemini-2.5-flash-preview

The model is optional and defaults to google/gemini-2.5-flash-preview.

Claude Desktop Integration

To use this server with Claude Desktop, add the following to your claude_desktop_config.json:

macOS

Located at ~/Library/Application Support/Claude/claude_desktop_config.json

Windows

Located at %APPDATA%\Claude\claude_desktop_config.json

Add this configuration:

{
  "mcpServers": {
    "shadcn-ai-composer": {
      "command": "npx",
      "args": ["-y", "shadcn-ai-composer"],
      "env": {
        "OPENROUTER_API_KEY": "your_openrouter_api_key"
      }
    }
  }
}

Available Tools

list_shadcn_components

Lists all available Shadcn UI components, optionally filtered by category.

get_shadcn_component

Gets details and code for a specific Shadcn UI component.

refine_shadcn_component

Refines and enhances a Shadcn UI component based on custom requirements.

generate_custom_component

Generates a completely new component based on your description.

generate_composition

Creates a composition (page or block) using multiple Shadcn UI components.

Usage Examples

Here are some example prompts you can use with Claude:

"List all available Shadcn UI components"
"Show me the Button component from Shadcn"
"Refine the Button component to add a gradient background and pulse animation"
"Generate a custom pricing card component with hover effects"
"Create a login page using Form, Button, and Input components"

Development

To set up the project for development:

git clone https://github.com/yourusername/shadcn-ai-composer.git
cd shadcn-ai-composer
npm install
npm run build

License

MIT