generate_ntv_component_file

Instructions

Implementation Reference

• src/tools/generateComponent.ts:35-75 (handler)

  The main execute handler that orchestrates generation of TS, HTML, CSS, and spec files for the NTV component.

  execute: async (args: Record<string, unknown>) => {
    const componentName = args.component as string;
    const filename = (args.filename as string) || toKebabCase(componentName);
    const selector = (args.selector as string) || `app-${filename}`;
    const includeStyles = args.includeStyles !== false;
    const includeTests = args.includeTests !== false;
  
    const component = COMPONENTS_DB.find(
      (c) => c.name.toLowerCase() === componentName.toLowerCase()
    );
  
    if (!component) {
      throw new Error(`Component '${componentName}' not found`);
    }
  
    const files: Record<string, string> = {};
  
    // Generate TypeScript file
    files[`${filename}.ts`] = generateTypeScriptFile(component, selector);
  
    // Generate HTML template
    files[`${filename}.html`] = generateTemplateFile(component, selector);
  
    // Generate CSS file
    if (includeStyles) {
      files[`${filename}.css`] = generateCSSFile();
    }
  
    // Generate test file
    if (includeTests) {
      files[`${filename}.spec.ts`] = generateTestFile(component, selector, filename);
    }
  
    return {
      component: componentName,
      files,
      componentClass: toPascalCase(filename),
      selector,
      note: "All files are ready to be created in your Angular project",
    };
  },

• src/tools/generateComponent.ts:8-34 (schema)

  Input schema defining parameters for component name, filename, selector, and optional flags for styles and tests.

  inputSchema: {
    type: "object",
    properties: {
      component: {
        type: "string",
        description: "Component name (e.g., 'Button', 'Input')",
      },
      filename: {
        type: "string",
        description:
          "Output filename without extension (e.g., 'my-button'). Default: component name in kebab-case",
      },
      selector: {
        type: "string",
        description: "Angular component selector (e.g., 'app-my-button')",
      },
      includeStyles: {
        type: "boolean",
        description: "Include CSS file template. Default: true",
      },
      includeTests: {
        type: "boolean",
        description: "Include Jest/Jasmine test template. Default: true",
      },
    },
    required: ["component"],
  },

• src/tools/index.ts:17-26 (registration)

  Registration of the tool by including it in the componentTools array exported for use by the MCP server.

  export const componentTools: MCPTool[] = [
    generateComponentTool,
    getComponentDocTool,
    listComponentsTool,
    generateComponentUsageTool,
    getComponentPropsToolDefinition,
    generateTemplateCodeTool,
    getComponentExamplesTool,
    getComponentUsagePatternTool,
  ];

• src/tools/generateComponent.ts:78-98 (helper)

  Helper function generating the Angular TypeScript component file template.

  function generateTypeScriptFile(component: any, selector: string): string {
    const className = toPascalCase(selector.replace("app-", ""));
    return `import { Component, signal } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ${component.name}${component.configInterface ? `, ${component.configInterface}` : ""} } from '@ntv-scaffolding/component-pantry';
  
  @Component({
    selector: '${selector}',
    standalone: true,
    imports: [CommonModule, ${component.name}],
    templateUrl: './${selector.replace("app-", "")}.html',
    styleUrls: ['./${selector.replace("app-", "")}.css'],
  })
  export class ${className} {
    // Component logic here
    
    onAction() {
      console.log('Action triggered');
    }
  }`;
  }

• src/tools/generateComponent.ts:151-162 (helper)

  Utility functions for converting strings between kebab-case and PascalCase, used for filename and class name generation.

  function toKebabCase(str: string): string {
    return str
      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
      .toLowerCase();
  }
  
  function toPascalCase(str: string): string {
    return str
      .split("-")
      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
      .join("");
  }