get_shadcn_component
Retrieve shadcn/ui component source code and usage examples for React or Svelte frameworks to accelerate UI development with ready-to-use components.
Instructions
Get shadcn/ui component source code and usage examples
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "button", "card", "form") | |
| includeDemo | No | Include usage examples | |
| framework | No | Framework to get component for | react |
Implementation Reference
- src/utils/tool-functions.ts:112-121 (handler)The main handler function that implements the logic for the 'get_shadcn_component' tool, returning a formatted response with component details.
export async function getComponent(args: ShadcnComponentRequest) { return { content: [ { type: 'text', text: `Retrieved ${args.componentName} component\nFramework: ${args.framework || 'react'}\nDemo included: ${args.includeDemo || false}` } ] }; } - src/index.ts:99-123 (registration)Registers the 'get_shadcn_component' tool in the TOOLS array, including its name, description, and input schema.
{ name: 'get_shadcn_component', description: 'Get shadcn/ui component source code and usage examples', inputSchema: { type: 'object', properties: { componentName: { type: 'string', description: 'Name of the shadcn/ui component (e.g., "button", "card", "form")' }, includeDemo: { type: 'boolean', default: true, description: 'Include usage examples' }, framework: { type: 'string', enum: ['react', 'svelte'], default: 'react', description: 'Framework to get component for' } }, required: ['componentName'] } }, - src/index.ts:433-434 (registration)In the tool call dispatcher switch statement, maps the tool name to the getComponent handler function.
case 'get_shadcn_component': return await getComponent(args as unknown as ShadcnComponentRequest); - src/types.ts:103-109 (schema)TypeScript interface defining the input parameters for the get_shadcn_component tool.
export interface ShadcnComponentRequest { componentName: string; framework?: 'react' | 'svelte'; variant?: string; includeDemo?: boolean; customization?: Record<string, any>; }