compose_components
Combine multiple its-just-ui React components into cohesive layouts using vertical, horizontal, or grid arrangements. Simplify UI composition for enhanced design workflows.
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/index.ts:388-399 (handler)Handler for the compose_components tool in the MCP server switch statement. Parses args 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, }, ], }; }
- src/index.ts:59-73 (schema)Zod schema for validating inputs to compose_components tool.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-207 (registration)Tool registration in the list_tools response, including name, description, and JSON input schema.{ 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"], }, },
- Implementation of the compose function that generates JSX for composed components with specified layout.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>`; };