mcp-react-toolkit
Advanced tools
59 MCP servers for React + TypeScript development automation — component scaffolding, dep auditing, WCAG checking, test generation, TypeScript enforcement, render analysis, performance audit, Lighthouse, Storybook generation, legacy app analysis, componen
MCP servers for React + TypeScript development automation. Works with Claude Desktop, Cline, Cursor — and as plain CLI scripts — one protocol, zero duplication.
Here's the thing nobody tells you when you start building agentic workflows: the loop itself is what's expensive, not the model. An agent working without any composed tools does everything the slow way — read a file, think, write a file, read it back to check its own work, repeat — and every single one of those turns re-sends the whole conversation so far as input tokens. By the time you're 20 steps into a real multi-file task, that resent context alone can be running 50K+ tokens per call. It adds up fast, and it's not really about which model you're using.
I didn't just take that on faith — a few sources back it up with real numbers. LeanOps measured agent loops running about 3.2× the tokens of a single direct call at 5 steps, ~30× at 50 steps, and past 100× once you're deep into a typical build-and-debug session — because re-sent context is roughly 62% of the bill. Vantage found similar: real agentic sessions run an input-to-output ratio around 25:1 (a direct call is closer to 1:1), with a 50-turn session routinely hitting a million input tokens, and non-agentic usage on comparable work costing something like 200× less per interaction on the same team. And a recent arXiv paper on agentic tokenomics puts agentic tasks at roughly 1000× the tokens of single-turn work, with up to 30× variance run to run on the exact same task — so it's not just expensive, it's unpredictable.
That's the problem this toolkit's composed tools are built to get rid of. workflow-runner's schema_to_feature and cra-to-vite don't add one more tool call into an agent's existing loop — they replace what would otherwise be 7 or 8 separate read/write/verify turns with a single in-process call that runs the whole generator or migration pipeline and hands back the finished result. That's the "50-turn loop collapses into 1 call" shape the research above says saves 10–100×, which is a very different thing from just bolting one extra tool onto an unchanged loop (that only gets you the 20–40% range).
To keep myself honest, I also ran a real, measured benchmark rather than just trusting the theory — ax-benchmark, 6 tasks, claude -p running headless, three arms (agent alone, agent with one MCP tool call added into its loop, and the tool called directly with no agent at all). This is a conservative baseline on purpose, since it only tests adding a single tool call into an otherwise unchanged loop, not the deeper pipeline collapse described above:
| Agent alone | Agent + one MCP tool | Tool called directly | |
|---|---|---|---|
| Analysis tasks (review, a11y, legacy-code) | baseline | ~41% lower cost | ~100% free, ~15× faster (when in scope) |
| All 6 tasks, blended | baseline | ~19% lower cost | — |
| New code (component, tests) | baseline | roughly cost-neutral | not applicable to novel work |
Two things worth being upfront about: cost is the fair metric here, not wall-time — the agent-alone arm ran headless with no shell access and over-explored on open-ended tasks, which inflated its time without touching its actual cost. And on small, novel, single-file work, the overhead of the tool's structured output can offset what it saves — the real win shows up on repetitive, mechanical, multi-file work, which also happens to be exactly where the multi-turn-loop tax above hits hardest.
Published on npm as mcp-react-toolkit. No clone or build required — run any of the 59 servers straight from npm:
npx mcp-react-toolkit --list # list all 59 tools
npx mcp-react-toolkit legacy-analyzer # run one as an MCP server (stdio)
// claude_desktop_config.json
{
"mcpServers": {
"legacy-analyzer": {
"command": "npx",
"args": ["-y", "mcp-react-toolkit", "legacy-analyzer"]
},
"component-factory": {
"command": "npx",
"args": ["-y", "mcp-react-toolkit", "component-factory"]
}
}
}
Swap in any tool name from npx mcp-react-toolkit --list. Restart your client and the tools appear.
Most MCP tools return raw JSON. The tools here return that JSON plus a premium, interactive HTML dashboard — a 0–100 health score, sortable issue triage, light/dark toggle, and one-click fix actions that call other tools in the toolkit.
It works three ways from a single self-contained artifact (no server, no external requests):
| Where you run it | What you get |
|---|---|
| Claude Desktop (MCP Apps) | The dashboard renders inline in the conversation (sandboxed iframe); action buttons drive the agent. |
| Claude Code (VS Code) · Cursor · CLI | The JSON plus a clickable file:// link — open it to view the full dashboard in your browser. |
| Any browser | The same HTML opens standalone — fully interactive. |
Two dashboard styles:
legacy-analyzer, component-reviewer, accessibility-checker, dep-auditor, typescript-enforcer, performance-audit, render-analyzer, test-gap-analyzer, quality-pipeline, lighthouse-runner. Health score, grade, category cards, filter/sort issue table.component-factory, component-fixer, code-modernizer, storybook-generator, generate-tests, monorepo-manager. Files created/changed, diffs, and follow-up actions.How it renders: the tool returns an MCP resource with a ui:// URI and mimeType: text/html. Hosts that support MCP Apps render it inline; for every other client the toolkit also writes the HTML to a temp file and returns a file:// link so you can open it in a browser. Powered by the internal @mcp-showcase/ui-kit package — dependency-free, dual light/dark, ~30 KB per report.
tools/ 59 MCP server packages — each independently buildable and runnable
server/ Express bridge (port 3002) — proxies calls from the UI to MCP servers
client/ React 19 showcase SPA — tool catalog, workflow demos, animated flowcharts
code-graph-indexer — a standalone code-intelligence engine that indexes any TS / React / Next.js repo into a queryable code graph (files · components · functions, and the imports/renders/calls/references/depends-on edges between them) and answers structural questions — who renders this, who calls this, find references, blast radius, cycles, dead code — plus semantic search by meaning. Use it over a CLI, an MCP server, an HTTP/WS server, and a 3D web explorer. Separate package, same family:
npx code-graph-indexer mcp # stdio MCP server (13 tools)
npx code-graph-indexer index --root . # one-shot index → .code-graph/graph.json
npx code-graph-indexer query who-renders --id "cmp:src/Button.tsx#Button" --root .
All 59 tools are production-ready: built, tested, and CI-verified on Node 20 + 22.
| Tool | What it does | MCP tools exposed |
|---|---|---|
component-factory | Scaffold React components from 41 shadcn/ui templates — with tests + Storybook | 6 |
component-reviewer | Audit TypeScript errors, a11y issues, test coverage — graded A+ to F | 3 |
component-fixer | Auto-fix broken imports, missing deps, inline style refactors | 3 |
storybook-generator | Auto-generate Storybook stories — Default, variants, sizes, callbacks, play functions | 2 |
component-improver | Extend a component with variants, comprehensive stories, and edge-case tests | 1 |
| Tool | What it does | MCP tools exposed |
|---|---|---|
code-modernizer | AST-based JS/JSX → TypeScript conversion, PropTypes → interfaces | 1 |
refactor-executor | Execute refactor plans safely — move/rename/split, update imports, validate build, rollback | 10 |
react-compiler-migrator | Flag redundant useMemo/useCallback/memo for the React 19 Compiler + rules-of-hooks blockers | 2 |
a11y-autofixer | Apply safe a11y fixes (img alt, blank rel, htmlFor, tabIndex) — the execute half | 1 |
codemod-runner | Generic regex codemod engine + named built-ins (env, jest→vi, render→createRoot); dry-run | 2 |
typescript-enforcer | Scan for any types, unsafe casts, missing modifiers — 7 rules, scored 0–10 | 4 |
accessibility-checker | WCAG 2.1 audit — alt text, label associations, ARIA roles, keyboard navigation | 3 |
generate-tests | Analyze a TypeScript/React source file and generate a Vitest test suite | 2 |
quality-pipeline | 5-stage audit (tests · types · perf · a11y · design tokens) graded A–F | 2 |
render-analyzer | Detect unnecessary re-renders, missing memo, inline objects/functions | 3 |
performance-audit | Memory leaks, heavy imports, unoptimized images, deep nesting | 3 |
test-gap-analyzer | Find unimplemented functions, uncovered branches, missing edge cases | 3 |
bundle-budget-guard | Gate gzipped asset sizes against per-pattern budgets — fail CI on regressions | 1 |
api-contract-differ | Diff two API snapshots → breaking vs additive changes — CI gate against breaks | 1 |
redux-state-analyzer | Audit Redux for anti-patterns/optimizations (selectors, mutations, RTK Query) — grade A–F | 1 |
i18n-extractor | Scan JSX for hardcoded strings → i18n keys + message catalog | 1 |
enforce-design-tokens | Flag hardcoded colors/spacing/radii/shadows, suggest tokens, grade A–F | 3 |
test-data-factory | FieldSchema → typed fixture factory (makeX/makeXs + overrides) for tests/stories | 1 |
fix-failing-tests | Run the suite, classify failures by root cause, generate targeted fixes | 3 |
legacy-analyzer | 22-tool health audit for any React/Next.js/Remix app — scores 0–100, migration hints | 22 |
| Tool | What it does | MCP tools exposed |
|---|---|---|
dep-auditor | Unused deps, duplicate versions, circular imports, bundle impact analysis | 4 |
monorepo-manager | Workspace listing, dependency graph, health check, shared dep finder | 6 |
lighthouse-runner | Static HTML audit — meta tags, a11y, OG/Twitter cards, canonical, JSON-LD | 4 |
json-viewer | Generate an interactive HTML JSON viewer — collapsible, searchable, dark/light | 3 |
One JSON API sample (or OpenAPI schema) fans out into a full, typed CRUD feature. Every generator keys off the shared FieldSchema contract, so the pieces compose.
| Tool | What it does | MCP tools exposed |
|---|---|---|
infer-fields | JSON sample / OpenAPI → typed FieldSchema (types, FK relations, table/form defaults) | 1 |
zod-schema-generator | FieldSchema → Zod schema + inferred TS type | 1 |
api-client-generator | FieldSchema → RTK Query slice or TanStack Query hooks, with cache tags | 1 |
form-generator | FieldSchema → React Hook Form + Zod form (create / edit) | 1 |
table-generator | FieldSchema → TanStack Table (sort / filter / paginate) | 1 |
detail-generator | FieldSchema → typed detail view + delete action | 1 |
crud-composer | Wire the pieces into routes — React Router 7 or Next App Router | 1 |
form-wizard-generator | FieldSchema → multi-step RHF+Zod wizard (per-step validation, progress) | 1 |
msw-mock-generator | FieldSchema → MSW handlers + seed data, so the generated CRUD runs against a mock API | 1 |
workflow-runner | Run schema_to_feature end-to-end, gated by review-gate — returns files + journal + A–F grade | 1 |
e2e-generator | FieldSchema → Playwright CRUD flow spec (create→edit→delete + a11y) | 1 |
playwright-scaffolder | Scaffold the Playwright harness — config, fixtures, base POM, auth setup | 1 |
visual-regression-setup | Playwright toHaveScreenshot specs for routes/stories — catch CSS drift | 1 |
review-gate | Static A–F quality gate for generated/changed code (a11y, tokens, smells, stubs) | 1 |
Migrate a Create-React-App project to Vite: analyze → plan → scaffold → migrate → verify.
| Tool | What it does | MCP tools exposed |
|---|---|---|
cra-to-vite | Orchestrator — analyze → plan → scaffold → migrate → report (A–F), point it at a CRA app | 1 |
craconfig-analyzer | Deep CRA config inspection (react-scripts, env, proxy, jest, browserslist, PWA, SVG…) | 1 |
dependency-remapper | CRA deps → Vite plan (remove/add with versions + unmapped) | 1 |
env-var-migrator | Rewrite REACT_APP_ → VITE_ / import.meta.env + rename .env keys, flag dynamic | 1 |
jest-to-vitest-migrator | jest.* → vi.* + vitest import + flag mock factories | 1 |
vite-project-scaffolder | Generate the Vite shell — vite.config, index.html, main.tsx, strict tsconfig | 1 |
webpack-config-translator | Translate webpack/CRACO → Vite (aliases, plugins, loaders) + manual-review list | 1 |
| Tool | What it does | MCP tools exposed |
|---|---|---|
barrel-generator | Generate an index.ts barrel re-exporting a folder — no more drifting export lists | 1 |
type-from-json | JSON sample → plain TS interfaces (nested objects → their own interfaces) | 1 |
zustand-store-generator | State shape → typed Zustand store (setters, reset, persist/devtools) | 1 |
svg-to-component | Raw SVG → typed React component (SVGProps, currentColor) — SVGR-grade | 1 |
env-config-generator | Zod-validated typed env module (Vite/Next) — fail fast on missing/bad vars | 1 |
states-scaffolder | Loading/empty/error state components + a switch wrapper for a data view | 1 |
| Tool | What it does | MCP tools exposed |
|---|---|---|
mcp-tool-factory | Scaffold + wire + verify new MCP tools in this package — the executable form of the mcp-server-builder skill | 3 |
mcp-tool-improviser | Analyze + improve MCP tools across 7 dimensions — proposed diffs, apply, rollback | 4 |
docs-generator | Generate a README (from an MCP tool) or an API reference (from a TS module + JSDoc) | 2 |
legacy-analyzer → code-modernizer → typescript-enforcer → generate-tests
Migrate a JS codebase to strict TypeScript with auto-generated test coverage.
component-factory → component-reviewer → accessibility-checker → storybook-generator
Generate a production-ready component, review it, fix a11y issues, and add full story coverage.
render-analyzer → performance-audit → quality-pipeline
Find unnecessary re-renders, memory leaks, and heavy imports — graded A–F.
legacy-analyzer [analyze-legacy-app] → component-reviewer → generate-tests
Full health score (0–100) with prioritized migration hints, then fix the top issues.
dep-auditor [unused] → dep-auditor [duplicates] → dep-auditor [bundle-impact] → monorepo-manager
Audit and clean up a monorepo's dependency graph end-to-end.
Claude Desktop / Cline / Cursor
│
│ JSON-RPC over stdio
▼
MCP Server (e.g. typescript-enforcer)
│
▼
Tool handlers (your code)
Each server in this repo extends McpServerBase from tools/shared/ — an abstract class that handles transport, routing, and error formatting. Adding a new tool is ~50 lines.
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();
Prefer npm for everyday use (see Install). Clone only to hack on the tools or run the showcase 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
// ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"component-factory": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/component-factory/build/index.js"]
},
"component-reviewer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/component-reviewer/build/index.js"]
},
"component-fixer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/component-fixer/build/index.js"]
},
"storybook-generator": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/storybook-generator/build/index.js"]
},
"render-analyzer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/render-analyzer/build/index.js"]
},
"performance-audit": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/performance-audit/build/index.js"]
},
"legacy-analyzer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/legacy-analyzer/build/index.js"]
},
"test-gap-analyzer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/test-gap-analyzer/build/index.js"]
},
"lighthouse-runner": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/lighthouse-runner/build/index.js"]
},
"dep-auditor": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/dep-auditor/build/index.js"]
},
"accessibility-checker": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/accessibility-checker/build/index.js"]
},
"generate-tests": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/generate-tests/build/index.js"]
},
"typescript-enforcer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/typescript-enforcer/build/index.js"]
},
"code-modernizer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/code-modernizer/build/index.js"]
},
"quality-pipeline": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/quality-pipeline/build/index.js"]
},
"monorepo-manager": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/monorepo-manager/build/index.js"]
},
"json-viewer": {
"command": "node",
"args": ["/path/to/mcp-toolkit/tools/json-viewer/build/index.js"]
}
}
}
Every tool's build/index.js has a #!/usr/bin/env node shebang and is chmod +x — pipe a JSON-RPC message to it on stdin and it writes the result to stdout.
# Analyze a full React/Next.js/Vite app — health score 0–100 + migration hints
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
# Detect unnecessary re-renders (missing memo, inline objects)
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"detect_rerenders","arguments":{"path":"src/components"}}}' \
| node tools/render-analyzer/build/index.js
# Audit for memory leaks and heavy imports
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"audit_bundle","arguments":{"path":"src"}}}' \
| node tools/performance-audit/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
# Auto-fix a component
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"fix","arguments":{"path":"src/components/Button.tsx"}}}' \
| node tools/component-fixer/build/index.js
# Find untested exports
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"analyze_test_gaps","arguments":{"path":"src"}}}' \
| node tools/test-gap-analyzer/build/index.js
# Generate Storybook stories for all components in a directory
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"generate_stories","arguments":{"path":"src/components"}}}' \
| node tools/storybook-generator/build/index.js
# Audit an HTML file — SEO, a11y, OG tags, canonical
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"static_audit","arguments":{"path":"public/index.html"}}}' \
| node tools/lighthouse-runner/build/index.js
# Run a WCAG audit
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"check_accessibility","arguments":{"path":"src/components"}}}' \
| node tools/accessibility-checker/build/index.js
# Scan for TypeScript violations
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"scan_directory","arguments":{"path":"src"}}}' \
| node tools/typescript-enforcer/build/index.js
# Find unused and outdated dependencies
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"find_unused_deps","arguments":{"root":"."}}}' \
| node tools/dep-auditor/build/index.js
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node tools/legacy-analyzer/build/index.js
Every tool has a co-located Vitest suite covering its core logic directly — no MCP transport required — plus tests for the dashboard renderers and per-tool report mappers.
npm test # all tools
npm run test -w tools/legacy-analyzer # single tool
CI runs on every push and PR against Node 20 and 22.
tools/
shared/ McpServerBase, ToolRegistry, shared types
component-factory/ 41 shadcn/ui templates
component-reviewer/ Review rules engine (7 categories)
component-fixer/ Fix strategies per issue type
storybook-generator/ Story generator (Default, variants, play functions)
render-analyzer/ Re-render profile + memo checker
performance-audit/ Memory leak + heavy import detector
legacy-analyzer/ 22-tool analysis engine + health scorer
test-gap-analyzer/ Export extractor + edge case detector
lighthouse-runner/ Static HTML auditor
code-modernizer/ AST-based TS conversion
quality-pipeline/ 5-stage grading system
dep-auditor/ Dependency graph analysis
accessibility-checker/ WCAG rule engine (9 rules)
generate-tests/ Source analyzer + test generator
typescript-enforcer/ 7-rule type safety scanner
monorepo-manager/ Workspace operations
json-viewer/ HTML generation
server/ Express bridge — spawns tools as child processes
client/ React 19 SPA — tool catalog and live demos
See CONTRIBUTING.md — how to scaffold a new tool, write tests, and open a PR.
TypeScript strict · Node.js · MCP SDK 1.12 · Vitest · React 19 · Vite · Tailwind CSS · Express
Nishant Chaudhary — Senior Frontend Engineer
nishantchaudhary.dev@gmail.com
Also see: dashcraft · react-present · ai-builder
MIT License
FAQs
59 MCP servers for React + TypeScript development automation — component scaffolding, dep auditing, WCAG checking, test generation, TypeScript enforcement, render analysis, performance audit, Lighthouse, Storybook generation, legacy app analysis, componen
The npm package mcp-react-toolkit receives a total of 45 weekly downloads. As such, mcp-react-toolkit popularity was classified as not popular.
We found that mcp-react-toolkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.
Security News
During a UK cyber test, a Mythos 5 agent used sockpuppets, social engineering, and prompt injection to try to get a maintainer to merge malware.