MCP フロントエンドツールサーバー

AIアシスタント（Claude、Copilot、Cursor）に、コンポーネントの雛形作成、バンドル分析、アクセシビリティチェック、レスポンシブデザインのガイドといったフロントエンド開発ツールへのアクセスを提供する Model Context Protocol (MCP) サーバーです。

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 と 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 を呼び出し、肥大化したファイル、推奨事項、サマリーテーブルを含むマークダウンレポートを返します。

アーキテクチャ

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