get_component_details

Retrieve detailed documentation and usage examples for shadcn/ui components to understand implementation and properties.

Instructions

Get detailed information about a specific shadcn/ui component

Input Schema

TableJSON Schema

Name	Required	Description	Default
`componentName`	Yes	Name of the shadcn/ui component (e.g., "accordion", "button")

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

shadcn-ui MCP Server