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