generate_component
Create its-just-ui React components with custom props, children content, and Tailwind CSS classes for streamlined UI development.
Instructions
Generate an its-just-ui component with specified props and styling
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| children | No | Children content for the component | |
| className | No | Additional Tailwind CSS classes | |
| component | Yes | Name of the its-just-ui component | |
| props | No | Props to pass to the component |
Implementation Reference
- src/tools/componentGenerator.ts:4-25 (handler)Core handler function that generates JSX code for the its-just-ui component using the registry, validates props, formats them, and handles children.export function generateComponent( componentName: string, props?: Record<string, any>, children?: string, className?: string, ): string { const component = componentRegistry.getComponent(componentName); if (!component) { throw new Error(`Component "${componentName}" not found in registry`); } const sanitizedProps = validateProps(props); const propsString = formatProps(sanitizedProps, className); const childrenContent = children || ""; if (childrenContent) { return `<${componentName}${propsString}>\n ${childrenContent}\n</${componentName}>`; } else { return `<${componentName}${propsString} />`; } }
- src/index.ts:29-42 (schema)Zod schema for validating input parameters to the generate_component tool: component (required), props, children, className.const GenerateComponentSchema = z.object({ component: z .string() .describe("Name of the its-just-ui component to generate"), props: z .record(z.any()) .optional() .describe("Props to pass to the component"), children: z .string() .optional() .describe("Children content for the component"), className: z.string().optional().describe("Additional Tailwind CSS classes"), });
- src/index.ts:131-157 (registration)Tool registration in the ListTools response, defining name, description, and inputSchema for generate_component.{ name: "generate_component", description: "Generate an its-just-ui component with specified props and styling", inputSchema: { type: "object", properties: { component: { type: "string", description: "Name of the its-just-ui component", }, props: { type: "object", description: "Props to pass to the component", }, children: { type: "string", description: "Children content for the component", }, className: { type: "string", description: "Additional Tailwind CSS classes", }, }, required: ["component"], }, },
- src/index.ts:361-373 (handler)MCP tool dispatch handler in CallToolRequest that parses args with schema and calls the generateComponent function.case "generate_component": { const { component, props, children, className } = GenerateComponentSchema.parse(args); const code = generateComponent(component, props, children, className); return { content: [ { type: "text", text: code, }, ], }; }
- Helper function used by generateComponent to format props into JSX attribute strings, handling different value types.function formatProps(props?: Record<string, any>, className?: string): string { if (!props && !className) return ""; const allProps: Record<string, any> = { ...props }; if (className) { allProps.className = className; } const propsArray = Object.entries(allProps) .map(([key, value]) => { if (typeof value === "boolean") { return value ? key : ""; } else if (typeof value === "string") { return `${key}="${value}"`; } else if (typeof value === "number") { return `${key}={${value}}`; } else if (typeof value === "object") { return `${key}={${JSON.stringify(value)}}`; } else if (typeof value === "function") { return `${key}={${value.toString()}}`; } return ""; }) .filter(Boolean); return propsArray.length > 0 ? " " + propsArray.join(" ") : ""; }