Basecoat UI MCP

Instructions

Implementation Reference

• server.js:85-106 (handler)

  Core handler function that implements the logic for the 'get_usage' tool by searching for and reading usage documentation Markdown files for the specified component across different categories.

  async getUsageDocumentation(componentName) {
    const usageCategories = ['forms', 'navigation', 'feedback', 'interactive', 'layout'];
  
    for (const category of usageCategories) {
      const usageFile = `${componentName}-usage.md`;
      const usagePath = path.join(__dirname, 'usage', category, usageFile);
  
      try {
        const content = await fs.readFile(usagePath, 'utf-8');
        return {
          component: componentName,
          category: category,
          documentation: content.trim()
        };
      } catch (error) {
        // Continue to next category
        continue;
      }
    }
  
    throw new Error(`Usage documentation for '${componentName}' not found`);
  }

• server.js:191-204 (registration)

  Registration of the 'get_usage' tool in the list of available tools, including name, description, and input schema.

  {
    name: 'get_usage',
    description: 'Get usage documentation for a component',
    inputSchema: {
      type: 'object',
      properties: {
        component: {
          type: 'string',
          description: 'Component name (e.g., "button", "card", "input")',
        },
      },
      required: ['component'],
    },
  },

• server.js:292-302 (handler)

  Dispatch handler in the CallToolRequestSchema that invokes getUsageDocumentation and returns the documentation as text content.

  case 'get_usage': {
    const usage = await this.getUsageDocumentation(args.component);
    return {
      content: [
        {
          type: 'text',
          text: usage.documentation,
        },
      ],
    };
  }

• server.js:194-203 (schema)

  Input schema definition for the 'get_usage' tool, specifying the required 'component' parameter.

  inputSchema: {
    type: 'object',
    properties: {
      component: {
        type: 'string',
        description: 'Component name (e.g., "button", "card", "input")',
      },
    },
    required: ['component'],
  },