MCP Frontend Tools Server

Ein Model Context Protocol (MCP)-Server, der KI-Assistenten (Claude, Copilot, Cursor) Zugriff auf Frontend-Entwicklungstools bietet – Komponenten-Scaffolding, Bundle-Analyse, Barrierefreiheitsprüfungen und Anleitungen für responsives Design.

Verfügbare Tools

Einrichtung

Claude Desktop

Hinzufügen zu ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code mit Copilot

Hinzufügen zu .vscode/settings.json:

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

Beispielanwendung (im KI-Chat)

"Erstelle eine UserProfileCard-Komponente mit Avatar-, Name- und Bio-Props"

Die KI ruft scaffold_react_component auf und erhält:

• UserProfileCard.tsx — Typisierte Komponente mit forwardRef

• UserProfileCard.test.tsx — Testing Library-Tests

• UserProfileCard.stories.tsx — Storybook-Story

• UserProfileCard.module.css — CSS-Modul

• index.ts — Barrel-Export

"Analysiere meinen dist/-Ordner auf Probleme mit der Bundle-Größe"

Die KI ruft analyze_bundle auf und gibt einen Markdown-Bericht mit zu großen Dateien, Empfehlungen und einer Zusammenfassungstabelle zurück.

Architektur

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

Entwicklung

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

Lizenz

MIT