Basecoat UI MCP

Instructions

Implementation Reference

• server.js:258-268 (handler)

  Handler for the 'get_component' tool: calls getComponent method with args.name and formats the response as markdown with HTML code.

  case 'get_component': {
    const component = await this.getComponent(args.name);
    return {
      content: [
        {
          type: 'text',
          text: `# ${component.name}\n\n**Category:** ${component.category}\n**File:** ${component.file}\n\n## HTML Code\n\`\`\`html\n${component.html}\n\`\`\``,
        },
      ],
    };
  }

• server.js:60-82 (helper)

  Core implementation: scans components list, finds the matching component file, reads and returns its HTML content with metadata.

  async getComponent(componentName) {
    const components = await this.getComponentsList();
  
    // Search across all categories
    for (const [category, categoryComponents] of Object.entries(components)) {
      const component = categoryComponents.find(comp => comp.name === componentName);
      if (component) {
        const filePath = path.join(__dirname, 'components', category, component.file);
        try {
          const content = await fs.readFile(filePath, 'utf-8');
          return {
            name: componentName,
            category: category,
            html: content.trim(),
            file: component.file
          };
        } catch (error) {
          throw new Error(`Failed to read component file: ${error.message}`);
        }
      }
    }
  
    throw new Error(`Component '${componentName}' not found`);

• server.js:169-182 (registration)

  Registers the 'get_component' tool in the ListTools response, including name, description, and input schema.

  {
    name: 'get_component',
    description: 'Get HTML code for a specific Basecoat component',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: 'Component name (e.g., "button-primary", "card-basic", "input-with-label")',
        },
      },
      required: ['name'],
    },
  },

• server.js:172-181 (schema)

  Input schema definition for the get_component tool, requiring a 'name' string parameter.

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

• server.js:33-57 (helper)

  Supporting helper: dynamically lists all available components by reading directory structure.

  async getComponentsList() {
    const categories = ['forms', 'navigation', 'feedback', 'interactive', 'layout'];
    const components = {};
  
    for (const category of categories) {
      const categoryPath = path.join(__dirname, 'components', category);
      try {
        const files = await fs.readdir(categoryPath);
        const htmlFiles = files
          .filter(file => file.endsWith('.html'))
          .map(file => ({
            name: file.replace('.html', ''),
            category: category,
            file: file
          }));
  
        if (htmlFiles.length > 0) {
          components[category] = htmlFiles;
        }
      } catch (error) {
        console.error(`Error reading category ${category}:`, error.message);
      }
    }
  
    return components;