search_components
Search for React components by name or description, filter by category, and limit results. Access ReactBits.dev’s library of 135+ animated React components for creative development.
Instructions
Search for ReactBits components by name or description
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category | |
| limit | No | Maximum number of results | |
| query | Yes | Search query |
Implementation Reference
- src/index.ts:162-182 (handler)MCP server tool handler for 'search_components': parses arguments, validates required query, invokes ReactBitsService.searchComponents, formats and returns JSON results.case 'search_components': { const searchOptions: ComponentSearchOptions = { query: args?.query as string, category: args?.category as string, limit: args?.limit as number, }; if (!searchOptions.query) { throw new Error('Search query is required'); } const results = await reactBitsService.searchComponents(searchOptions); return { content: [ { type: 'text', text: JSON.stringify(results, null, 2), }, ], }; }
- src/services/ReactBitsService.ts:220-242 (handler)Core implementation of search_components: fetches components via listComponents (category-filtered), performs client-side fuzzy search on name/slug/description/category, applies limit.async searchComponents(options: { query: string; category?: string; limit?: number; }): Promise<ReactBitsComponent[]> { const query = options.query?.toLowerCase() || ''; let components = await this.listComponents({ category: options.category }); // Filter by search query components = components.filter(comp => comp.name.toLowerCase().includes(query) || comp.slug.toLowerCase().includes(query) || comp.description?.toLowerCase().includes(query) || comp.category.toLowerCase().includes(query) ); // Apply limit if (options.limit && options.limit > 0) { components = components.slice(0, options.limit); } return components; }
- src/index.ts:69-90 (registration)Tool registration in MCP server's tools array, defining name, description, and input schema requiring 'query'.{ name: 'search_components', description: 'Search for ReactBits components by name or description', inputSchema: { type: 'object', properties: { query: { type: 'string', description: 'Search query', }, category: { type: 'string', description: 'Filter by category', }, limit: { type: 'number', description: 'Maximum number of results', }, }, required: ['query'], }, },
- src/types/index.ts:28-33 (schema)TypeScript interface defining the shape of search options used in handler and service method.export interface ComponentSearchOptions { query: string; category?: string; style?: ComponentStyle; limit?: number; }