get_component_demo
Generate practical demo code for using shadcn/ui v4 components by specifying the component name, aiding in correct implementation and integration.
Instructions
Get demo code illustrating how a shadcn/ui v4 component should be used
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
Implementation Reference
- The core handler function that implements the logic for the 'get_component_demo' tool. It dynamically loads the appropriate axios implementation based on the framework and fetches the demo code for the specified shadcn/ui component.export async function handleGetComponentDemo({ componentName }: { componentName: string }) { try { const axios = await getAxiosImplementation(); const demoCode = await axios.getComponentDemo(componentName); return { content: [{ type: "text", text: demoCode }] }; } catch (error) { logError(`Failed to get demo for component "${componentName}"`, error); throw new Error(`Failed to get demo for component "${componentName}": ${error instanceof Error ? error.message : String(error)}`); } }
- The input schema definition for the 'get_component_demo' tool, specifying the required 'componentName' parameter.export const schema = { componentName: { type: 'string', description: 'Name of the shadcn/ui component (e.g., "accordion", "button")' } };
- src/tools/index.ts:17-25 (registration)Registration of the tool handler functions in the central tools index, mapping 'get_component_demo' to its handler.export const toolHandlers = { get_component: handleGetComponent, get_component_demo: handleGetComponentDemo, list_components: handleListComponents, get_component_metadata: handleGetComponentMetadata, get_directory_structure: handleGetDirectoryStructure, get_block: handleGetBlock, list_blocks: handleListBlocks };
- src/tools/index.ts:47-55 (registration)Tool specification registration including name, description, and input schema for 'get_component_demo', used for MCP tool listing and validation.'get_component_demo': { name: 'get_component_demo', description: 'Get demo code illustrating how a shadcn/ui v4 component should be used', inputSchema: { type: 'object', properties: getComponentDemoSchema, required: ['componentName'] } },
- src/server/handler.ts:281-306 (registration)The MCP server request handler for calling tools, which dispatches to the registered toolHandlers based on the tool name 'get_component_demo'.server.setRequestHandler(CallToolRequestSchema, async (request) => { return await handleRequest( 'call_tool', request.params, async (validatedParams: any) => { const { name, arguments: params } = validatedParams; if (!name || typeof name !== 'string') { throw new Error("Tool name is required"); } const handler = toolHandlers[name as keyof typeof toolHandlers]; if (!handler) { throw new Error(`Tool not found: ${name}`); } // Execute handler with circuit breaker protection const result = await circuitBreakers.external.execute(() => Promise.resolve(handler(params || {})) ); return result; } ); });