origin-ui-mcp

kelvinchng/origin-ui-mcp

3.3

If you are the rightful owner of origin-ui-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The OriginUI MCP Server provides seamless access to OriginUI components for Claude Code agents, enabling efficient search, browsing, and installation of UI components.

The OriginUI MCP Server is a Model Context Protocol server designed to facilitate the integration and utilization of OriginUI components within Claude Code environments. It allows users to search for components by name, category, or tags, and provides detailed information about each component, including visual previews and installation commands. The server supports dynamic fetching of component details from OriginUI's JSON registry and caches them for improved performance. This integration enables developers to quickly find and implement UI components, enhancing productivity and streamlining the development process. The server can be used directly from the GitHub repository via npx, or it can be cloned and built locally. It is designed to work seamlessly with Claude Code, providing accurate information and installation commands for OriginUI components.

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.
  • Category Filtering: Browse components by category (buttons, inputs, forms, etc.).

Usages

usage with Claude Code npx

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

usage with Claude Code local clone

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

Tools

  1. search_components

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

  2. get_component_details

    Get detailed information about a specific component.

  3. list_components

    List all available components with basic information.

  4. get_install_command

    Get the installation command for a specific component.

  5. get_component_preview

    Get component preview with styling information and usage examples.

  6. get_component_screenshot

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