get_component
Retrieve the source code of a specific ReactBits component by name. Specify the preferred styling method (CSS, Tailwind, or default) to get custom or default implementation tailored to your React project.
Instructions
Get the source code for a specific ReactBits component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name of the component (e.g., "splash-cursor", "pixel-card") | |
| style | No | Preferred styling method (defaults to available) |
Implementation Reference
- src/services/ReactBitsService.ts:244-324 (handler)The core handler function implementing the 'get_component' tool logic. Normalizes the component name, checks for incomplete status and returns warning if applicable, checks cache, attempts to fetch from GitHub repo, falls back to web scraping ReactBits.dev, and caches the result.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:53-67 (schema)JSON Schema defining the input parameters for the 'get_component' tool: required 'name' string and optional 'style' enum ['css', 'tailwind', 'default'].inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name of the component (e.g., "splash-cursor", "pixel-card")', }, style: { type: 'string', enum: ['css', 'tailwind', 'default'], description: 'Preferred styling method (defaults to available)', }, }, required: ['name'], },
- src/index.ts:50-68 (registration)Registration of the 'get_component' tool in the MCP tools list, including name, description, and inputSchema.{ name: 'get_component', description: 'Get the source code for a specific ReactBits component', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name of the component (e.g., "splash-cursor", "pixel-card")', }, style: { type: 'string', enum: ['css', 'tailwind', 'default'], description: 'Preferred styling method (defaults to available)', }, }, required: ['name'], }, },
- src/index.ts:143-160 (handler)MCP CallToolRequestSchema handler dispatch case for 'get_component', extracting arguments, validating name, calling ReactBitsService.getComponent, and formatting response.case 'get_component': { const componentName = args?.name as string; const style = args?.style as any; if (!componentName) { throw new Error('Component name is required'); } const component = await reactBitsService.getComponent(componentName, style); return { content: [ { type: 'text', text: component, }, ], }; }
- Helper method to determine dependencies for a component based on health data and categories.private getComponentDependencies(slug: string): string[] { const deps: string[] = []; for (const [dep, categories] of Object.entries(componentHealth.dependencies)) { if ((categories as string[]).some((cat: string) => { const categoryData = (componentHealth.componentHealth as any)[cat]; return categoryData?.components && slug in categoryData.components; })) { deps.push(dep); } } return deps; }