# 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

```bash
npm install
```

## Usage

### Development (run without compiling)
```bash
npm run dev
```

### Production
```bash
npm run build
npm start
```

### MCP Inspector (interactive debugging)
```bash
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`):

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

Or, if installed globally via npm:

```json
{
  "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) |
# ypeScript-Developer-MCP-Server