list_components
Retrieve all available Basecoat UI components organized by category to help developers find and implement pre-built, accessible interface elements.
Instructions
List all available Basecoat components organized by category
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
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; }