NTV Scaffolding MCP Server

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(""); }