OriginUI MCP Server

A Model Context Protocol (MCP) server that provides access to OriginUI components, enabling Claude Code agents to search, browse, and install OriginUI components seamlessly.

Features

• Component Search: Search components by name, category, or tags
• Component Details: Get comprehensive information about specific components
• Installation Commands: Generate proper pnpm dlx shadcn@latest add commands
• Visual Previews: Get component screenshots and visual descriptions to assess fit
• Component Preview: View styling information and usage examples
• Category Filtering: Browse components by category (buttons, inputs, forms, etc.)

Claude Code Integration

Step 1: Add to Claude Code MCP Configuration

Create or edit your Claude Code MCP configuration file at ~/.claude-code/mcp.json:

Option A: Using npx (Recommended)

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

Option B: Using local clone

{
  "mcpServers": {
    "origin-ui": {
      "command": "node",
      "args": ["/absolute/path/to/origin-ui-mcp/dist/index.js"],
      "env": {}
    }
  }
}

Note: With Option A (npx), no manual installation or path configuration is needed!

Step 2: Restart Claude Code

After adding the MCP configuration, restart Claude Code to load the OriginUI MCP server.

Step 3: Verify Integration

You can verify the integration is working by asking Claude Code:

"What OriginUI components are available for buttons?"

Claude Code should now be able to search, describe, and provide installation commands for OriginUI components.

📸 Visual Component Assessment

One of the key features is the ability to get visual previews of components to help LLMs make better recommendations:

"Show me what the payment component looks like"
"Get a screenshot of the button component"
"I want to see the visual style of navigation components"

The MCP server will provide:

• Visual descriptions of component appearance
• Links to live examples on OriginUI
• Theme-specific information (light/dark modes)
• Mobile responsiveness details
• Use case recommendations based on visual style

Available Tools

search_components

Search for OriginUI components by name, category, or tags.

Parameters:

• query (string, required): Search query
• category (string, optional): Filter by category
• limit (number, optional): Maximum results (default: 10)

Example:

search_components({
  query: "payment",
  category: "form",
  limit: 5
})

get_component_details

Get detailed information about a specific component.

Parameters:

• componentId (string, required): Component ID (e.g., "comp-163")

Example:

get_component_details({
  componentId: "comp-163"
})

list_components

List all available components with basic information.

Parameters:

• category (string, optional): Filter by category
• limit (number, optional): Maximum results (default: 50)

get_install_command

Get the installation command for a specific component.

Parameters:

• componentId (string, required): Component ID

Returns:

pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json

get_component_preview

Get component preview with styling information and usage examples.

Parameters:

• componentId (string, required): Component ID

get_component_screenshot

Get component visual preview to help assess if it fits your project.

Parameters:

• componentId (string, required): Component ID
• theme (string, optional): Theme preference ("light", "dark", "both")

Returns:

• Visual descriptions of component appearance
• Screenshots when available
• Links to live examples
• Use case recommendations
• Installation instructions

Component Categories

• button - Button components
• input - Input and form controls
• select - Select and dropdown components
• navbar - Navigation components
• card - Card and container components
• form - Form-related components
• layout - Layout components
• navigation - Navigation elements
• feedback - Feedback and status components
• data-display - Data display components
• overlay - Modal and overlay components
• typography - Text and typography components
• media - Media components

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Start the MCP server
npm start

How It Works

1. Component Discovery: The server maintains a registry of OriginUI components with metadata
2. Dynamic Fetching: Component details are fetched from OriginUI's JSON registry on demand
3. Caching: Components are cached for 5 minutes to improve performance
4. Installation: Generates proper pnpm dlx shadcn@latest add commands with correct URLs

🚀 Quick Start

TL;DR: Add this to your ~/.claude-code/mcp.json file:

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

Restart Claude Code and ask: "What OriginUI button components are available?"

Installation

Option 1: Use with npx (Recommended - No Cloning Required!)

No installation needed! You can use the MCP server directly from the GitHub repository with npx.

Option 2: Clone and Build Locally

git clone https://github.com/kelvinchng/origin-ui-mcp.git
cd origin-ui-mcp
npm install
npm run build

Option 3: Global Installation (Coming Soon)

npm install -g origin-ui-mcp

Usage Examples

Once integrated with Claude Code, you can ask questions like:

• "Find me payment-related components"
• "How do I install the button component?"
• "What styling options does the card component have?"
• "Show me all navigation components"
• "I need a component for user input forms"

Claude Code will use the MCP server to provide accurate information and installation commands.

Example Usage with Claude Code

// Search for button components
const buttons = await search_components({
  query: "button",
  category: "button",
  limit: 10
});

// Get details for a specific component
const details = await get_component_details({
  componentId: "comp-163"
});

// Get installation command
const installCmd = await get_install_command({
  componentId: "comp-163"
});

// Get visual preview to assess fit
const screenshot = await get_component_screenshot({
  componentId: "comp-163",
  theme: "both"
});

// Install the component
// pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json

License

MIT License - see LICENSE file for details.