generate_ntv_template_code
Generate HTML template code for NTV Angular components with custom variants, sizes, and properties to build consistent UI elements.
Instructions
Generates HTML template code for an NTV component with optional custom configuration
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Input') | |
| variant | No | Visual variant (e.g., 'primary', 'secondary' for Button) | |
| size | No | Component size (e.g., 'sm', 'md', 'lg') | |
| content | No | Content/text to display inside component | |
| additionalProps | No | Additional properties as key-value pairs (e.g., {disabled: true}) | |
| useConfigPattern | No | Use the config object pattern (recommended for multiple props). Default: true |
Implementation Reference
- src/tools/generateTemplateCode.ts:40-100 (handler)The main handler function that processes input arguments, retrieves component data from COMPONENTS_DB, generates HTML template code using either config pattern or individual props, and returns the template along with import and decorator info.execute: async (args: Record<string, unknown>) => { const componentName = args.component as string; const variant = args.variant as string | undefined; const size = args.size as string | undefined; const content = args.content as string | undefined; const additionalProps = args.additionalProps as Record<string, unknown> | undefined; const useConfigPattern = args.useConfigPattern !== false; const component = COMPONENTS_DB.find( (c) => c.name.toLowerCase() === componentName.toLowerCase() ); if (!component) { throw new Error(`Component '${componentName}' not found`); } let template = ""; if (useConfigPattern && component.configInterface) { // Generate config pattern template const configProps: Record<string, unknown> = {}; if (variant) configProps.variant = variant; if (size) configProps.size = size; if (additionalProps) { Object.assign(configProps, additionalProps); } template = `<${component.selector} [config]="${JSON.stringify(configProps).replace(/"/g, "'")}">\n ${content || component.description}\n</${component.selector}>`; } else { // Generate individual props template let props = ""; if (variant) props += ` variant="${variant}"`; if (size) props += ` size="${size}"`; if (additionalProps) { for (const [key, value] of Object.entries(additionalProps)) { if (typeof value === "string") { props += ` ${key}="${value}"`; } else if (typeof value === "boolean") { props += ` [${key}]="${value}"`; } else { props += ` [${key}]='${JSON.stringify(value)}'`; } } } template = `<${component.selector}${props}>\n ${content || component.description}\n</${component.selector}>`; } return { component: componentName, template, imports: `import { ${component.name} } from '@ntv-scaffolding/component-pantry';`, componentDecorator: { selector: `app-example`, standalone: true, imports: `[${component.name}]`, }, }; }, };
- Defines the input schema for the tool, specifying properties like component, variant, size, content, additionalProps, and useConfigPattern, with 'component' as required.inputSchema: { type: "object", properties: { component: { type: "string", description: "Component name (e.g., 'Button', 'Input')", }, variant: { type: "string", description: "Visual variant (e.g., 'primary', 'secondary' for Button)", }, size: { type: "string", description: "Component size (e.g., 'sm', 'md', 'lg')", }, content: { type: "string", description: "Content/text to display inside component", }, additionalProps: { type: "object", description: "Additional properties as key-value pairs (e.g., {disabled: true})", }, useConfigPattern: { type: "boolean", description: "Use the config object pattern (recommended for multiple props). Default: true", }, }, required: ["component"], },
- src/tools/index.ts:17-26 (registration)Registers the generateTemplateCodeTool as part of the componentTools array, making it available as an MCP tool.export const componentTools: MCPTool[] = [ generateComponentTool, getComponentDocTool, listComponentsTool, generateComponentUsageTool, getComponentPropsToolDefinition, generateTemplateCodeTool, getComponentExamplesTool, getComponentUsagePatternTool, ];