Mcp React Toolkit

mcp-toolkit

MCP servers for React + TypeScript development automation. Works with Claude Desktop, Cline, Cursor — and as plain CLI scripts — one protocol, zero duplication.

[npm] [CI] [License: MIT] [MCP SDK]

59 tools across 9 categories — component scaffolding, code quality, a full CRUD-feature factory, CRA→Vite migration, and more. Every tool ships as its own MCP server, built and tested independently.

Why this exists — the token math

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:

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.

Install

Published on npm as mcp-react-toolkit. No clone or build required:

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

Add it to Claude Desktop / Cursor / Cline:

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

Swap in any tool name from npx mcp-react-toolkit --list. Restart your client and the tool appears.

Interactive dashboards

Most MCP tools return raw JSON. These return that JSON plus an interactive HTML dashboard — health score, sortable issue triage, light/dark toggle, and one-click fix actions that call other tools in the toolkit. One self-contained artifact, no server, no external requests:

Analysis tools (legacy-analyzer, component-reviewer, dep-auditor, etc.) get an audit view — grade, category cards, filterable issue table. Generators (component-factory, code-modernizer, etc.) get a result view — files created/changed, diffs, follow-ups. Powered by the internal @mcp-showcase/ui-kit package: dependency-free, ~30 KB per report.

Tools

Component Development

Code Quality & Modernisation

Monorepo & Infrastructure

CRUD Factory

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.

CRA → Vite

Migrate a Create React App project to Vite: analyze → plan → scaffold → migrate → verify.

Boilerplate

Meta

Automation workflows

Chain tools together for common tasks:

How MCP works

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

Each server extends McpServerBase from tools/shared/ — 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();

Run from source (contributors)

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.gitcd mcp-toolkitnpm installnpm run buildnpm test          # run the full suite across all toolsnpm run dev       # server on :3002, client on :5173

Point Claude Desktop at a local build the same way as Install, swapping npx -y mcp-react-toolkit <name> for node /path/to/mcp-toolkit/tools/<name>/build/index.js.

Use as a CLI / in CI

Every tool's build/index.js has a #!/usr/bin/env node shebang — pipe a JSON-RPC message to it on stdin:

# Health score + migration hints for a full appecho '{"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 Fecho '{"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 commandsecho '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node tools/legacy-analyzer/build/index.js

Testing

Every tool has a co-located Vitest suite covering its core logic directly — no MCP transport required.

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

CI runs on every push and PR against Node 20 and 22.

Companion package

code-graph-indexer — indexes any TS/React/Next.js repo into a queryable code graph (files, components, functions, and the edges between them) and answers structural questions: who calls this, blast radius, dead code, semantic search. Same family, separate package.

npx code-graph-indexer ui --root .

Contributing

See CONTRIBUTING.md — how to scaffold a new tool, write tests, and open a PR.

Stack

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

Built by

Nishant Chaudhary — Senior Frontend Engineer · [email protected]

Also see: dashcraft · react-present · ai-builder

MIT License