get_component_examples
Retrieve practical usage examples for shadcn/ui components by specifying the component name, enabling efficient integration into UI development workflows.
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 response. Includes the tool name, description, and input schema defining the required 'componentName' parameter.{ 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:458-470 (handler)Main handler function for executing the 'get_component_examples' tool. Validates input, fetches examples using helper function, handles errors, and returns formatted response.* Handle the get_component_examples tool request */ 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)Tool dispatch/registration in the CallToolRequestSchema switch statement, routing calls to the specific handler.case "get_component_examples": return await this.handleGetComponentExamples(request.params.arguments);
- src/index.ts:477-490 (helper)Core helper function that fetches and collects component examples from documentation pages and GitHub source.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:52-56 (schema)TypeScript interface defining the structure of component examples returned by the tool.interface ComponentExample { title: string; code: string; description?: string; }