list-components
Discover and manage Shadcn UI components by listing available options for integration. Use this tool to explore and select components within compatible AI tools for streamlined UI development.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- src/handlers.ts:14-23 (handler)The main handler function for the 'list-components' tool. It fetches the components page from shadcn/ui, parses the HTML to extract component names using parseComponentsFromHtml, and returns the list as JSON.export const listComponents = async () => { try { const response = await fetchWithRetry(`${BASE_URL}/components`); const html = await response.text(); const components = parseComponentsFromHtml(html); return createResponse(JSON.stringify(components, null, 2)); } catch (error) { return handleError(error, "Error fetching components list"); } }
- src/index.ts:10-15 (registration)Registration of the 'list-components' tool in the toolDefinitions object, specifying description, empty input parameters/schema, and linking to the listComponents handler. The tool is later registered via server.tool() in a loop."list-components": { description: "Get the list of available shadcn/ui components", parameters: {}, toolSchema: {}, handler: listComponents },
- src/index.ts:12-13 (schema)Input schema for the 'list-components' tool, which takes no parameters (empty objects).parameters: {}, toolSchema: {},
- src/helpers.ts:281-306 (helper)Key helper function used by the handler to parse the fetched HTML and extract the list of available shadcn/ui component names using Cheerio.export function parseComponentsFromHtml(html: string): string[] { if (!html || typeof html !== 'string') { throw new Error('Invalid HTML content'); } try { const $ = loadCheerio(html); const components = $('a[href^="/docs/components/"]') .map((_, el) => { const href = $(el).attr('href'); return href?.split('/').pop(); }) .get() .filter((name): name is string => Boolean(name)) .sort(); if (components.length === 0) { console.error('Warning: No components found in HTML'); } return components; } catch (error) { throw new Error(`Failed to parse components: ${error instanceof Error ? error.message : String(error)}`); } }
- src/helpers.ts:98-111 (helper)Helper function for robustly fetching the components page with retries and exponential backoff, used in the handler.export async function fetchWithRetry(url: string, retries = RETRY_ATTEMPTS, delay = RETRY_DELAY_MS): Promise<Response> { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error ${response.status}: ${response.statusText}`); } return response; } catch (error) { if (retries <= 1) throw error; await new Promise(resolve => setTimeout(resolve, delay)); return fetchWithRetry(url, retries - 1, delay * 2); // Exponential backoff } }