react-ts-dev-tools
Generates fully typed React form components using React Hook Form and Zod, with Shadcn UI primitives.
Analyzes TypeScript compiler errors and provides structured explanations with recommended fixes.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@react-ts-dev-tools Generate a login form with email and password fields."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 |
|
| ✓ | Component name, e.g. |
|
| ✓ | Array of form field definitions (see below) |
Field object:
Property | Type | Required | Description |
|
| ✓ | Key used in form state |
|
| ✓ | Human-readable label |
|
| ✓ | Input type |
|
| — | Placeholder text |
|
| — | Helper text shown below the input |
|
| — | Defaults to |
|
| — | Options list for |
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 |
|
| ✓ | Raw TypeScript error output or error code |
|
| — | 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 to install |
|
| — | Defaults to |
Related MCP server: Codex Gemini MCP
Requirements
Node.js 18+
npm / pnpm / bun / yarn
Installation
npm installUsage
Development (run without compiling)
npm run devProduction
npm run build
npm startMCP Inspector (interactive debugging)
npm run inspectorConnecting 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.jsonTech stack
Package | Version | Role |
| ^1.29.0 | MCP server framework |
| ^4.4.3 | Schema validation & parameter definitions |
| ^7.0.2 | Type safety |
| ^4.23.1 | Zero-config TypeScript runner (dev) |
ypeScript-Developer-MCP-Server
Available Tools
3 toolsexplain_typescript_errorB
Analyzes TypeScript compiler errors and provides clear explanations with fix recommendations.
Inputs: errorMessage (required), codeContext.
generate_react_formB
Generates fully typed, validated React components using React Hook Form, Zod, and Tailwind CSS.
Inputs: fields (required), formName (required).
get_shadcn_install_commandB
Generates the exact Shadcn CLI command to install necessary UI components.
Inputs: components (required), packageManager.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 3 tools
Each tool targets a distinct task: getting shadcn install commands, generating React forms, and explaining TypeScript errors. No overlap in functionality, making selection unambiguous.
All three tool names follow a consistent verb_noun pattern (get_, generate_, explain_), making the set predictable and easy to navigate.
Three tools is a reasonable count for a focused set of React+TS utilities, though it leans toward the lower end. Each tool serves a clear purpose within the domain.
The tools cover installation, form generation, and error explanation, but miss common development needs like component scaffolding, state management, or testing utilities, leaving notable gaps.
Maintenance
Related MCP Connectors
Official Duck Framework MCP server for AI-assisted development and project scaffolding.
A MCP server built for developers enabling Git based project management with project and personal…
A simple Typescript MCP server built using the official MCP Typescript SDK and smithery/cli. This…
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceAn MCP server that enables LLMs to understand and work with TypeScript APIs they haven't been trained on by providing structured access to TypeScript type definitions and documentation.34 npm46MIT
- AlicenseBqualityDmaintenanceA TypeScript-based MCP server that provides tools to interact with local Codex and Gemini CLIs via stdio transport. It enables users to execute prompts through the ask_codex and ask_gemini tools, supporting custom models and timeout configurations.115 npm6MIT
- AlicenseNot gradedqualityDmaintenanceA TypeScript MCP server for querying React component documentation, searching articles, and managing development rules, designed to work with Cursor or other MCP clients.MIT
- AlicenseAqualityDmaintenanceMCP server providing AI coding assistants with documentation and source code for @gaddario98 React packages, including tools for listing packages, retrieving docs and types, and searching source.5MIT