list_components
List and filter all available React components in ReactBits.dev by category, style, or limit to streamline component selection for development projects.
Instructions
List all available ReactBits components with optional filtering
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category (e.g., animations, backgrounds, buttons) | |
| limit | No | Maximum number of components to return | |
| style | No | Filter by styling method |
Implementation Reference
- src/services/ReactBitsService.ts:176-218 (handler)Core implementation of listComponents: iterates over componentRegistry.categories, enriches with health data and dependencies, applies filters for category, style, and limit.async listComponents(options: { category?: string; style?: 'css' | 'tailwind' | 'default'; limit?: number; } = {}): Promise<ReactBitsComponent[]> { let components: ReactBitsComponent[] = []; // Use the auto-generated registry for (const category of componentRegistry.categories) { if (!options.category || category.slug === options.category) { const categoryHealth = (componentHealth.componentHealth as any)[category.slug] || {}; components.push(...category.components.map(comp => { const componentStatus = categoryHealth.components?.[comp.slug] || 'unknown'; const dependencies = this.getComponentDependencies(comp.slug); return { ...comp, description: `A ${comp.name} component from ReactBits`, quality: categoryHealth.quality, status: componentStatus, dependencies }; })); } } // Filter by style if specified if (options.style) { components = components.filter(comp => { if (options.style === 'css') return comp.hasCSS; if (options.style === 'tailwind') return comp.hasTailwind; return true; }); } // Apply limit if (options.limit && options.limit > 0) { components = components.slice(0, options.limit); } return components; }
- src/index.ts:28-49 (registration)MCP tool registration in the tools array, including name, description, and JSON input schema.{ name: 'list_components', description: 'List all available ReactBits components with optional filtering', inputSchema: { type: 'object', properties: { category: { type: 'string', description: 'Filter by category (e.g., animations, backgrounds, buttons)', }, style: { type: 'string', enum: ['css', 'tailwind', 'default'], description: 'Filter by styling method', }, limit: { type: 'number', description: 'Maximum number of components to return', }, }, }, },
- src/types/index.ts:22-26 (schema)TypeScript interface for list_components input options, matching the JSON schema.export interface ComponentListOptions { category?: string; style?: ComponentStyle; limit?: number; }
- src/index.ts:126-141 (registration)Dispatch handler in the MCP CallToolRequestSchema that invokes the service's listComponents method.case 'list_components': { const options: ComponentListOptions = { category: args?.category as string, style: args?.style as any, limit: args?.limit as number, }; const components = await reactBitsService.listComponents(options); return { content: [ { type: 'text', text: JSON.stringify(components, null, 2), }, ], }; }