get_component
Retrieve HTML code for Basecoat UI components to build accessible user interfaces. Specify a component name to get its HTML structure.
Instructions
Get HTML code for a specific Basecoat component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name (e.g., "button-primary", "card-basic", "input-with-label") |
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;