NTV Scaffolding MCP Server

Instructions

Implementation Reference

• src/tools/getComponentUsagePattern.ts:18-81 (handler)

  The async execute function that handles the tool's logic: retrieves the component from COMPONENTS_DB, generates import statements, usage examples for standalone components and NgModules, template usage, key points, property types, and events.

    execute: async (args: Record<string, unknown>) => {
      const componentName = args.component as string;
      const component = COMPONENTS_DB.find(
        (c) => c.name.toLowerCase() === componentName.toLowerCase()
      );
  
      if (!component) {
        throw new Error(`Component '${componentName}' not found`);
      }
  
      const importStatement = `import { ${component.name} } from '@ntv-scaffolding/component-pantry';`;
      
      const standaloneUsage = `@Component({
    selector: 'app-example',
    standalone: true,
    imports: [${component.name}],  // ← Import the component
    template: \`
      <${component.selector}
        [config]="{ /* config options */ }">
        Content here
      </${component.selector}>
    \`
  })
  export class ExampleComponent {}`;
  
      const ngModuleUsage = `// If using NgModule (older pattern):
  import { NgModule } from '@angular/core';
  import { ${component.name} } from '@ntv-scaffolding/component-pantry';
  
  @NgModule({
    imports: [${component.name}],  // ← Import the component
  })
  export class MyModule {}`;
  
      const templateUsage = `<!-- In template, use the selector: -->
  <${component.selector}
    [config]="{ /* configuration */ }">
    Your content
  </${component.selector}>`;
  
      return {
        component: componentName,
        selector: component.selector,
        importStatement,
        standalonePattern: standaloneUsage,
        ngModulePattern: ngModuleUsage,
        templateUsage,
        keyPoints: [
          "✅ This is an Angular Standalone Component (not a Web Component)",
          "✅ Must be imported in your component's imports array",
          "✅ Use the selector as an HTML element in templates",
          "✅ Pass configuration via [config] property binding",
          "✅ For standalone components: add to component imports",
          "✅ For NgModule: add to module imports",
          "✅ Requires @angular/core and other Angular dependencies"
        ],
        propertyTypes: component.props.map(p => ({
          name: p.name,
          type: p.type,
          default: p.default,
        })),
        events: component.events || [],
      };
    },

• src/tools/getComponentUsagePattern.ts:8-17 (schema)

  Defines the input schema requiring a 'component' string parameter.

  inputSchema: {
    type: "object",
    properties: {
      component: {
        type: "string",
        description: "Component name (e.g., 'Button', 'Input', 'Card')",
      },
    },
    required: ["component"],
  },

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

  The getComponentUsagePatternTool is imported and registered in the componentTools array, which lists all MCP tools.

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