Form Builder MCP Server

Interactive form editor with drag-and-drop fields, validation rules, live preview, and JSON Schema/React export.

Features

• Drag-and-Drop Form Builder - Intuitive interface for creating forms with field reordering
• Multiple Field Types - Support for text, email, number, select, checkbox, textarea, date, and radio inputs
• Validation Rules - Configure min/max values, string patterns, length constraints, and format validation
• Live Preview - See form changes in real-time as you build
• JSON Schema Export - Generate standard JSON Schema for form validation
• React Component Export - Auto-generate ready-to-use React components from form definitions
• Data Validation - Validate form submissions against the generated schema with detailed error messages

Installation

npm install @gongrzhe/server-form-builder

Usage

As a CLI

npx @gongrzhe/server-form-builder

Claude Desktop Configuration

Add the server to your Claude Desktop configuration:

{
  "mcpServers": {
    "form-builder": {
      "command": "npx",
      "args": ["-y", "@gongrzhe/server-form-builder"]
    }
  }
}

Claude Code Configuration

claude mcp add form-builder -- npx -y @gongrzhe/server-form-builder

Tools

generate-form-schema

Converts form field definitions into a JSON Schema and generates a React component.

Input:

• fields (array) - Array of field definitions with name, type, label, and optional validation rules

Output:

• jsonSchema (object) - Generated JSON Schema (draft-07)
• reactComponent (string) - Generated React component code
• fieldCount (number) - Number of fields in the form

validate-form-data

Validates form data against a JSON Schema and returns validation results with detailed error messages.

Input:

• schema (object) - JSON Schema to validate against
• data (object) - Form data to validate

Output:

• isValid (boolean) - Whether the data passed validation
• errors (array) - Array of validation errors with field names and messages

Example Prompt

Build a contact form with the following fields:
- name (required text field)
- email (required email field)
- subject (required dropdown with options: "General Inquiry", "Support", "Feedback")
- message (required textarea with max length 1000)

Then generate the JSON Schema and React component for this form.

License

MIT