generate_ntv_template_code

Instructions

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}]`,
        },
      };
    },
  };

• src/tools/generateTemplateCode.ts:8-39 (schema)

  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,
  ];