Interfaz de usuario mágica de MCP

Un servidor MCP (Protocolo de contexto de modelo) para acceder y explorar los componentes de Magic UI desde el repositorio magicuidesign/magicui .

¿Qué es MCP Magic UI?

MCP Magic UI es un servidor que implementa el Protocolo de Contexto de Modelo (MCP) para proporcionar acceso a los componentes de Magic UI. Obtiene datos de los componentes del repositorio de GitHub de Magic UI, los categoriza y los publica mediante una API de MCP. Esto permite a los asistentes de IA y otros clientes de MCP descubrir y usar fácilmente los componentes de Magic UI en sus aplicaciones.

Related MCP server: Magic UI MCP Server

Características

• Descubrimiento de componentes : acceda a todos los componentes de Magic UI a través de las herramientas MCP

• Categorización de componentes : los componentes se categorizan automáticamente según sus nombres y dependencias.

• Sistema de almacenamiento en caché : almacenamiento en caché local de datos de componentes para reducir las llamadas a la API de GitHub y trabajar sin conexión

• Múltiples opciones de transporte : compatibilidad con métodos de transporte stdio y HTTP

• Mecanismo de respaldo : se proporcionan datos simulados cuando la API de GitHub no está disponible

Instalación

# Clone the repository
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui

# Install dependencies
npm install

# Build the project
npm run build

Configuración

Para evitar los límites de velocidad de la API de GitHub, se recomienda configurar un token de acceso personal de GitHub:

1. Crea un token en https://github.com/settings/tokens

2. Cree un archivo .env en la raíz del proyecto (o cópielo desde .env.example )

3. Añade tu token al archivo .env :

GITHUB_TOKEN=your_github_token_here

Uso

Iniciando el servidor

Puede iniciar el servidor utilizando el transporte stdio o HTTP:

# Using stdio transport (default)
npm start

# Using HTTP transport
TRANSPORT_TYPE=http npm start

Conectando al servidor

Puede conectarse al servidor mediante cualquier cliente MCP. Por ejemplo, con el Inspector MCP:

npx @modelcontextprotocol/inspector mcp-magic-ui

O, si utiliza el transporte HTTP:

npx @modelcontextprotocol/inspector http://localhost:3000

Herramientas disponibles

El servidor proporciona las siguientes herramientas MCP:

• get_all_components : obtiene una lista de todos los componentes de Magic UI disponibles con sus metadatos

• get_component_by_path - Obtener el código fuente de un componente específico por su ruta de archivo

Estructura del proyecto

• src/ - Código fuente

  • index.ts - Punto de entrada principal para el servidor

  • cli.ts - Interfaz de línea de comandos

  • server.ts : configuración del servidor MCP y definiciones de herramientas

  • services/ - Módulos de servicio

    • github.ts : interacción y almacenamiento en caché de la API de GitHub

    • component-parser.ts - Categorización y procesamiento de componentes

• cache/ - Caché local para datos de componentes

• dist/ - Código JavaScript compilado

Cómo funciona

1. El servidor obtiene datos de los componentes del repositorio de GitHub de Magic UI

2. Los datos de los componentes se almacenan en caché localmente para reducir las llamadas a la API y permitir el uso sin conexión

3. Los componentes se clasifican según sus nombres y dependencias.

4. El servidor expone herramientas MCP para acceder y buscar componentes

5. Los clientes pueden conectarse al servidor mediante stdio o transporte HTTP

Contribuyendo

¡Agradecemos sus contribuciones! Aquí hay algunas maneras de contribuir:

• Informar errores y sugerir funciones mediante la creación de problemas

• Mejorar la documentación

• Enviar solicitudes de extracción con correcciones de errores o nuevas funciones

Licencia

Instituto Tecnológico de Massachusetts (MIT)