MCP Frontend Tools Server
A Model Context Protocol (MCP) server that gives AI assistants (Claude, Copilot, Cursor) access to frontend development tools — component scaffolding, bundle analysis, accessibility checks, and responsive design guides.
Available Tools
| Tool | Description |
|---|---|
scaffold_react_component | Generate a typed React component with tests, stories, and CSS module |
analyze_bundle | Scan a build directory for oversized JS/CSS, report findings |
check_accessibility | Static WCAG 2.2 checks on HTML with fix suggestions |
responsive_breakpoint_guide | Generate responsive CSS, container query, and Tailwind patterns |
Setup
Claude Desktop
Add to ~/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
Add to .vscode/settings.json:
{
"github.copilot.chat.mcpServers": {
"frontend-tools": {
"command": "node",
"args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
}
}
}
Example Usage (in AI Chat)
"Scaffold a UserProfileCard component with avatar, name, and bio props"
The AI calls scaffold_react_component and gets back:
UserProfileCard.tsx— Typed component with forwardRefUserProfileCard.test.tsx— Testing Library testsUserProfileCard.stories.tsx— Storybook storyUserProfileCard.module.css— CSS moduleindex.ts— Barrel export
"Analyze my dist/ folder for bundle size issues"
The AI calls analyze_bundle and returns a markdown report with oversized files, recommendations, and a summary table.
Architecture
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
Development
npm install
npm run build
npm run inspector # Test with MCP Inspector
License
MIT