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.

Parameter	Type	Required	Description
formName	string	✓	Component name, e.g. UserLoginForm
fields	Field[]	✓	Array of form field definitions (see below)

Field object:

Property	Type	Required	Description
name	string	✓	Key used in form state
label	string	✓	Human-readable label
type	"text" | "email" | "password" | "number" | "select" | "checkbox"	✓	Input type
placeholder	string	—	Placeholder text
description	string	—	Helper text shown below the input
required	boolean	—	Defaults to true
options	string[]	—	Options list for select type

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.

Parameter	Type	Required	Description
errorMessage	string	✓	Raw TypeScript error output or error code
codeContext	string	—	The problematic code block for additional context

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.

Parameter	Type	Required	Description
components	Array<"form" | "input" | "select" | "checkbox" | "button" | "textarea" | "card" | "dialog">	✓	Components to install
packageManager	"npm" | "pnpm" | "bun" | "yarn"	—	Defaults to "npm"

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

Package	Version	Role
@modelcontextprotocol/sdk	^1.29.0	MCP server framework
zod	^4.4.3	Schema validation & parameter definitions
typescript	^7.0.2	Type safety
tsx	^4.23.1	Zero-config TypeScript runner (dev)
#� �y�p�e�S�c�r�i�p�t�-�D�e�v�e�l�o�p�e�r�-�M�C�P�-�S�e�r�v�e�r�
�
�