get_component_examples
Retrieve practical usage examples for shadcn/ui components to understand implementation patterns and accelerate development.
Instructions
Get usage examples for 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:128-141 (registration)Registration of the 'get_component_examples' tool in the ListToolsRequestSchema handler, including name, description, and input schema requiring 'componentName'.
{ name: "get_component_examples", description: "Get usage examples for 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:460-470 (handler)The main handler function for the 'get_component_examples' tool. Validates the component name, fetches examples using helper methods, formats the response, and handles errors.
private async handleGetComponentExamples(args: any) { const componentName = this.validateComponentName(args); try { // Fetch component examples const examples = await this.fetchComponentExamples(componentName); return this.createSuccessResponse(examples); } catch (error) { this.handleAxiosError(error, `Component examples for "${componentName}"`); } } - src/index.ts:165-166 (registration)Dispatch/registration in the switch statement of the CallToolRequestSchema handler that routes calls to the tool handler.
case "get_component_examples": return await this.handleGetComponentExamples(request.params.arguments); - src/index.ts:477-490 (helper)Core helper function that implements the logic to scrape examples from shadcn/ui docs and GitHub for the given component.
private async fetchComponentExamples(componentName: string): Promise<ComponentExample[]> { const response = await this.axiosInstance.get(`${this.SHADCN_DOCS_URL}/docs/components/${componentName}`); const $ = cheerio.load(response.data); const examples: ComponentExample[] = []; // Collect examples from different sources this.collectGeneralCodeExamples($, examples); this.collectSectionExamples($, "Usage", "Basic usage example", examples); this.collectSectionExamples($, "Link", "Link usage example", examples); await this.collectGitHubExamples(componentName, examples); return examples; } - src/index.ts:50-56 (schema)TypeScript interface defining the structure of component examples returned by the tool.
* Interface for component example */ interface ComponentExample { title: string; code: string; description?: string; }