NTV Scaffolding MCP Server

import { MCPTool } from "./index.js"; import { COMPONENTS_DB } from "../data/components.js"; export const generateComponentUsageTool: MCPTool = { name: "generate_ntv_component_usage", description: "Generates complete component usage code with TypeScript component class and template", inputSchema: { type: "object", properties: { component: { type: "string", description: "Component name (e.g., 'Button', 'Input')", }, usageType: { type: "string", enum: ["basic", "advanced", "full-form"], description: "Type of usage example: basic, advanced, or full-form", }, componentName: { type: "string", description: "Custom component name for the example (default: ExampleComponent)", }, }, required: ["component"], }, execute: async (args: Record<string, unknown>) => { const componentName = args.component as string; const usageType = (args.usageType as string) || "basic"; const customComponentName = (args.componentName as string) || "ExampleComponent"; const component = COMPONENTS_DB.find( (c) => c.name.toLowerCase() === componentName.toLowerCase() ); if (!component) { throw new Error(`Component '${componentName}' not found`); } const usageExamples = generateUsageExample(component, usageType, customComponentName); return usageExamples; }, }; interface Component { name: string; selector: string; description: string; props: Array<{ name: string; type: string; default?: string; description: string }>; configInterface?: string; } function generateUsageExample( component: Component, usageType: string, customComponentName: string ): Record<string, unknown> { const basePath = `app/${customComponentName.toLowerCase()}`; if (usageType === "basic") { return generateBasicUsage(component, customComponentName); } else if (usageType === "advanced") { return generateAdvancedUsage(component, customComponentName); } else if (usageType === "full-form") { return generateFullFormUsage(component, customComponentName); } return { error: "Unknown usage type" }; } function generateBasicUsage(component: Component, componentName: string) { const tsCode = `import { Component } from '@angular/core'; import { ${component.name} } from '@ntv-scaffolding/component-pantry'; @Component({ selector: 'app-${componentName.toLowerCase()}', standalone: true, imports: [${component.name}], template: \` <${component.selector}> ${component.description} </${component.selector}> \` }) export class ${componentName} {}`; return { type: "basic", componentName, typescript: tsCode, description: `Basic usage of ${component.name} component`, }; } function generateAdvancedUsage(component: Component, componentName: string) { const hasConfig = component.configInterface; const tsCode = `import { Component, signal } from '@angular/core'; import { ${component.name}${hasConfig ? `, ${component.name}Config` : ""} } from '@ntv-scaffolding/component-pantry'; @Component({ selector: 'app-${componentName.toLowerCase()}', standalone: true, imports: [${component.name}], template: \` <${component.selector} [config]="config()" (click)="handleAction()"> Click me </${component.selector}> \` }) export class ${componentName} { config = signal${hasConfig ? `<${component.name}Config>` : ""}({ // Add your configuration here }); handleAction() { console.log('Action triggered'); } }`; return { type: "advanced", componentName, typescript: tsCode, description: `Advanced usage with state management`, }; } function generateFullFormUsage(component: Component, componentName: string) { const tsCode = `import { Component, signal } from '@angular/core'; import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ${component.name}, Button, Card } from '@ntv-scaffolding/component-pantry'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-${componentName.toLowerCase()}', standalone: true, imports: [${component.name}, Button, Card, ReactiveFormsModule, CommonModule], template: \` <lib-card> <form [formGroup]="form" (ngSubmit)="onSubmit()"> <${component.selector} formControlName="field" [config]="fieldConfig"> </${component.selector}> <ntv-button type="submit" [disabled]="form.invalid" [config]="{ variant: 'primary', fullWidth: true }"> Submit </ntv-button> </form> </lib-card> \` }) export class ${componentName} { form: FormGroup; fieldConfig = signal({ variant: 'primary', size: 'md', }); constructor(private fb: FormBuilder) { this.form = this.fb.group({ field: ['', [Validators.required]], }); } onSubmit() { if (this.form.valid) { console.log('Form submitted:', this.form.value); } } }`; return { type: "full-form", componentName, typescript: tsCode, description: `Full form integration example`, }; }