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[];
  }