list_shadcn_components
Retrieve all available shadcn/ui components to explore options for building user interfaces with documented examples and usage details.
Instructions
Get a list of all available shadcn/ui components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- src/index.ts:181-226 (handler)The handleListComponents method implements the core logic for the list_shadcn_components tool. It checks cache, fetches component list from https://ui.shadcn.com/docs/components using axios and cheerio, parses links to extract component names and URLs, caches the list, and returns it as JSON text content.
private async handleListComponents() { try { if (!this.componentsListCache) { // Fetch the list of components const response = await this.axiosInstance.get(`${this.SHADCN_DOCS_URL}/docs/components`); const $ = cheerio.load(response.data); const components: ComponentInfo[] = []; // Extract component links $("a").each((_, element) => { const link = $(element); const url = link.attr("href"); if (url && url.startsWith("/docs/components/")) { const name = url.split("/").pop() || ""; components.push({ name, description: "", // Will be populated when fetching details url: `${this.SHADCN_DOCS_URL}${url}`, }); } }); this.componentsListCache = components; } return { content: [ { type: "text", text: JSON.stringify(this.componentsListCache, null, 2), }, ], }; } catch (error) { if (axios.isAxiosError(error)) { throw new McpError( ErrorCode.InternalError, `Failed to fetch shadcn/ui components: ${error.message}` ); } throw error; } } - src/index.ts:105-113 (registration)Registration of the list_shadcn_components tool in the ListToolsRequestSchema handler, defining name, description, and empty input schema (no parameters required).
{ name: "list_shadcn_components", description: "Get a list of all available shadcn/ui components", inputSchema: { type: "object", properties: {}, required: [], }, }, - src/index.ts:108-112 (schema)Input schema for list_shadcn_components tool, specifying an empty object with no properties or required fields.
inputSchema: { type: "object", properties: {}, required: [], }, - src/index.ts:161-162 (handler)Dispatch case in the CallToolRequestSchema handler that routes calls to list_shadcn_components to the handleListComponents method.
case "list_shadcn_components": return await this.handleListComponents();