Basecoat UI MCP

Instructions

Implementation Reference

• server.js:270-290 (handler)

  Handler for the 'list_components' tool. Retrieves the list of components using getComponentsList() and formats them into a markdown output listing components by category.

  case 'list_components': {
    const components = await this.getComponentsList();
    let output = '# Basecoat UI Components\n\n';
  
    for (const [category, categoryComponents] of Object.entries(components)) {
      output += `## ${category.charAt(0).toUpperCase() + category.slice(1)}\n\n`;
      for (const component of categoryComponents) {
        output += `- **${component.name}** (${component.file})\n`;
      }
      output += '\n';
    }
  
    return {
      content: [
        {
          type: 'text',
          text: output,
        },
      ],
    };
  }

• server.js:184-190 (schema)

  Input schema definition for the 'list_components' tool, which takes no parameters.

    name: 'list_components',
    description: 'List all available Basecoat components organized by category',
    inputSchema: {
      type: 'object',
      properties: {},
    },
  },

• server.js:166-251 (registration)

  Registration of tools list including 'list_components' in the ListToolsRequestSchema handler.

  this.server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: [
        {
          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'],
          },
        },
        {
          name: 'list_components',
          description: 'List all available Basecoat components organized by category',
          inputSchema: {
            type: 'object',
            properties: {},
          },
        },
        {
          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'],
          },
        },
        {
          name: 'get_setup',
          description: 'Get Basecoat CSS setup code with CDN links',
          inputSchema: {
            type: 'object',
            properties: {},
          },
        },
        {
          name: 'get_theme_script',
          description: 'Get theme switcher script for dark/light mode',
          inputSchema: {
            type: 'object',
            properties: {},
          },
        },
        {
          name: 'search_components',
          description: 'Search for components by name or category',
          inputSchema: {
            type: 'object',
            properties: {
              query: {
                type: 'string',
                description: 'Search term (e.g., "button", "form", "navigation")',
              },
            },
            required: ['query'],
          },
        },
        {
          name: 'get_category',
          description: 'Get all components in a specific category',
          inputSchema: {
            type: 'object',
            properties: {
              category: {
                type: 'string',
                description: 'Category name (forms, navigation, feedback, interactive, layout)',
              },
            },
            required: ['category'],
          },
        },
      ],
    };
  });

• server.js:33-58 (helper)

  Helper method getComponentsList() that scans the components directory for HTML files organized by category and returns a structured object.

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