get_component_demo

Retrieve example code and usage demonstrations for ReactBits components to implement animated UI elements in React applications.

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

ReactBits MCP Server