OriginUI

You can run a dedicated MCP server that lets Claude Code search, describe, preview, and install OriginUI components. It exposes component data through simple commands and provides visual previews to help you choose the right component for your project.

How to use

You connect to OriginUI MCP Server from your MCP client (such as Claude Code) and then ask questions like what OriginUI components are available for a given use case. You can search by name, category, or tags, get detailed component information, view styling and usage examples, see visual previews, and obtain the exact installation command for a chosen component.

Typical workflows include:

• Searching for a component by keyword or category
• Viewing details to compare options
• Getting the installation command tailored to the component
• Checking visual previews to ensure it fits your design system
• Filtering by category to narrow results (buttons, inputs, forms, etc.)

How to install

Prerequisites: make sure you have Node.js installed on your machine. If you plan to run the MCP server locally, you will also need npm or yarn to install dependencies.

Option A: Use with npx (recommended) — no local cloning required. Copy and adapt the configuration below into your Claude Code MCP setup to start querying OriginUI components.

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

Additional setup notes

If you prefer running the MCP server locally, you can clone the project and build it. After cloning, install dependencies and build the project, then run the server as shown.

Option B: Use a local clone — start the server from the built dist index. The command shown runs the local MCP server from the built distribution.

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

Notes on configuration and integration

The OriginUI MCP Server supports both an online (http) and a local (stdio) integration approach. If you have a remote MCP endpoint, you can configure it as an http server with its URL, otherwise you can run the MCP server locally via a stdio command.

Troubleshooting tips

If Claude Code cannot reach the OriginUI MCP Server, verify your CLI configuration and ensure the MCP command and arguments match the ones shown in the setup examples. Restart Claude Code after updating the MCP configuration to load the new server. If you see missing components or outdated data, confirm the server has access to the OriginUI registry and that data caching is functioning as expected.

Available tools

search_components

Search OriginUI components by name, category, or tags and return matching results with basic metadata.

get_component_details

Retrieve comprehensive information about a specific component by its componentId.

list_components

List all available components, optionally filtered by category with a limit on results.

get_install_command

Provide the exact installation command for a given component, enabling seamless integration into your project.

get_component_preview

Return styling information and usage examples to help you assess fit before integration.

get_component_screenshot

Fetch visual previews or screenshots of a component, including theme considerations.