mcp-untitledui

MCP server for UntitledUI React components. This allows Claude Code (and other MCP clients) to list, search, get source code, and install UntitledUI components and blocks.

Installation

# Add to Claude Code
claude mcp add untitledui -- npx mcp-untitledui

Or add to your .mcp.json:

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["mcp-untitledui"]
    }
  }
}

With GitHub Token (Recommended)

For higher rate limits when fetching source code (5000 vs 60 requests/hour):

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["mcp-untitledui", "--github-api-key", "ghp_your_token_here"]
    }
  }
}

Available Tools

Components

| Tool | Description | |------|-------------| | list_components | List all available components. Filter by type or PRO status. | | search_components | Search components by keyword. | | get_component_info | Get detailed information about a component. | | get_component_source | Get the source code for a component. | | get_component_demo | Get usage examples for a component. | | add_component | Generate command to install component(s). |

Blocks (Page Templates)

| Tool | Description | |------|-------------| | list_blocks | List available blocks. Filter by category or PRO status. | | get_block | Get details and source for a specific block. |

Authentication

| Tool | Description | |------|-------------| | login | Get instructions for PRO authentication. | | check_auth | Check if authenticated for PRO components. |

Component Types

• base - Foundation UI elements (buttons, inputs, badges, etc.)
• application - Complex interface patterns (modals, tables, dashboards, etc.)
• marketing - Website sections (headers, pricing, testimonials, etc.)
• foundations - Design tokens (colors, typography, spacing)
• icons - Icon library

Block Categories

• authentication - Login, signup, verification pages
• dashboard - Admin dashboards and analytics (PRO)
• settings - Settings and profile pages (PRO)
• marketing - Landing pages, pricing, about pages
• ecommerce - Product, cart, checkout pages (PRO)
• email - Email templates

Examples

List all base components

list_components(type: "base")

Search for table-related components

search_components(query: "table")

Get component source code

get_component_source(name: "buttons")

Get usage example

get_component_demo(name: "modals")

List authentication blocks

list_blocks(category: "authentication")

Get a specific block

get_block(name: "login-01")

Install buttons and inputs

add_component(components: ["buttons", "inputs"])

PRO Components

Some components and blocks require a PRO subscription. Use check_auth to verify your authentication status, and login to get authentication instructions.

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

Testing

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node build/index.js

# With GitHub token for source fetching
npx @modelcontextprotocol/inspector node build/index.js --github-api-key ghp_your_token

License

MIT