Skip to main content
Glama
generateTemplateCode.ts3.34 kB
import { MCPTool } from "./index.js"; import { COMPONENTS_DB } from "../data/components.js"; export const generateTemplateCodeTool: MCPTool = { name: "generate_ntv_template_code", description: "Generates HTML template code for an NTV component with optional custom configuration", inputSchema: { type: "object", properties: { component: { type: "string", description: "Component name (e.g., 'Button', 'Input')", }, variant: { type: "string", description: "Visual variant (e.g., 'primary', 'secondary' for Button)", }, size: { type: "string", description: "Component size (e.g., 'sm', 'md', 'lg')", }, content: { type: "string", description: "Content/text to display inside component", }, additionalProps: { type: "object", description: "Additional properties as key-value pairs (e.g., {disabled: true})", }, useConfigPattern: { type: "boolean", description: "Use the config object pattern (recommended for multiple props). Default: true", }, }, required: ["component"], }, execute: async (args: Record<string, unknown>) => { const componentName = args.component as string; const variant = args.variant as string | undefined; const size = args.size as string | undefined; const content = args.content as string | undefined; const additionalProps = args.additionalProps as Record<string, unknown> | undefined; const useConfigPattern = args.useConfigPattern !== false; const component = COMPONENTS_DB.find( (c) => c.name.toLowerCase() === componentName.toLowerCase() ); if (!component) { throw new Error(`Component '${componentName}' not found`); } let template = ""; if (useConfigPattern && component.configInterface) { // Generate config pattern template const configProps: Record<string, unknown> = {}; if (variant) configProps.variant = variant; if (size) configProps.size = size; if (additionalProps) { Object.assign(configProps, additionalProps); } template = `<${component.selector} [config]="${JSON.stringify(configProps).replace(/"/g, "'")}">\n ${content || component.description}\n</${component.selector}>`; } else { // Generate individual props template let props = ""; if (variant) props += ` variant="${variant}"`; if (size) props += ` size="${size}"`; if (additionalProps) { for (const [key, value] of Object.entries(additionalProps)) { if (typeof value === "string") { props += ` ${key}="${value}"`; } else if (typeof value === "boolean") { props += ` [${key}]="${value}"`; } else { props += ` [${key}]='${JSON.stringify(value)}'`; } } } template = `<${component.selector}${props}>\n ${content || component.description}\n</${component.selector}>`; } return { component: componentName, template, imports: `import { ${component.name} } from '@ntv-scaffolding/component-pantry';`, componentDecorator: { selector: `app-example`, standalone: true, imports: `[${component.name}]`, }, }; }, };

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