What can you do with this server?

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.

Which integrations are available for this server?

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-toolkit

by Nishant-Chaudhary5338

Overview Schema Related Servers Score Discussions

TypeScript

Local

mcp-toolkit

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

License: MIT MCP SDK Tests

What's here

tools/      17 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

Related MCP server: MCP Quality Hub

Tools

All 17 tools are production-ready: built, tested, and CI-verified on Node 20 + 22.

Component Development

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

Code Quality & Modernisation

Tool	What it does	MCP tools exposed
`code-modernizer`	AST-based JS/JSX → TypeScript conversion, PropTypes → interfaces	1
`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
`legacy-analyzer`	22-tool health audit for any React/Next.js/Remix app — scores 0–100, migration hints	22

Monorepo & Infrastructure

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

Automation workflows

1 · Code Modernization

legacy-analyzer → code-modernizer → typescript-enforcer → generate-tests

Migrate a JS codebase to strict TypeScript with auto-generated test coverage.

2 · Component Quality Pipeline

component-factory → component-reviewer → accessibility-checker → storybook-generator

Generate a production-ready component, review it, fix a11y issues, and add full story coverage.

3 · Render Performance Audit

render-analyzer → performance-audit → quality-pipeline

Find unnecessary re-renders, memory leaks, and heavy imports — graded A–F.

4 · App Health Check

legacy-analyzer [analyze-legacy-app] → component-reviewer → generate-tests

Full health score (0–100) with prioritized migration hints, then fix the top issues.

5 · Dependency Health

dep-auditor [unused] → dep-auditor [duplicates] → dep-auditor [bundle-impact] → monorepo-manager

Audit and clean up a monorepo's dependency graph end-to-end.

How MCP works

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();

Run locally

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

Add to Claude Desktop

// ~/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"]
    }
  }
}

Use as a CLI / in CI

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

List a tool's available commands

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node tools/legacy-analyzer/build/index.js

Testing

Each tool has a dedicated test file covering its core logic directly — no MCP transport required.

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

Tool	Tests
render-analyzer	11
storybook-generator	20
performance-audit	15
lighthouse-runner	13
test-gap-analyzer	15
component-reviewer	19
component-fixer	10
legacy-analyzer	14
json-viewer	16
quality-pipeline	8
component-factory	6
code-modernizer	8
dep-auditor	15
accessibility-checker	15
generate-tests	14
typescript-enforcer	22
monorepo-manager	30
Total	450

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

Architecture

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

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
nishantchaudhary.dev@gmail.com

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

MIT License

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

Need Help?

Related Servers

Tools

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

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