Components Build MCP

Instructions

Implementation Reference

• src/tools/index.ts:167-181 (registration)

  Registration of the 'get_template' tool in the getToolDefinitions() array, including name, description, and input schema.

  {
    name: 'get_template',
    description: 'Get a component template for reference',
    inputSchema: {
      type: 'object',
      properties: {
        template: {
          type: 'string',
          description: 'Template name',
          enum: ['button', 'card', 'input', 'basic', 'composable'],
        },
      },
      required: ['template'],
    },
  },

• src/tools/index.ts:506-548 (handler)

  The handler function that executes the get_template tool logic: extracts the template name from args, generates the corresponding component template code using imported generators, formats it with description, and returns as ToolResult.

  function handleGetTemplate(args: Record<string, unknown>): ToolResult {
    const template = args.template as string;
  
    let code: string;
    let description: string;
  
    switch (template) {
      case 'button':
        code = generateButtonComponent();
        description = 'A fully accessible button component with variants, sizes, and asChild support.';
        break;
      case 'card':
        code = generateCardComponent();
        description = 'A composable card component with Header, Title, Description, Content, and Footer sub-components.';
        break;
      case 'input':
        code = generateInputComponent();
        description = 'An accessible input component with proper focus states and styling.';
        break;
      case 'composable':
        code = generateComposableComponent({ name: 'Example' });
        description = 'A composable component template with Root, Trigger, and Content pattern using Context.';
        break;
      case 'basic':
      default:
        code = generateBasicComponent({ name: 'Example', hasVariants: true });
        description = 'A basic component template with CVA variants.';
        break;
    }
  
    const text = `# Template: ${template}
  
  ${description}
  
  \`\`\`tsx
  ${code}
  \`\`\`
  `;
  
    return {
      content: [{ type: 'text', text }],
    };
  }

• src/tools/index.ts:249-250 (registration)

  Dispatch registration in the executeTool switch statement, routing 'get_template' calls to handleGetTemplate.

  case 'get_template':
    return handleGetTemplate(args);