Skip to main content
Glama
getComponentUsagePattern.ts2.6 kB
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 || [], }; }, };

Implementation Reference

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/stephenlumban/component-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server