Shadcn UI MCP Server

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
      }
  }