search_components
Find UI components by name or category to build user interfaces using Basecoat CSS components. Search for buttons, forms, navigation, and other elements with HTML and documentation.
Instructions
Search for components by name or category
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search term (e.g., "button", "form", "navigation") |
Implementation Reference
- server.js:128-150 (handler)The core handler function that implements the logic to search for Basecoat components matching the query in name or category.
async searchComponents(query) { const components = await this.getComponentsList(); const results = []; const queryLower = query.toLowerCase(); for (const [category, categoryComponents] of Object.entries(components)) { for (const component of categoryComponents) { // Search in component name and category if (component.name.toLowerCase().includes(queryLower) || category.toLowerCase().includes(queryLower)) { results.push({ name: component.name, category: category, file: component.file, match: component.name.toLowerCase().includes(queryLower) ? 'name' : 'category' }); } } } return results; } - server.js:221-234 (registration)Registration of the 'search_components' tool in the ListTools response, including name, description, and input schema.
{ 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'], }, }, - server.js:329-350 (handler)The tool dispatcher case that calls the searchComponents handler, formats the results into a markdown response, and returns the MCP content.
case 'search_components': { const results = await this.searchComponents(args.query); let output = `# Search Results for "${args.query}"\n\n`; if (results.length === 0) { output += 'No components found matching your search.\n'; } else { output += `Found ${results.length} matching component(s):\n\n`; for (const result of results) { output += `- **${result.name}** (${result.category}) - matched by ${result.match}\n`; } } return { content: [ { type: 'text', text: output, }, ], }; } - server.js:33-58 (helper)Helper function that scans the components directory to build a list of all available components by category, used by searchComponents.
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; }