create_form
Generate form structures with its-just-ui by defining fields (text, email, select, etc.), selecting layout (single-column, two-column, inline), and enabling validation.
Instructions
Generate a form structure using its-just-ui form components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fields | Yes | ||
| layout | No | ||
| includeValidation | No |
Implementation Reference
- src/tools/utilityTools.ts:381-492 (handler)The `createForm` method on `utilityTools` object. Takes FormField[], optional layout, and optional includeValidation, generates a complete form component JSX code using its-just-ui components.
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 `CreateFormSchema` defining input validation for create_form: fields array (name, type, label, required, placeholder, options), optional layout (single-column/two-column/inline), optional includeValidation boolean.
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 with name 'create_form', description, and inputSchema JSON schema for MCP tool listing.
{ 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)The switch case handler in CallToolRequestHandler that invokes CreateFormSchema.parse(args) and utilityTools.createForm(), returning the generated form code.
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:494-527 (helper)Helper `getRequiredComponents` that determines which UI components need to be imported based on field types.
getRequiredComponents(fields: FormField[]): string[] { const components = new Set(["Button"]); fields.forEach((field) => { switch (field.type) { case "text": case "email": case "password": case "number": components.add("Input"); break; case "select": components.add("Select"); break; case "checkbox": components.add("Checkbox"); break; case "radio": components.add("RadioGroup"); break; case "date": components.add("DatePicker"); break; case "color": components.add("ColorPicker"); break; case "file": components.add("Upload"); break; } }); return Array.from(components).sort(); },