MCP 前端工具服务器

一个 模型上下文协议 (MCP) 服务器，为 AI 助手（Claude、Copilot、Cursor）提供前端开发工具访问权限——包括组件脚手架、包分析、可访问性检查和响应式设计指南。

MCP TypeScript Node.js

可用工具

工具	描述
`scaffold_react_component`	生成带有测试、故事和 CSS 模块的类型化 React 组件
`analyze_bundle`	扫描构建目录以查找过大的 JS/CSS 文件并报告结果
`check_accessibility`	对 HTML 进行静态 WCAG 2.2 检查并提供修复建议
`responsive_breakpoint_guide`	生成响应式 CSS、容器查询和 Tailwind 模式

设置

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 with Copilot

添加到 .vscode/settings.json：

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

使用示例（在 AI 对话中）

"Scaffold a UserProfileCard component with avatar, name, and bio props"

AI 调用 scaffold_react_component 并返回：

UserProfileCard.tsx — 带有 forwardRef 的类型化组件
UserProfileCard.test.tsx — Testing Library 测试
UserProfileCard.stories.tsx — Storybook 故事
UserProfileCard.module.css — CSS 模块
index.ts — Barrel 导出

"Analyze my dist/ folder for bundle size issues"

AI 调用 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

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

MCP Frontend Tools Server