Skip to main content
Glama
Sign In
deenesjakoruzh
MCP Frontend Tools Server

MCP Frontend Tools Server

by ashios15
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

mcp-frontend-tools

用于前端工作的参考 Model Context Protocol (MCP) 服务器。只需一次安装，即可让任何编码代理（Claude Desktop、Cursor、VS Code、Zed、Continue）真正拥有查看和操作 UI 的“眼睛和双手”：

  • axe_audit — 针对原始 HTML（通过 jsdom）或实时 URL（通过 Playwright）运行真实的 axe-core 规则引擎。返回按 WCAG 影响程度分组的违规项，并附带修复链接。

  • page_screenshot — 获取任何 URL 或 CSS 选择器的无头 Chromium PNG 截图，支持视口 / DPR / 配色方案 / waitForSelector 控制。

  • bundle_budget_check — 遍历 dist/ 目录，计算 gzip（+ 可选 brotli）大小，强制执行全局或每个入口的 KB 预算。提供 CI 就绪的通过/失败 JSON 报告。

  • design_token_diff — 对两个 W3C DTCG / Style Dictionary 令牌文件进行结构差异对比。报告添加 / 删除 / 修改的令牌，并提供感知 $type 的注释。

  • storybook_story_run — 通过 iframe.html?id=… 在无头 Chromium 中加载单个 Storybook 故事，进行截图，并仅针对渲染出的组件运行 axe 审计。

  • scaffold_react_component — 生成带类型的 React 组件（函数式 / forwardRef / 多态 as），以及可选的 Vitest 测试和 Storybook 故事。

所有工具均返回模型可理解的结构化 JSON。无需为每个编辑器编写定制的包装器。

安装

npm i -g @ashios15/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

需要 Node ≥ 20。即使没有 Playwright，服务器也能启动；如果调用那三个依赖 Playwright 的工具，将返回明确的“安装 playwright”错误。

Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json（或 Windows 等效路径）：

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

设置 → MCP → 添加新服务器：

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (GitHub Copilot 代理模式)

添加到 .vscode/mcp.json：

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Related MCP server: Components Build MCP

工具参考

axe_audit

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

返回违规项和不完整规则，包含 impact（影响）、help（帮助）、helpUrl 以及每条规则最多 5 个失败节点示例。

page_screenshot

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

bundle_budget_check

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

返回每个文件的原始 / gzip / brotli 大小、应用的预算以及 status: "pass" | "fail"。

design_token_diff

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

理解 W3C DTCG 结构（$value, $type）。以 $ 开头的组元数据键将被忽略。颜色 / 尺寸的变化会带有 note 注释。

storybook_story_run

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

加载 ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}，等待 #storybook-root，并报告任何页面错误以及针对该故事的 axe 违规项。

scaffold_react_component

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

为什么选择这个而不是临时脚本？

  • 代理获得类型化契约。 每个工具都是模型可以内省的 Zod 验证 JSON Schema。

  • 无本地幻觉。 Axe 违规来自真实的 axe-core 引擎，而非正则表达式。包大小来自实际的 zlib 压缩，而非估算值。

  • 可组合。 bundle_budget_check 失败 → 要求代理将最大的文件提取到 page_screenshot → 将图像输入到视觉回归步骤中。一切都通过 MCP 完成。

  • 稳定的接口。 工具在版本更新后保持稳定；您的 .vscode/mcp.json 无需更改。

开发

git clone https://github.com/ashios15/mcp-frontend-tools.git
cd mcp-frontend-tools
npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

许可证

MIT © ashios15

mcp-frontend-tools

用于前端工作的参考 Model Context Protocol 服务器。只需一次安装，即可让任何编码代理（Claude Desktop、Cursor、VS Code、Zed、Continue）真正拥有查看和操作 UI 的“眼睛和双手”：

  • axe_audit — 针对原始 HTML（通过 jsdom）或实时 URL（通过 Playwright）运行真实的 axe-core 规则引擎。返回按 WCAG 影响程度分组的违规项，并附带修复链接。

  • page_screenshot — 获取任何 URL 或 CSS 选择器的无头 Chromium PNG 截图，支持视口 / DPR / 配色方案 / waitForSelector 控制。

  • bundle_budget_check — 遍历 dist/ 目录，计算 gzip（+ 可选 brotli）大小，强制执行全局或每个入口的 KB 预算。提供 CI 就绪的通过/失败 JSON 报告。

  • design_token_diff — 对两个 W3C DTCG / Style Dictionary 令牌文件进行结构差异对比。报告添加 / 删除 / 修改的令牌，并提供感知 $type 的注释。

  • storybook_story_run — 通过 iframe.html?id=… 在无头 Chromium 中加载单个 Storybook 故事，进行截图，并仅针对渲染出的组件运行 axe 审计。

  • scaffold_react_component — 生成带类型的 React 组件（函数式 / forwardRef / 多态 as），以及可选的 Vitest 测试和 Storybook 故事。

所有工具均返回模型可理解的结构化 JSON。无需为每个编辑器编写定制的包装器。

安装

npm i -g @ashishjoshi/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

需要 Node ≥ 20。即使没有 Playwright，服务器也能启动；如果调用那三个依赖 Playwright 的工具，将返回明确的“安装 playwright”错误。

Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json（或 Windows 等效路径）：

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

设置 → MCP → 添加新服务器：

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (GitHub Copilot 代理模式)

添加到 .vscode/mcp.json：

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

工具参考

axe_audit

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

返回违规项和不完整规则，包含 impact（影响）、help（帮助）、helpUrl 以及每条规则最多 5 个失败节点示例。

page_screenshot

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

bundle_budget_check

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

返回每个文件的原始 / gzip / brotli 大小、应用的预算以及 status: "pass" | "fail"。

design_token_diff

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

理解 W3C DTCG 结构（$value, $type）。以 $ 开头的组元数据键将被忽略。颜色 / 尺寸的变化会带有 note 注释。

storybook_story_run

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

加载 ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}，等待 #storybook-root，并报告任何页面错误以及针对该故事的 axe 违规项。

scaffold_react_component

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

为什么选择这个而不是临时脚本？

  • 代理获得类型化契约。 每个工具都是模型可以内省的 Zod 验证 JSON-Schema。

  • 无本地幻觉。 Axe 违规来自真实的 axe-core 引擎，而非正则表达式。包大小来自实际的 zlib 压缩，而非估算值。

  • 可组合。 bundle_budget_check 失败 → 要求代理将最大的文件提取到 page_screenshot → 将图像输入到视觉回归步骤中。一切都通过 MCP 完成。

  • 稳定的接口。 工具在版本更新后保持稳定；您的 .vscode/mcp.json 无需更改。

开发

npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

许可证

MIT © Ashish Joshi

MCP Frontend Tools Server

一个 Model Context Protocol (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 聊天中)

“构建一个带有头像、姓名和个人简介属性的 UserProfileCard 组件”

AI 调用 scaffold_react_component 并返回：

  • UserProfileCard.tsx — 带 forwardRef 的类型化组件

  • UserProfileCard.test.tsx — Testing Library 测试

  • UserProfileCard.stories.tsx — Storybook 故事

  • UserProfileCard.module.css — CSS 模块

  • index.ts — 导出入口

“分析我的 dist/ 文件夹以查找包大小问题”

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

Available Tools

6 tools
axe_auditaxe-core Accessibility AuditA

Run the axe-core accessibility ruleset against an HTML string (jsdom) or a live URL (Playwright). Returns violations grouped by impact with fix guidance and helpUrl links.

Inputs: url, html, tags, selector, +1 more.

bundle_budget_checkBundle Budget CheckA

Walk a build directory, measure raw + gzip (+ optional brotli) sizes per file, and flag files that exceed a global or per-entry KB budget. CI-friendly JSON output.

Inputs: buildDir (required), budgetKb, perEntryBudgetKb, ext, +1 more.

design_token_diffDesign Token DiffA

Diff two design-token JSON files (W3C DTCG / Style Dictionary style). Reports added, removed, and changed tokens with $type-aware classification. Useful for PR review of design-system changes.

Inputs: beforePath (required), afterPath (required), ignoreKeys.

page_screenshotPage Screenshot (Playwright)A

Launch headless Chromium, navigate to a URL, and save a PNG screenshot. Supports element selectors, full-page capture, dark mode, and custom viewports. Requires the optional playwright peer dependency.

Inputs: url (required), outPath (required), selector, fullPage, +6 more.

scaffold_react_componentScaffold React ComponentB

Write a TypeScript React component, optional test, and optional Storybook story into outDir. Supports functional, forwardRef, and polymorphic (as prop) variants.

Inputs: name (required), outDir (required), variant, withTests, +2 more.

storybook_story_runStorybook Story RunA

Load a single Storybook story in headless Chromium via iframe.html, optionally screenshot it, and run an axe-core audit against the rendered output. Requires playwright.

Inputs: storybookUrl (required), storyId (required), screenshotPath, runAxe, +3 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A4/5.0

    Scored across 6 tools

    Disambiguation5/5

    Each tool targets a distinct frontend concern: accessibility auditing, bundle sizing, design token diffs, page screenshots, component scaffolding, and Storybook testing. No two tools could be confused.

    Naming Consistency5/5

    All tool names follow a consistent 'object_action' or 'domain_action' pattern with lowercase underscores (e.g., axe_audit, design_token_diff). No mixing of conventions.

    Tool Count5/5

    Six tools is an appropriate size for a frontend utility toolkit. Each tool provides a distinct, useful function without being overwhelming or too sparse.

    Completeness4/5

    The set covers key frontend tasks: accessibility, performance, design tokens, component generation, and testing. A minor gap is the lack of a linting or formatting tool, but the surface is coherent for its scope.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    Appeared in Searches