Which integrations are available for this server?

Generates CSS modules for React components and provides responsive CSS patterns, including container queries and Tailwind patterns for styling. Generates typed React components with tests, stories, and CSS modules, providing scaffolding capabilities for React component development. Creates Storybook stories for generated React components, enabling component documentation and visual testing. Generates Testing Library test files for React components, providing testing capabilities for component behavior and interactions. Creates typed React components with TypeScript support, ensuring type safety in generated frontend code.

How do I use MCP Frontend Tools Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@MCP Frontend Tools Server scaffold a login form component with email and password fields" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

de en es ja ko ru zh

MCP Frontend Tools Server

by ashios15

Overview Schema Related Servers Score Discussions

TypeScript

Local

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.

MCP TypeScript Node.js

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 forwardRef
UserProfileCard.test.tsx — Testing Library tests
UserProfileCard.stories.tsx — Storybook story
UserProfileCard.module.css — CSS module
index.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

This server cannot be installed

security - not tested

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.

Latest Blog Posts

Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security
Open Source Has a Bot Problem
By punkpeye on March 19, 2026.
open source

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ashios15/mcp-frontend-tools'

If you have feedback or need assistance with the MCP directory API, please join our Discord server