generate_component
Create React components using its-just-ui with custom props, styling, and content to build user interface elements.
Instructions
Generate an its-just-ui component with specified props and styling
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Name of the its-just-ui component | |
| props | No | Props to pass to the component | |
| children | No | Children content for the component | |
| className | No | Additional Tailwind CSS classes |
Implementation Reference
- src/tools/componentGenerator.ts:4-25 (handler)Core handler function that generates JSX code for the specified its-just-ui component using props, children, and className. Fetches component from registry, validates props, formats them, and constructs the JSX string.
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 defining the input validation for the generate_component tool, including component name, optional props, children, and 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:132-157 (registration)Registration of the generate_component tool in the list_tools response, including name, description, and input schema.
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 CallToolRequest handler case for generate_component: parses input with schema and invokes the generateComponent function to produce the output.
case "generate_component": { const { component, props, children, className } = GenerateComponentSchema.parse(args); const code = generateComponent(component, props, children, className); return { content: [ { type: "text", text: code, }, ], }; }