list_components
Discover and filter ReactBits animated components by category or styling method to find suitable UI elements for React 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) | |
| style | No | Filter by styling method | |
| limit | No | Maximum number of components to return |
Implementation Reference
- src/services/ReactBitsService.ts:176-218 (handler)Core handler function that implements the list_components tool logic: iterates over component registry categories, filters by options, augments components with health status and dependencies, applies style and limit filters.
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:126-141 (handler)MCP server request handler for 'list_components' tool: parses input arguments into ComponentListOptions and delegates execution to ReactBitsService.listComponents, returning JSON stringified result.
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), }, ], }; } - src/index.ts:28-49 (registration)Tool registration in MCP server: defines 'list_components' name, description, and input schema for listing components with optional filters.
{ 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 defining the options structure for listComponents, matching the tool input schema.
export interface ComponentListOptions { category?: string; style?: ComponentStyle; limit?: number; }