OriginUI MCP Server

Busca e instala componentes de OriginUI, con detalles obtenidos dinámicamente desde el registro JSON de OriginUI.

Documentación

Servidor MCP de OriginUI

Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona acceso a los componentes de OriginUI, permitiendo que los agentes de Claude Code busquen, naveguen e instalen componentes de OriginUI sin problemas.

Características

Búsqueda de Componentes: Busca componentes por nombre, categoría o etiquetas
Detalles de Componentes: Obtén información completa sobre componentes específicos
Comandos de Instalación: Genera comandos pnpm dlx shadcn@latest add adecuados
Vistas Previas Visuales: Obtén capturas de pantalla y descripciones visuales de los componentes para evaluar su idoneidad
Vista Previa de Componentes: Consulta información de estilos y ejemplos de uso
Filtrado por Categoría: Explora componentes por categoría (botones, entradas, formularios, etc.)

🚀 Inicio Rápido

En resumen: Añade esto a tu archivo ~/.claude-code/mcp.json:

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

Reinicia Claude Code y pregunta: "¿Qué componentes de botón de OriginUI están disponibles?"

Instalación

Opción 1: Usar con npx (Recomendado - ¡No requiere clonar!)

¡No se necesita instalación! Puedes usar el servidor MCP directamente desde el repositorio de GitHub con npx.

Opción 2: Clonar y compilar localmente

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

Opción 3: Instalación Global (Próximamente)

npm install -g origin-ui-mcp

Integración con Claude Code

Paso 1: Añadir a la configuración MCP de Claude Code

Crea o edita tu archivo de configuración MCP de Claude Code en ~/.claude-code/mcp.json:

Opción A: Usando npx (Recomendado)

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

Opción B: Usando clon local

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

Nota: Con la Opción A (npx), ¡no se necesita instalación manual ni configuración de rutas!

Paso 2: Reiniciar Claude Code

Después de añadir la configuración MCP, reinicia Claude Code para cargar el servidor MCP de OriginUI.

Paso 3: Verificar la integración

Puedes verificar que la integración funciona preguntando a Claude Code:

"What OriginUI components are available for buttons?"

Claude Code ahora debería poder buscar, describir y proporcionar comandos de instalación para los componentes de OriginUI.

Ejemplos de uso

Una vez integrado con Claude Code, puedes hacer preguntas como:

"Encuéntrame componentes relacionados con pagos"
"¿Cómo instalo el componente de botón?"
"¿Qué opciones de estilo tiene el componente de tarjeta?"
"Muéstrame todos los componentes de navegación"
"Necesito un componente para formularios de entrada de usuario"

Claude Code utilizará el servidor MCP para proporcionar información precisa y comandos de instalación.

📸 Evaluación Visual de Componentes

Una de las características clave es la capacidad de obtener vistas previas visuales de los componentes para ayudar a los LLMs a hacer mejores recomendaciones:

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

El servidor MCP proporcionará:

Descripciones visuales de la apariencia de los componentes
Enlaces a ejemplos en vivo en OriginUI
Información específica del tema (modos claro/oscuro)
Detalles de capacidad de respuesta móvil
Recomendaciones de casos de uso basadas en el estilo visual

Herramientas Disponibles

`search_components`

Busca componentes de OriginUI por nombre, categoría o etiquetas.

Parámetros:

query (cadena, obligatorio): Consulta de búsqueda
category (cadena, opcional): Filtrar por categoría
limit (número, opcional): Resultados máximos (predeterminado: 10)

Ejemplo:

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

`get_component_details`

Obtén información detallada sobre un componente específico.

Parámetros:

componentId (cadena, obligatorio): ID del componente (p. ej., "comp-163")

Ejemplo:

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

`list_components`

Lista todos los componentes disponibles con información básica.

Parámetros:

category (cadena, opcional): Filtrar por categoría
limit (número, opcional): Resultados máximos (predeterminado: 50)

`get_install_command`

Obtén el comando de instalación para un componente específico.

Parámetros:

componentId (cadena, obligatorio): ID del componente

Devuelve:

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

`get_component_preview`

Obtén la vista previa del componente con información de estilos y ejemplos de uso.

Parámetros:

componentId (cadena, obligatorio): ID del componente

`get_component_screenshot`

Obtén la vista previa visual del componente para ayudar a evaluar si se adapta a tu proyecto.

Parámetros:

componentId (cadena, obligatorio): ID del componente
theme (cadena, opcional): Preferencia de tema ("light", "dark", "both")

Devuelve:

Descripciones visuales de la apariencia del componente
Capturas de pantalla cuando estén disponibles
Enlaces a ejemplos en vivo
Recomendaciones de casos de uso
Instrucciones de instalación

Categorías de Componentes

button - Componentes de botón
input - Entradas y controles de formulario
select - Componentes de selección y desplegables
navbar - Componentes de navegación
card - Componentes de tarjeta y contenedor
form - Componentes relacionados con formularios
layout - Componentes de diseño
navigation - Elementos de navegación
feedback - Componentes de retroalimentación y estado
data-display - Componentes de visualización de datos
overlay - Componentes de modal y superposición
typography - Componentes de texto y tipografía
media - Componentes multimedia

Ejemplo de uso con 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

Desarrollo

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Start the MCP server
npm start

Cómo funciona

Descubrimiento de Componentes: El servidor mantiene un registro de componentes de OriginUI con metadatos
Obtención Dinámica: Los detalles de los componentes se obtienen del registro JSON de OriginUI bajo demanda
Almacenamiento en caché: Los componentes se almacenan en caché durante 5 minutos para mejorar el rendimiento
Instalación: Genera comandos pnpm dlx shadcn@latest add adecuados con las URLs correctas

Contribuciones

Haz un fork del repositorio
Crea una rama de características
Realiza tus cambios
Añade pruebas si corresponde
Envía una solicitud de extracción

Licencia

Licencia MIT - consulta el archivo LICENSE para más detalles.