mcp-dev-tools

An MCP (Model Context Protocol) server that provides AI assistants with tools for React and TypeScript development. It can generate typed form components, explain TypeScript compiler errors, and produce Shadcn UI installation commands.

Tools

generate_react_form

Generates a fully typed React form component using React Hook Form, Zod, and Shadcn UI. The output is ready to drop into a Next.js or Vite project.

Field object:

The generated component includes: a Zod schema, inferred TypeScript types, proper default values, and only imports the Shadcn primitives it actually uses.

explain_typescript_error

Analyzes a TypeScript compiler error and returns a structured explanation with recommended fixes.

Handles TS2322 (type mismatch), TS2339 (missing property), TS2531 / TS18048 (null / undefined), and general diagnostics.

get_shadcn_install_command

Generates the exact Shadcn CLI command to install a set of UI components, always including the required form and button primitives.

Related MCP server: Codex Gemini MCP

Requirements

• Node.js 18+

• npm / pnpm / bun / yarn

Installation

npm install

Usage

Development (run without compiling)

npm run dev

Production

npm run build
npm start

MCP Inspector (interactive debugging)

npm run inspector

Connecting to an MCP client

Add the following to your MCP client configuration (e.g. Claude Desktop's claude_desktop_config.json):

{
  "mcpServers": {
    "react-ts-dev-tools": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-dev-tools/build/index.js"]
    }
  }
}

Or, if installed globally via npm:

{
  "mcpServers": {
    "react-ts-dev-tools": {
      "command": "mcp-dev-tools"
    }
  }
}

Project structure

mcp-dev-tools/
├── src/
│   ├── index.ts                # Server entry point — registers all tools
│   └── tools/
│       ├── formGenerator.ts    # generate_react_form
│       ├── tsExplainer.ts      # explain_typescript_error
│       └── shadcnInstaller.ts  # get_shadcn_install_command
├── build/                      # Compiled output (generated by tsc)
├── package.json
└── tsconfig.json

Tech stack

ypeScript-Developer-MCP-Server