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'],
  },