get_component_demo
Retrieve usage examples and demo code for any ReactBits component to quickly implement animated components in your project.
Instructions
Get usage example and demo code for a ReactBits component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name of the component |
Implementation Reference
- src/index.ts:91-104 (registration)Tool registration for 'get_component_demo' in the tools array, defining its name, description, and inputSchema (requires 'name' string property).
{ name: 'get_component_demo', description: 'Get usage example and demo code for a ReactBits component', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name of the component', }, }, required: ['name'], }, }, - src/index.ts:184-200 (handler)Handler case for 'get_component_demo' in the CallToolRequestSchema switch statement. Extracts the component name from args, validates it, then calls reactBitsService.getComponentDemo(componentName) and returns the result.
case 'get_component_demo': { const componentName = args?.name as string; if (!componentName) { throw new Error('Component name is required'); } const demo = await reactBitsService.getComponentDemo(componentName); return { content: [ { type: 'text', text: demo, }, ], }; } - src/services/ReactBitsService.ts:326-348 (handler)The getComponentDemo method in ReactBitsService class. Calls this.getComponent(componentName) to fetch the component source code, extracts the component name from code using regex, then wraps it in a JSX demo wrapper with a simple usage example.
async getComponentDemo(componentName: string): Promise<string> { const component = await this.getComponent(componentName); // Extract component name from the code const componentNameMatch = component.match(/(?:export\s+default\s+function|const)\s+(\w+)/); const extractedName = componentNameMatch ? componentNameMatch[1] : componentName.replace(/\s+/g, ''); // Create a demo wrapper return `// Demo for ${componentName} import React from 'react'; ${component} // Usage Example: export default function Demo() { return ( <div className="min-h-screen bg-gray-100 p-8"> <h1 className="text-2xl font-bold mb-4">${componentName} Demo</h1> <${extractedName} /> </div> ); }`; }