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.

- Component Search: Search components by name, category, or tags
- Component Details: Get comprehensive information about specific components
- Installation Commands: Generate properpnpm dlx shadcn@latest addcommands
- 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.)

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

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

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

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.

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)

Step 1: Add to Claude Code MCP Configuration

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

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

{ "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!

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

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.

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.

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"

- 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

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

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

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

Get detailed information about a specific component.

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

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

List all available components with basic information.

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

Get the installation command for a specific component.

- componentId(string, required): Component ID

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

Get component preview with styling information and usage examples.

- componentId(string, required): Component ID

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

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

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

- 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

// 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

# Install dependencies npm install # Build the project npm run build # Run in development mode npm run dev # Start the MCP server npm start

- Component Discovery: The server maintains a registry of OriginUI components with metadata
- Dynamic Fetching: Component details are fetched from OriginUI's JSON registry on demand
- Caching: Components are cached for 5 minutes to improve performance
- Installation: Generates properpnpm dlx shadcn@latest addcommands with correct URLs
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request

MIT License - see LICENSE file for details.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Manage and utilize website content within the DevHub CMS platform

Access comprehensive documentation for Ant Design components, including examples, API references, and best practices.

A server for integrating with WordPress sites, enabling content management and interaction via the Model Context Protocol.

This server enables AI assistants and other MCP clients to interact with Directus instances programmatically.

A server providing resources, tools, and prompts for Drupal development.

Agency-grade MCP server for WordPress Elementor — multi-site fleet management, safe page/widget-level editing, template export/import, version tracking with snapshot/rollback.

Perform CRUD operations on Elementor page data for a target WordPress website.

An MCP server for WordPress and Elementor, enabling AI assistants to manage content and build pages.

Connect Cursor, Claude Code, or any MCP-compatible tool directly to your ElmapiCMS instance. Manage collections, content, and assets through natural language.

An MCP server for the Frappe Framework, enabling AI assistants to interact with Frappe's REST API for document management and schema operations.