This server provides tools for React component scaffolding, review, fixing, and improvement using shadcn/ui templates.
generate_component — Scaffold a single React component (PascalCase) to a specified path, optionally including TypeScript types, Vitest tests, Storybook stories, and documentation.
list_templates — View all 41 available shadcn/ui component templates.
generate_component_library — Batch-generate multiple components at once to a base output directory, with optional tests and Storybook stories.
check_component_exists — Verify if a component already exists at a given path to avoid accidental overwrites.
review_component — Audit a component for TypeScript errors and accessibility issues, returning a quality grade (A+ to F) and actionable suggestions.
fix_component — Auto-fix common issues such as broken import paths, missing displayName, and incorrect path references.
improve_component — Enhance an existing component by expanding test coverage with edge cases, adding Storybook story variants, and enriching documentation.
Planned integration to perform Web Vitals / Lighthouse audits via CLI.
Allows scaffolding React components from 41 shadcn/ui templates.
Planned integration to auto-generate Storybook stories for existing components.
MCP servers for React + TypeScript development automation. Works with Claude Desktop, Cline, Cursor — and as plain CLI scripts — one protocol, zero duplication.
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.
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.
Related MCP server: MCP Quality Hub
Published on npm as mcp-react-toolkit. No clone or build required:
npx mcp-react-toolkit --list # list all 59 tools
npx 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.
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:
Where you run it | What you get |
Claude Desktop (MCP Apps) | Renders inline in the conversation (sandboxed iframe) |
Claude Code · Cursor · CLI | JSON plus a clickable |
Any browser | The same HTML, standalone |
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.
Tool | What it does |
| Scaffold React components from 41 shadcn/ui templates — with tests + Storybook |
| Audit TypeScript errors, a11y issues, test coverage — graded A+ to F |
| Auto-fix broken imports, missing deps, inline style refactors |
| Extend a component with variants, comprehensive stories, and edge-case tests |
| Auto-generate Storybook stories — Default, variants, sizes, callbacks, play functions |
Tool | What it does |
| Scan for |
| WCAG 2.1 audit — alt text, label associations, ARIA roles, keyboard navigation |
| Apply safe a11y fixes (img alt, blank rel, htmlFor, tabIndex) |
| 5-stage audit (tests · types · perf · a11y · design tokens), graded A–F |
| Static A–F quality gate for generated/changed code |
| Flag hardcoded colors/spacing/radii/shadows, suggest tokens, grade A–F |
| Detect unnecessary re-renders, missing memo, inline objects/functions |
| Memory leaks, heavy imports, unoptimized images, deep nesting |
| Gate gzipped asset sizes against per-pattern budgets — fail CI on regressions |
| AST-based JS/JSX → TypeScript conversion, PropTypes → interfaces |
| Flag redundant useMemo/useCallback/memo for the React 19 Compiler |
| Generic regex codemod engine + named built-ins; dry-run by default |
| Execute refactor plans safely — move/rename/split, update imports, rollback |
| Audit Redux for anti-patterns (selectors, mutations, RTK Query migration hints) |
| Diff two API snapshots → breaking vs additive changes — CI gate against breaks |
| Scan JSX for hardcoded strings → i18n keys + message catalog |
| Analyze a TS/React source file and generate a Vitest test suite |
| Find unimplemented functions, uncovered branches, missing edge cases |
|
|
| Run the suite, classify failures by root cause, generate targeted fixes |
| 22-tool health audit for any React/Next.js/Remix app — scores 0–100, migration hints |
Tool | What it does |
| Unused deps, duplicate versions, circular imports, bundle impact analysis |
| Workspace listing, dependency graph, health check, shared dep finder |
| Static HTML audit — meta tags, a11y, OG/Twitter cards, canonical, JSON-LD |
| Interactive HTML JSON viewer — collapsible, searchable, dark/light |
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 |
| JSON sample / OpenAPI → typed |
|
|
|
|
|
|
|
|
|
|
| Wire the pieces into routes — React Router 7 or Next App Router |
|
|
|
|
| Runs the whole chain end-to-end, gated by |
|
|
| Scaffold the Playwright harness — config, fixtures, base POM, auth setup |
| Playwright |
Migrate a Create React App project to Vite: analyze → plan → scaffold → migrate → verify.
Tool | What it does |
| Orchestrator — runs the six tools below in sequence, one call, graded report |
| Deep CRA config inspection (react-scripts, env, proxy, jest, browserslist, SVG) |
| CRA deps → Vite plan (remove/add with versions + unmapped) |
|
|
|
|
| Generates |
| Best-effort webpack/CRACO → Vite translation + manual-review list |
Tool | What it does |
| Generate an |
| JSON sample → plain TS interfaces (nested objects become their own interfaces) |
| State shape → typed Zustand store (setters, reset, persist/devtools) |
| Raw SVG → typed React component (SVGProps, currentColor) — SVGR-grade |
| Zod-validated typed env module (Vite/Next) — fail fast on missing/bad vars |
| Loading/empty/error state components + a switch wrapper for a data view |
Tool | What it does |
| Scaffold + wire + verify new MCP tools in this package |
| Analyze + improve MCP tools across 7 dimensions — proposed diffs, apply, rollback |
| Generate a README (from an MCP tool) or an API reference (from a TS module + JSDoc) |
Chain tools together for common tasks:
Workflow | Chain |
Code Modernization |
|
Component Quality Pipeline |
|
Render Performance Audit |
|
App Health Check |
|
Dependency Health |
|
Full CRUD feature |
|
CRA → Vite migration |
|
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();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 :5173Point 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.
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 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.jsEvery tool has a co-located Vitest suite covering its core logic directly — no MCP transport required.
npm test # all tools
npm run test -w tools/legacy-analyzer # single toolCI runs on every push and PR against Node 20 and 22.
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 .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
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
A TypeScript MCP server for Home Assistant, enabling programmatic management of entities, automati…
A MCP server built for developers enabling Git based project management with project and personal…
Verified React chart generation: select, validate, repair, render, and inspect charts through MCP.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Nishant-Chaudhary5338/mcp-toolkit'
If you have feedback or need assistance with the MCP directory API, please join our Discord server