get_ntv_component_usage_pattern
Retrieve Angular standalone component usage patterns for specific NTV components to implement correct component integration in your Angular applications.
Instructions
Gets the proper Angular standalone component usage pattern for a specific NTV component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Input', 'Card') |
Implementation Reference
- 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 || [], }; }, - 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, ];