mcp-react-toolkit

mcp-toolkit

React + TypeScript 開発を自動化する MCP サーバーです。Claude Desktop、Cline、Cursor と、通常の CLI スクリプトとしても使用できます。プロトコルは 1 つ、重複はありません。

9 カテゴリにわたる 59 個のツールを提供します。コンポーネントのスキャフォールディング、コード品質チェック、CRUD 機能一式の生成、CRA から Vite への移行など、さまざまな用途に対応しています。各ツールは個別の MCP サーバーとして提供され、それぞれ独立してビルドおよびテストされています。

---

これが必要な理由 — トークンの計算

エージェント型ワークフローの構築を始めたとき、誰も教えてくれないことがあります。コストがかかるのはモデルではなく、ループそのものです。合成ツールを使わずに動作するエージェントは、何をするにも遠回りです。ファイルを読み、考え、ファイルを書き、作業を確認するために読み直し、これを繰り返します。そして、そのやり取りのたびに、それまでの会話全体が入力トークンとして再送されます。実際の複数ファイルのタスクで20ステップも進むころには、再送されるコンテキストだけで1回の呼び出しあたり50Kトークンを超えることもあります。これはすぐに膨らみますし、どのモデルを使っているかが問題というわけでもありません。

ただ鵜呑みにしたわけではありません。実際の数値を示す情報源がいくつかあります。LeanOpsの測定結果によると、エージェントのループで使われるトークン数は、5ステップで単発の直接呼び出しの約3.2倍、50ステップで約30倍、一般的なビルドとデバッグのセッションが深く進むと100倍を超えます。再送されるコンテキストがコストの約62％を占めるためです。Vantageの調査でも同様の結果が示されています。実際のエージェント型セッションでは入力と出力の比率が約25:1（直接呼び出しでは約1:1）で、50ターンのセッションでは入力トークン数が100万に達することも珍しくありません。また、同じチームで同等の作業を行う場合、エージェントを使わない利用では、インタラクションあたりのコストが約200分の1になります。エージェント型トークン経済学に関する最近のarXiv論文では、エージェント型タスクのトークン数は単発のタスクの約1000倍に達し、まったく同じタスクでも実行ごとに最大30倍のばらつきがあるとされています。つまり、高コストなだけでなく、予測も困難です。

このツールキットの合成ツールは、まさにこの問題を解消するために作られています。workflow-runnerのschema_to_featureとcra-to-viteは、エージェントの既存のループにツール呼び出しを1回追加するのではありません。通常なら読み取り、書き込み、検証を7〜8回に分けて行う処理を、インプロセスの単一呼び出しに置き換え、ジェネレーターや移行パイプライン全体を実行して完成した結果を返します。これは、上記の調査が10〜100倍の節約につながると示す「50ターンのループを1回の呼び出しにまとめる」という形です。変更しないループにツールを1つ追加するだけ（得られるのは20〜40％程度）とはまったく異なります。

理論を鵜呑みにしないよう、実際に計測したベンチマークも実行しました。ax-benchmarkで6つのタスクを対象に、claude -pをヘッドレスで実行し、3つの条件（エージェント単独、ループにMCPツール呼び出しを1回追加したエージェント、エージェントを介さずツールを直接呼び出す場合）を比較しました。以下は、あえて保守的な基準です。ここでは、上記で説明したパイプライン全体の短縮ではなく、変更しないループにツール呼び出しを1回追加するケースのみをテストしています。

	エージェント単独	エージェント＋MCPツール1回	ツールを直接呼び出し
分析タスク（レビュー、a11y、レガシーコード）	ベースライン	コスト約41％削減	約100％無料、約15倍高速（対象範囲内の場合）
全6タスクの混合結果	ベースライン	コスト約19％削減	—
新規コード（コンポーネント、テスト）	ベースライン	コストはほぼ同等	新規作業には該当しない

あらかじめ率直に伝えておきたい点が2つあります。公平な指標は実行時間ではなくコストです。エージェント単独の条件では、シェルへのアクセスなしでヘッドレス実行し、自由度の高いタスクで必要以上に探索したため、実際のコストには影響しないまま実行時間が膨らみました。また、小規模で新規性の高い単一ファイルの作業では、ツールの構造化出力にかかるオーバーヘッドが節約分を相殺することがあります。本当に効果が出るのは、反復的で機械的な複数ファイルの作業です。こうした作業は、上記のマルチターンループによるコストが最も大きくなる領域でもあります。

---

インストール

npmでmcp-react-toolkitとして公開されています。クローンやビルドは不要です。

npx mcp-react-toolkit --list            # list all 59 tools
npx mcp-react-toolkit legacy-analyzer   # run one as an MCP server (stdio)

Claude Desktop／Cursor／Clineに追加します。

// claude_desktop_config.json
{
  "mcpServers": {
    "legacy-analyzer": { "command": "npx", "args": ["-y", "mcp-react-toolkit", "legacy-analyzer"] }
  }
}

npx mcp-react-toolkit --listに表示される任意のツール名に置き換えてください。クライアントを再起動すると、ツールが表示されます。

---

インタラクティブダッシュボード

ほとんどの MCP ツールは生の JSON を返します。これらのツールは JSON に加えて、インタラクティブな HTML ダッシュボードも返します。ヘルススコア、並べ替え可能な問題のトリアージ、ライト／ダーク切り替え、ツールキット内の別のツールを呼び出すワンクリック修正アクションを利用できます。サーバーも外部リクエストも不要な、自己完結型のアーティファクトです。

実行場所	得られるもの
Claude Desktop（MCP Apps）	会話内にインラインで表示されます（サンドボックス化された iframe）
Claude Code · Cursor · CLI	JSON に加えて、同じダッシュボードへのクリック可能な file:// リンク
任意のブラウザー	同じ HTML を単独で表示

分析ツール（legacy-analyzer、component-reviewer、dep-auditor など）には監査ビューが表示されます。評価、カテゴリカード、フィルター可能な問題テーブルを確認できます。ジェネレーター（component-factory、code-modernizer など）には結果ビューが表示されます。作成／変更されたファイル、差分、フォローアップを確認できます。内部の @mcp-showcase/ui-kit パッケージを使用しており、依存関係はなく、レポートあたり約 30 KB です。

---

ツール

コンポーネント開発

ツール	機能
component-factory	41 種類の shadcn/ui テンプレートから React コンポーネントをスキャフォールドします。テストと Storybook も含まれます
component-reviewer	TypeScript エラー、a11y の問題、テストカバレッジを監査し、A+ から F で評価します
component-fixer	壊れたインポート、不足している依存関係、インラインスタイルのリファクタリングを自動修正します
component-improver	バリアント、網羅的なストーリー、エッジケースのテストを追加してコンポーネントを拡張します
storybook-generator	Storybook のストーリーを自動生成します。Default、バリアント、サイズ、コールバック、play 関数に対応します

コード品質とモダナイゼーション

ツール	機能
typescript-enforcer	any 型、安全でないキャスト、不足している修飾子をスキャンします。7 つのルールで 0～10 のスコアを付けます
accessibility-checker	WCAG 2.1 監査を行います。代替テキスト、ラベルの関連付け、ARIA ロール、キーボードナビゲーションを確認します
a11y-autofixer	安全な a11y 修正（img の alt、空の rel、htmlFor、tabIndex）を適用します
quality-pipeline	5 段階の監査（テスト · 型 · パフォーマンス · a11y · デザイントークン）を行い、A～F で評価します
review-gate	生成／変更されたコードに対する静的な A～F 品質ゲートです
enforce-design-tokens	ハードコードされた色／間隔／角丸／影を検出し、トークンを提案して、A～F で評価します
render-analyzer	不要な再レンダー、不足している memo、インラインオブジェクト／関数を検出します
performance-audit	メモリリーク、サイズの大きいインポート、最適化されていない画像、深いネストを検出します
bundle-budget-guard	パターンごとの予算に基づいて gzip 圧縮後のアセットサイズをチェックし、リグレッションがあれば CI を失敗させます
code-modernizer	AST ベースで JS/JSX を TypeScript に変換し、PropTypes をインターフェースに変換します
react-compiler-migrator	React 19 Compiler 向けに、冗長な useMemo/useCallback/memo を検出します
codemod-runner	汎用の正規表現 codemod エンジンと名前付き組み込み機能を提供します。デフォルトではドライランです
refactor-executor	リファクタリング計画を安全に実行します。移動／名前変更／分割、インポートの更新、ロールバックに対応します
redux-state-analyzer	Redux のアンチパターン（セレクター、ミューテーション、RTK Query への移行ヒント）を監査します
api-contract-differ	2 つの API スナップショットを比較し、破壊的変更と追加変更を分類します。破壊的変更を防ぐ CI ゲートとして使えます
i18n-extractor	JSX 内のハードコードされた文字列をスキャンし、i18n キーとメッセージカタログを生成します
generate-tests	TS/React ソースファイルを分析し、Vitest のテストスイートを生成します
test-gap-analyzer	未実装の関数、カバーされていない分岐、不足しているエッジケースを検出します
test-data-factory	FieldSchema から、テスト／ストーリー用の型付きフィクスチャーファクトリーを生成します
fix-failing-tests	テストスイートを実行し、失敗を根本原因別に分類して、対象を絞った修正を生成します
legacy-analyzer	あらゆる React/Next.js/Remix アプリを対象とした 22 ツールによるヘルス監査です。0～100 でスコアを付け、移行のヒントを提示します

モノレポとインフラストラクチャ

ツール	機能
dep-auditor	未使用の依存関係、重複するバージョン、循環インポート、バンドルへの影響を分析します
monorepo-manager	ワークスペースの一覧表示、依存関係グラフ、ヘルスチェック、共有依存関係の検索
lighthouse-runner	静的 HTML の監査 — メタタグ、アクセシビリティ、OG／Twitter カード、canonical、JSON-LD
json-viewer	インタラクティブな HTML JSON ビューアー — 折りたたみ、検索、ダーク／ライト表示

CRUD ファクトリー

1 つの JSON API サンプル（または OpenAPI スキーマ）から、型付けされた完全な CRUD 機能を生成します。すべてのジェネレーターは共有の FieldSchema コントラクトを基盤としているため、各パーツを組み合わせられます。

ツール	機能
infer-fields	JSON サンプル／OpenAPI → 型付きの FieldSchema（型、FK 関係、テーブル／フォームのデフォルト設定）
zod-schema-generator	FieldSchema → Zod スキーマと推論された TS 型
api-client-generator	FieldSchema → RTK Query スライス または TanStack Query フック（キャッシュタグ付き）
form-generator	FieldSchema → React Hook Form + Zod フォーム（作成／編集）
table-generator	FieldSchema → TanStack Table（並べ替え／フィルター／ページネーション）
detail-generator	FieldSchema → 型付き詳細ビュー + 削除アクション
crud-composer	各パーツをルートに接続 — React Router 7 または Next App Router
form-wizard-generator	FieldSchema → ステップごとの検証に対応した複数ステップの RHF+Zod ウィザード
msw-mock-generator	FieldSchema → MSW ハンドラー + シードデータ。モック API を使って機能を実行できます
workflow-runner	review-gate による承認を経て、一連の処理をエンドツーエンドで実行します — ファイル + ジャーナル + A–F 評価
e2e-generator	FieldSchema → Playwright CRUD フロースペック（作成→編集→削除 + アクセシビリティ）
playwright-scaffolder	Playwright のテスト環境をスキャフォールド — 設定、フィクスチャ、ベース POM、認証設定
visual-regression-setup	ルート／ストーリー向けの Playwright toHaveScreenshot スペック — CSS の差異を検出

CRA → Vite

Create React App プロジェクトを Vite に移行します：分析 → 計画 → スキャフォールド → 移行 → 検証。

ツール	機能
cra-to-vite	オーケストレーター — 以下の 6 つのツールを順番に実行し、1 回の呼び出しで評価レポートを生成します
craconfig-analyzer	CRA 設定の詳細な調査（react-scripts、環境変数、プロキシ、jest、browserslist、SVG）
dependency-remapper	CRA の依存関係 → Vite の移行計画（削除／追加するバージョン + 対応付けできない依存関係）
env-var-migrator	ソースコードと .env ファイル内の REACT_APP_* → import.meta.env.VITE_*
jest-to-vitest-migrator	jest.* → vi.*、適切なインポートを追加し、手動確認が必要なケースを示します
vite-project-scaffolder	vite.config.ts、main.tsx、厳格な tsconfig、Vitest の設定ブロックを生成します
webpack-config-translator	webpack／CRACO → Vite のベストエフォートな変換 + 手動確認リスト

ボイラープレート

ツール	機能
barrel-generator	フォルダーから再エクスポートする index.ts バレルを生成 — エクスポート一覧のずれを防ぎます
type-from-json	JSON サンプル → プレーンな TS インターフェース（ネストされたオブジェクトは個別のインターフェースになります）
zustand-store-generator	状態の形状 → 型付き Zustand ストア（セッター、リセット、永続化／devtools）
svg-to-component	生の SVG → 型付き React コンポーネント（SVGProps、currentColor）— SVGR 相当
env-config-generator	Zod で検証する型付き環境変数モジュール（Vite／Next）— 変数の不足や不正を即座に検出します
states-scaffolder	読み込み／空／エラー状態のコンポーネント + データビュー用の切り替えラッパー

メタ

ツール	機能
mcp-tool-factory	このパッケージ内の新しい MCP ツールをスキャフォールド、接続、検証します
mcp-tool-improviser	7 つの観点から MCP ツールを分析・改善 — 差分の提案、適用、ロールバック
docs-generator	README（MCP ツールから）または API リファレンス（TS モジュール + JSDoc から）を生成します

自動化ワークフロー

よくあるタスクでは、ツールを連携させて実行できます：

ワークフロー	連携
コードのモダナイゼーション	legacy-analyzer → code-modernizer → typescript-enforcer → generate-tests
コンポーネント品質パイプライン	component-factory → component-reviewer → accessibility-checker → storybook-generator
レンダリングパフォーマンス監査	render-analyzer → performance-audit → quality-pipeline
アプリのヘルスチェック	legacy-analyzer → component-reviewer → generate-tests
依存関係の健全性	dep-auditor [unused → duplicates → bundle-impact] → monorepo-manager
CRUD 機能の一括作成	workflow-runner（CRUD Factory の連携全体を1回の呼び出しで実行）
CRA から Vite への移行	cra-to-vite（CRA→Vite の連携全体を1回の呼び出しで実行）

---

MCP の仕組み

Claude Desktop / Cline / Cursor
        │  JSON-RPC over stdio
        ▼
   MCP Server (e.g. typescript-enforcer)
        │
        ▼
   Tool handlers (your code)

各サーバーは tools/shared/ の McpServerBase を拡張します。トランスポート、ルーティング、エラー形式の処理を担います。新しいツールの追加に必要なのは約50行です：

import { McpServerBase } from '@mcp-showcase/shared';

class MyTool extends McpServerBase {
  constructor() {
    super({ name: 'my-tool', version: '1.0.0' });
  }

  protected registerTools(): void {
    this.addTool('do_thing', 'Does a thing', {
      type: 'object',
      properties: { path: { type: 'string', description: 'Target path' } },
      required: ['path'],
    }, async (args) => {
      const { path } = args as { path: string };
      return this.success({ result: `Processed ${path}` });
    });
  }
}

new MyTool().run();

---

ソースから実行する（コントリビューター向け）

普段使いには npm をおすすめします（インストールを参照）。ツールの開発やショーケース UI の実行には、リポジトリをクローンしてください：

git clone https://github.com/Nishant-Chaudhary5338/mcp-toolkit.git
cd mcp-toolkit
npm install
npm run build
npm test          # run the full suite across all tools
npm run dev       # server on :3002, client on :5173

インストールと同じ方法で、Claude Desktop にローカルビルドを指定します。その際、npx -y mcp-react-toolkit <name> を node /path/to/mcp-toolkit/tools/<name>/build/index.js に置き換えてください。

CLI と CI での使用

各ツールの build/index.js には #!/usr/bin/env node のシバンが含まれています。JSON-RPC メッセージを標準入力からパイプで渡してください：

# Health score + migration hints for a full app
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"analyze-legacy-app","arguments":{"path":"/path/to/app"}}}' \
  | node tools/legacy-analyzer/build/index.js

# Review a component — grade A+ to F
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"review","arguments":{"path":"src/components/Button.tsx"}}}' \
  | node tools/component-reviewer/build/index.js

# List a tool's available commands
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node tools/legacy-analyzer/build/index.js

---

テスト

各ツールには、MCP トランスポートを介さずにコアロジックを直接検証する、同じディレクトリに配置された Vitest テストスイートがあります。

npm test                              # all tools
npm run test -w tools/legacy-analyzer # single tool

CI は、Node 20 および 22 に対して、プッシュと PR のたびに実行されます。

---

関連パッケージ

code-graph-indexer — あらゆる TS／React／Next.js リポジトリを、クエリ可能なコードグラフ（ファイル、コンポーネント、関数、それらの間のエッジ）にインデックス化し、構造に関する質問（これを呼び出している箇所、影響範囲、デッドコード、セマンティック検索）に回答します。同じファミリーの別パッケージです。

npx code-graph-indexer ui --root .

---

コントリビューション

新しいツールのひな形作成、テストの記述、PR の作成方法については、CONTRIBUTING.md をご覧ください。

技術スタック

TypeScript strict · Node.js · MCP SDK 1.12 · Vitest · React 19 · Vite · Tailwind CSS · Express

開発者

Nishant Chaudhary — シニアフロントエンドエンジニア · [email protected]

こちらもご覧ください：dashcraft · react-present · ai-builder

MIT ライセンス