Servidor de herramientas de frontend MCP

Un servidor de Model Context Protocol (MCP) que proporciona a los asistentes de IA (Claude, Copilot, Cursor) acceso a herramientas de desarrollo frontend: creación de componentes, análisis de paquetes, comprobaciones de accesibilidad y guías de diseño responsivo.

Herramientas disponibles

Configuración

Claude Desktop

Añadir a ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["/path/to/mcp-frontend-tools/dist/index.js"]
    }
  }
}

VS Code con Copilot

Añadir a .vscode/settings.json:

{
  "github.copilot.chat.mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
    }
  }
}

Ejemplo de uso (en chat con IA)

"Crea un componente UserProfileCard con props para avatar, nombre y biografía"

La IA llama a scaffold_react_component y devuelve:

• UserProfileCard.tsx — Componente tipado con forwardRef

• UserProfileCard.test.tsx — Pruebas con Testing Library

• UserProfileCard.stories.tsx — Historia de Storybook

• UserProfileCard.module.css — Módulo CSS

• index.ts — Exportación de barril

"Analiza mi carpeta dist/ en busca de problemas de tamaño de paquete"

La IA llama a analyze_bundle y devuelve un informe en markdown con archivos de gran tamaño, recomendaciones y una tabla resumen.

Arquitectura

src/
├── index.ts                  # MCP server setup (stdio transport)
└── tools/
    ├── index.ts              # Tool definitions + router
    ├── scaffold-component.ts # React component generator
    ├── bundle-analyzer.ts    # Build output analyzer
    ├── a11y-checker.ts       # Static WCAG checks
    └── responsive-guide.ts   # Responsive CSS pattern generator

Desarrollo

npm install
npm run build
npm run inspector   # Test with MCP Inspector

Licencia

MIT