shadcn-ui MCP Server

Instructions

Implementation Reference

• src/index.ts:302-321 (handler)

  Main handler function that processes the get_component_details tool request, validates input, checks/uses cache, fetches details if necessary, caches the result, and returns a formatted success response.

  private async handleGetComponentDetails(args: any) {
    const componentName = this.validateComponentName(args);
  
    try {
      // Check cache first
      if (this.componentCache.has(componentName)) {
        return this.createSuccessResponse(this.componentCache.get(componentName));
      }
  
      // Fetch component details
      const componentInfo = await this.fetchComponentDetails(componentName);
      
      // Save to cache
      this.componentCache.set(componentName, componentInfo);
      
      return this.createSuccessResponse(componentInfo);
    } catch (error) {
      this.handleAxiosError(error, `Component "${componentName}"`);
    }
  }

• src/index.ts:117-126 (schema)

  Input schema for the get_component_details tool, defining the required 'componentName' parameter as a string.

  inputSchema: {
    type: "object",
    properties: {
      componentName: {
        type: "string",
        description: "Name of the shadcn/ui component (e.g., \"accordion\", \"button\")",
      },
    },
    required: ["componentName"],
  },

• src/index.ts:114-127 (registration)

  Registration of the 'get_component_details' tool in the ListToolsRequestSchema response, including name, description, and input schema.

  {
    name: "get_component_details",
    description: "Get detailed information about a specific shadcn/ui component",
    inputSchema: {
      type: "object",
      properties: {
        componentName: {
          type: "string",
          description: "Name of the shadcn/ui component (e.g., \"accordion\", \"button\")",
        },
      },
      required: ["componentName"],
    },
  },

• src/index.ts:163-164 (registration)

  Switch case in the CallToolRequestSchema handler that routes requests for 'get_component_details' to the specific handler function.

  case "get_component_details":
    return await this.handleGetComponentDetails(request.params.arguments);

• src/index.ts:328-359 (helper)

  Core helper function that fetches the component's documentation page, parses it with Cheerio to extract details like description, installation, usage, source URL, and props/variants.

  private async fetchComponentDetails(componentName: string): Promise<ComponentInfo> {
    const response = await this.axiosInstance.get(`${this.SHADCN_DOCS_URL}/docs/components/${componentName}`);
    const $ = cheerio.load(response.data);
    
    // Extract component information
    const title = $("h1").first().text().trim();
    
    // Extract description properly
    const description = this.extractDescription($);
    
    // Extract GitHub source code link
    const sourceUrl = `${this.SHADCN_GITHUB_URL}/tree/main/apps/www/registry/default/ui/${componentName}`;
    
    // Extract installation instructions
    const installation = this.extractInstallation($);
    
    // Extract usage examples
    const usage = this.extractUsage($);
    
    // Extract variant information
    const props = this.extractVariants($, componentName);
    
    return {
      name: componentName,
      description,
      url: `${this.SHADCN_DOCS_URL}/docs/components/${componentName}`,
      sourceUrl,
      installation: installation.trim(),
      usage: usage.trim(),
      props: Object.keys(props).length > 0 ? props : undefined,
    };
  }