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: SupaUI 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

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 :

Uso

Iniciando el servidor

Puede iniciar el servidor utilizando el transporte stdio o HTTP:

Conectando al servidor

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

O, si utiliza el transporte HTTP:

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)