get_component_details
Retrieve documentation and usage details for shadcn/ui components to understand implementation and examples.
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:309-330 (handler)The primary handler function for the 'get_component_details' tool. It validates the input component name, checks the component cache, fetches details using fetchComponentDetails if not cached, caches the result, and returns a standardized JSON 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-132 (registration)Registration of the 'get_component_details' tool in the ListToolsRequestSchema handler, including name, description, and input schema specifying the required 'componentName' parameter.{ 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:169-170 (handler)Switch case in CallToolRequestSchema handler that routes calls to the 'get_component_details' tool to the handleGetComponentDetails method.case 'get_component_details': return await this.handleGetComponentDetails(request.params.arguments);
- src/index.ts:337-372 (helper)Key helper function called by the handler to fetch and parse detailed component information from the shadcn/ui documentation website using axios and cheerio, extracting description, installation, usage, and props.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, }; }
- src/index.ts:244-252 (helper)Helper function used by the handler to validate and normalize the 'componentName' input parameter.private validateComponentName(args: any): string { if (!args?.componentName || typeof args.componentName !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'Component name is required and must be a string' ); } return args.componentName.toLowerCase(); }