import { MCPTool } from "./index.js";
import { COMPONENTS_DB } from "../data/components.js";
export const getComponentUsagePatternTool: MCPTool = {
name: "get_ntv_component_usage_pattern",
description:
"Gets the proper Angular standalone component usage pattern for a specific NTV component",
inputSchema: {
type: "object",
properties: {
component: {
type: "string",
description: "Component name (e.g., 'Button', 'Input', 'Card')",
},
},
required: ["component"],
},
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 || [],
};
},
};