its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/componentGenerator.ts:55-76 (handler)

  Core implementation of composing multiple components into a layout container using generateComponent recursively and Tailwind layout classes.

  generateComponent.compose = function (
    components: Array<{
      type: string;
      props?: Record<string, any>;
      children?: string;
    }>,
    layout: string = "vertical",
  ): string {
    const layoutClasses: Record<string, string> = {
      vertical: "flex flex-col gap-4",
      horizontal: "flex flex-row gap-4",
      grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
    };
  
    const componentCode = components
      .map((comp) => generateComponent(comp.type, comp.props, comp.children))
      .join("\n  ");
  
    return `<div className="${layoutClasses[layout] || layoutClasses.vertical}">
    ${componentCode}
  </div>`;
  };

• src/index.ts:59-73 (schema)

  Zod schema defining the input parameters for the compose_components tool: components array and optional layout.

  const ComposeComponentsSchema = z.object({
    components: z
      .array(
        z.object({
          type: z.string(),
          props: z.record(z.any()).optional(),
          children: z.string().optional(),
        }),
      )
      .describe("Array of components to compose"),
    layout: z
      .enum(["vertical", "horizontal", "grid"])
      .optional()
      .describe("Layout for composition"),
  });

• src/index.ts:181-206 (registration)

  Tool registration in the ListTools response, including name, description, and inputSchema.

  {
    name: "compose_components",
    description: "Create a composition of multiple its-just-ui components",
    inputSchema: {
      type: "object",
      properties: {
        components: {
          type: "array",
          items: {
            type: "object",
            properties: {
              type: { type: "string" },
              props: { type: "object" },
              children: { type: "string" },
            },
            required: ["type"],
          },
        },
        layout: {
          type: "string",
          enum: ["vertical", "horizontal", "grid"],
          description: "Layout for composition",
        },
      },
      required: ["components"],
    },

• src/index.ts:388-399 (handler)

  MCP CallTool handler that parses arguments using the schema and delegates to generateComponent.compose.

  case "compose_components": {
    const { components, layout } = ComposeComponentsSchema.parse(args);
    const composition = generateComponent.compose(components, layout);
    return {
      content: [
        {
          type: "text",
          text: composition,
        },
      ],
    };
  }