Basecoat UI MCP

MCP stdio de terceros sin conexión para la composición de UI de Basecoat en Astro/HTML estático: plantillas seleccionadas, validación estática, sin red en tiempo de ejecución.

GitHub
1
Prueba este MCPPatrocinado

Documentación

Servidor MCP de Basecoat UI para Astro y HTML

Un servidor de Protocolo de Contexto de Modelo (MCP) que prioriza la fuente y funciona sin conexión, diseñado para componer interfaces de Basecoat UI en proyectos de Astro, HTML estático y Tailwind CSS 4.

Proporciona a las herramientas de codificación de IA un registro de Basecoat pequeño y determinista, en lugar de hacer que cada cliente recopile documentación. La misma configuración local de stdio puede ser utilizada por editores y agentes, y cada cliente inicia su propio proceso de servidor; el servidor no realiza solicitudes de red en tiempo de ejecución. La composición sigue un orden fijo: jerarquía de contenido, diseño, selección de componentes, espaciado, tipografía y, finalmente, revisión final.

Quién debería usarlo

  • Agentes y editores que necesitan plantillas de Basecoat acotadas y orientación sobre dependencias.
  • Proyectos de Astro o HTML estático construidos con Tailwind CSS 4 y basecoat-css.
  • Equipos que mantienen tokens de diseño y pautas de densidad específicos del proyecto en DESIGN.md.

Instalación y ejecución

Requiere Node.js 22.14.0 o superior.

Desde npm

npm install -g @intellmedia/basecoat-ui-mcp

Configura un cliente MCP:

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "basecoat-ui-mcp",
      "args": [
        "--project-root",
        "path/to/your/application"
      ]
    }
  }
}

O invoca directamente la entrada compilada:

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "node",
      "args": [
        "path/to/node_modules/@intellmedia/basecoat-ui-mcp/dist/server/stdio.js",
        "--project-root",
        "path/to/your/application"
      ]
    }
  }
}

Los tarballs publicados incluyen un dist/ precompilado (prepublishOnly ejecuta npm run build). Los clonados de Git omiten dist/; compila localmente antes de ejecutar desde un clon.

Desde el código fuente

git clone https://github.com/zygiu-zygis/basecoat-ui-mcp.git
cd basecoat-ui-mcp
npm ci
npm run build
npm start -- --project-root path/to/your/application

--project-root anula a BASECOAT_PROJECT_ROOT, que a su vez anula el directorio de lanzamiento. Selecciona el DESIGN.md de la aplicación anfitriona; no es el directorio de instalación de MCP. El servidor expone únicamente stdio.

Herramientas MCP de Basecoat

  • search_components devuelve hasta 8 resúmenes compactos de {id, name, intent} y nunca devuelve marcado.
  • get_component_details devuelve una plantilla de Astro o HTML con dependencias y orientación de composición. La respuesta JSON completa debe permanecer en o por debajo de 1,999 bytes UTF-8; las entradas de gran tamaño fallan de forma segura.
  • validate_composition verifica estáticamente hasta 65,536 bytes UTF-8 de código fuente HTML o Astro y devuelve como máximo 24 problemas.

Recursos de diseño de Basecoat

  • basecoat://design/rhythm proporciona reglas de jerarquía de contenido, espaciado, tipografía, familias de componentes y composición estructural.
  • basecoat://integration/astro proporciona configuración de Astro, Vite, Tailwind CSS 4, JavaScript selectivo de Basecoat y diálogos nativos.
  • basecoat://project/context lee el DESIGN.md del proyecto anfitrión configurado bajo demanda. La salida está limitada a 6,000 bytes UTF-8 y se trunca en un salto de línea o límite de oración cuando es posible. Se rechazan enlaces simbólicos y archivos no regulares.

Flujo recomendado:

  1. Lee los recursos de ritmo y contexto del proyecto.
  2. Decide la jerarquía de contenido y el diseño.
  3. Busca resúmenes y solicita detalles solo para los componentes seleccionados.
  4. Lee el recurso de integración de Astro al conectar activos de producción.
  5. Valida el código fuente final.

Ejemplo mínimo de HTML

La aplicación anfitriona proporciona su hoja de estilos compilada de Tailwind y Basecoat:

<link rel="stylesheet" href="/assets/basecoat.css">
<button type="button" class="btn" data-variant="default">Save changes</button>

Basecoat 1.x utiliza btn con data-variant y data-size. Los componentes interactivos enumeran los módulos de JavaScript granulares que el anfitrión debe cargar.

Registro y exclusiones

El registro de Basecoat 1.0.2 incluido contiene 39 plantillas seleccionadas:

accordion, alert, alert-dialog, avatar, badge, breadcrumb, button, button-group, card, chart, checkbox, combobox, command, dialog, drawer, dropdown-menu, empty, field, input, input-group, item, kbd, label, native-select, popover, progress, radio-group, scroll-area, select, sidebar, skeleton, slider, switch, table, tabs, textarea, theme-switcher, toast, tooltip

La instantánea de mantenimiento registra 41 componentes ascendentes descubiertos. pagination y spinner permanecen excluidos de la búsqueda y los detalles hasta que se seleccionen manualmente. Slider utiliza basecoat-css/range, no un módulo de slider.

El tiempo de ejecución no tiene cliente de red, dependencia de documentación remota, tiempo de ejecución de framework frontend, análisis de medios remoto ni activos de anfitrión incluidos. Las plantillas generadas no pueden usar basecoat-css/all; cada controlador se importa explícitamente. Los resultados de búsqueda no contienen marcado, los componentes recién descubiertos nunca se promocionan automáticamente y el JSON o HTML nunca se divide para ajustarse a un presupuesto de respuesta.

Casos de uso de Astro y HTML estático

En Astro, usa el recurso de integración para Vite, Tailwind CSS 4, orden de CSS, importaciones selectivas de controladores, conexión nativa de <dialog> y enlaces de ClientRouter. En HTML estático, copia los archivos de controladores compilados listados desde basecoat-css al directorio de activos de la aplicación anfitriona y conserva el orden de dependencias. Las plantillas de gráficos requieren Chart.js proporcionado por el anfitrión.

Los mantenedores pueden actualizar la instantánea ascendente fijada con npm run sync; este es el único comando que usa HTTPS. Valida esquema, exportaciones, avisos, presupuestos de respuesta, dirección de versión y reemplazo atómico antes de cambiar el registro.

Desarrollo y verificación

npm run typecheck
npm run test
npm run sync -- --check

El desarrollo fue asistido por IA. El comportamiento y la documentación se verifican contra el código fuente incluido, las pruebas de contrato y el registro fijado, en lugar de afirmaciones generadas.

Consulta ARCHITECTURE.md para conocer los límites del tiempo de ejecución, el empaquetado, los límites de bytes y la política de sincronización.

Autor, licencia y atribución ascendente

Creado y mantenido por Žygimantas Jasiulionis / Intellmedia bajo la Licencia MIT.

Basecoat UI es un proyecto independiente con licencia MIT de Ronan Berder. Las plantillas y metadatos adaptados conservan el aviso completo de Basecoat en THIRD_PARTY_NOTICES.md. Basecoat adapta patrones de diseño de shadcn/ui; el aviso conserva esa atribución. No se incluye aquí ningún CSS de Basecoat ni código fuente de shadcn.