get_component_demo
Retrieve demo code and usage examples for specific ReactBits components to simplify integration and implementation in React projects.
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/services/ReactBitsService.ts:326-348 (handler)The primary handler function that implements the get_component_demo tool logic: fetches the component source code and wraps it in a complete demo React component with 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> ); }`; }
- src/index.ts:184-199 (handler)MCP server dispatch handler for the 'get_component_demo' tool call, validates input and delegates to ReactBitsService.getComponentDemo.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/index.ts:91-104 (registration)Tool registration in the MCP tools array, defining name, description, and input schema for get_component_demo.{ 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:94-103 (schema)Input schema definition for the get_component_demo tool, specifying the required 'name' parameter.inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name of the component', }, }, required: ['name'], },