its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/utilityTools.ts:381-492 (handler)

  The primary handler function for the 'create_form' tool. It generates complete React form code using its-just-ui components based on provided fields, layout, and validation options. It dynamically creates form fields, imports necessary components, and optionally adds client-side validation.
  createForm( fields: FormField[], layout?: string, includeValidation?: boolean, ): string { const layoutClass = layout === "two-column" ? "grid grid-cols-1 md:grid-cols-2 gap-4" : layout === "inline" ? "flex flex-wrap gap-4" : "space-y-4"; const formFields = fields .map((field) => { switch (field.type) { case "text": case "email": case "password": case "number": return ` <Input label="${field.label}" name="${field.name}" type="${field.type}" placeholder="${field.placeholder || `Enter ${field.label.toLowerCase()}`}" ${field.required ? "required" : ""} />`; case "select": return ` <Select label="${field.label}" name="${field.name}" options={${field.options ? JSON.stringify(field.options) : "[]"}} placeholder="${field.placeholder || `Select ${field.label.toLowerCase()}`}" ${field.required ? "required" : ""} />`; case "checkbox": return ` <Checkbox label="${field.label}" name="${field.name}" />`; case "radio": return ` <RadioGroup label="${field.label}" name="${field.name}" options={${field.options ? JSON.stringify(field.options) : "[]"}} ${field.required ? "required" : ""} />`; case "date": return ` <DatePicker label="${field.label}" name="${field.name}" placeholder="${field.placeholder || "Select date"}" ${field.required ? "required" : ""} />`; case "color": return ` <ColorPicker label="${field.label}" name="${field.name}" />`; case "file": return ` <Upload label="${field.label}" name="${field.name}" ${field.required ? "required" : ""} />`; default: return ` <Input label="${field.label}" name="${field.name}" ${field.required ? "required" : ""} />`; } }) .join("\n\n"); let formCode = `import { ${this.getRequiredComponents(fields).join(", ")} } from 'its-just-ui'; ${includeValidation ? "import { useState } from 'react';" : ""} export default function CustomForm() { ${includeValidation ? this.generateValidationState(fields) : ""} const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); ${includeValidation ? this.generateValidationLogic(fields) : "// Handle form submission"} }; return ( <form onSubmit={handleSubmit} className="max-w-2xl mx-auto p-6"> <div className="${layoutClass}"> ${formFields} </div> <div className="mt-6 flex gap-4"> <Button type="submit" variant="primary"> Submit </Button> <Button type="reset" variant="outline"> Reset </Button> </div> </form> ); }`; return formCode; },
• src/index.ts:96-120 (schema)

  Zod schema defining the input structure for the 'create_form' tool, including fields array with types, labels, etc., optional layout and validation flag.
  const CreateFormSchema = z.object({ fields: z.array( z.object({ name: z.string(), type: z.enum([ "text", "email", "password", "number", "select", "checkbox", "radio", "date", "color", "file", ]), label: z.string(), required: z.boolean().optional(), placeholder: z.string().optional(), options: z.array(z.string()).optional(), }), ), layout: z.enum(["single-column", "two-column", "inline"]).optional(), includeValidation: z.boolean().optional(), });
• src/index.ts:278-322 (registration)

  Tool registration in the list_tools response, defining name, description, and inputSchema for 'create_form'.
  { name: "create_form", description: "Generate a form structure using its-just-ui form components", inputSchema: { type: "object", properties: { fields: { type: "array", items: { type: "object", properties: { name: { type: "string" }, type: { type: "string", enum: [ "text", "email", "password", "number", "select", "checkbox", "radio", "date", "color", "file", ], }, label: { type: "string" }, required: { type: "boolean" }, placeholder: { type: "string" }, options: { type: "array", items: { type: "string" } }, }, required: ["name", "type", "label"], }, }, layout: { type: "string", enum: ["single-column", "two-column", "inline"], }, includeValidation: { type: "boolean" }, }, required: ["fields"], }, },
• src/index.ts:445-461 (handler)

  MCP server handler case for 'create_form' tool call, which parses input with schema and delegates to utilityTools.createForm.
  case "create_form": { const { fields, layout, includeValidation } = CreateFormSchema.parse(args); const formCode = utilityTools.createForm( fields, layout, includeValidation, ); return { content: [ { type: "text", text: formCode, }, ], }; }
• src/tools/utilityTools.ts:1-8 (schema)

  TypeScript interface defining the structure of form fields used by the createForm handler.
  export interface FormField { name: string; type: string; label: string; required?: boolean; placeholder?: string; options?: string[]; }