NTV Scaffolding MCP Server

Instructions

Implementation Reference

• src/tools/generateComponentUsage.ts:27-43 (handler)

  The main execute handler that processes input arguments, retrieves the specified component from COMPONENTS_DB, determines the usage type, generates the appropriate usage example code, and returns it.

  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;
  },

• src/tools/generateComponentUsage.ts:8-26 (schema)

  Input schema defining the tool's parameters: component (required string), optional usageType (enum: basic/advanced/full-form), and optional componentName.

  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"],
  },

• src/tools/index.ts:17-26 (registration)

  The tool is registered (as generateComponentUsageTool) in the exported componentTools array used by the main MCP server.

  export const componentTools: MCPTool[] = [
    generateComponentTool,
    getComponentDocTool,
    listComponentsTool,
    generateComponentUsageTool,
    getComponentPropsToolDefinition,
    generateTemplateCodeTool,
    getComponentExamplesTool,
    getComponentUsagePatternTool,
  ];

• src/tools/generateComponentUsage.ts:54-70 (helper)

  Core helper function that dispatches to specific usage generators (basic, advanced, full-form) based on the usageType.

  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" };
  }