Сервер инструментов фронтенд-разработки MCP

Сервер Model Context Protocol (MCP), который предоставляет ИИ-ассистентам (Claude, Copilot, Cursor) доступ к инструментам фронтенд-разработки: созданию каркасов компонентов, анализу бандлов, проверке доступности и руководствам по адаптивному дизайну.

Доступные инструменты

Настройка

Claude Desktop

Добавьте в ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code с Copilot

Добавьте в .vscode/settings.json:

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

Пример использования (в ИИ-чате)

"Создай каркас компонента UserProfileCard с пропсами avatar, name и bio"

ИИ вызывает scaffold_react_component и получает:

• UserProfileCard.tsx — типизированный компонент с forwardRef

• UserProfileCard.test.tsx — тесты Testing Library

• UserProfileCard.stories.tsx — история Storybook

• UserProfileCard.module.css — CSS-модуль

• index.ts — barrel-экспорт

"Проанализируй мою папку dist/ на предмет проблем с размером бандла"

ИИ вызывает analyze_bundle и возвращает markdown-отчет со списком слишком больших файлов, рекомендациями и сводной таблицей.

Архитектура

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

Разработка

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

Лицензия

MIT