shadcn-ui MCP Server

Instructions

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();