ReactBits MCP Server

Instructions

Implementation Reference

• src/services/ReactBitsService.ts:326-348 (handler)

  The core handler function that implements the 'get_component_demo' tool logic. It retrieves the component code and wraps it in a complete demo with React imports and 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:91-104 (registration)

  The tool registration in the tools list, including name, description, and input schema, used by the MCP server for ListTools requests.
  { 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 (registration)

  The dispatch handler in the switch statement that routes 'get_component_demo' calls to the ReactBitsService method and formats the MCP response.
  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:244-324 (helper)

  Supporting helper method called by getComponentDemo to fetch the raw component code from cache, GitHub, or web scraper.
  async getComponent(componentName: string, style?: 'css' | 'tailwind' | 'default'): Promise<string> { // Normalize component name to slug format const slug = componentName.toLowerCase().replace(/\s+/g, '-'); // Check component health status const categoryEntry = Object.entries(componentHealth.componentHealth).find(([_, category]) => (category as any).components && slug in (category as any).components ); if (categoryEntry) { const [categoryName, category] = categoryEntry; const componentStatus = ((category as any).components as any)[slug]; if (componentStatus === 'placeholder' || componentStatus === 'incomplete') { const warningMessage = ` // ⚠️ WARNING: This component has incomplete implementation // Component: ${componentName} (${slug}) // Category: ${categoryName} // Status: ${componentStatus} // Quality Score: ${(category as any).quality}/10 // // This is a known issue with ReactBits. The following components are incomplete: // - All Button components (Button 1-8) // - All Form components (Form 1-3) // - All Loader components (Loader 1-9) // // For production use, please implement your own version or use components from: // - Backgrounds (9.8/10 quality) // - Animations (9.5/10 quality) // - Text Animations (9.0/10 quality) export default function ${componentName.replace(/\s+/g, '')}() { return ( <div className="p-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50"> <p className="text-gray-600">⚠️ {Component "${componentName}" has incomplete implementation}</p> <p className="text-sm text-gray-500 mt-2">Please check ReactBits.dev for updates</p> </div> ); }`; return warningMessage; } } // Check cache first const cacheKey = `component:${slug}:${style || 'default'}`; const cached = this.cache.get<string>(cacheKey); if (cached) return cached; // Use the component path map const componentPath = componentPathMap[slug]; if (!componentPath) { throw new Error(`Component "${componentName}" not found in registry`); } try { console.error(`Fetching ${slug} from GitHub at ${componentPath}...`); const githubComponent = await this.github.getComponentFromGitHub(componentPath); if (githubComponent.code) { this.cache.set(cacheKey, githubComponent.code, 3600000); return githubComponent.code; } } catch (error) { console.error(`Failed to fetch ${slug} from GitHub:`, error); // Fallback to web scraping try { console.error(`Attempting to scrape ${slug} from ReactBits.dev...`); const componentContent = await this.scraper.getComponentCode(slug, style); const code = componentContent.code; this.cache.set(cacheKey, code, 3600000); return code; } catch (scraperError) { console.error(`Scraping failed for ${slug}:`, scraperError); } } // Last resort: return a helpful error message throw new Error(`Unable to fetch component "${componentName}". Please check your internet connection and try again.`); }
• src/index.ts:94-103 (schema)

  The input schema defining the expected parameters for the 'get_component_demo' tool.
  inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name of the component', }, }, required: ['name'], },