compose_components
Combine multiple its-just-ui React components into structured layouts for building complex user interfaces. Specify components and choose vertical, horizontal, or grid arrangements.
Instructions
Create a composition of multiple its-just-ui components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| components | Yes | ||
| layout | No | Layout for composition |
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, }, ], }; }