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:

1. "List all available Shadcn UI components"
2. "Show me the Button component from Shadcn"
3. "Refine the Button component to add a gradient background and pulse animation"
4. "Generate a custom pricing card component with hover effects"
5. "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