search_components
Find ReactBits components by name or description using search queries and category filters to locate animated React components for development projects.
Instructions
Search for ReactBits components by name or description
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query | |
| category | No | Filter by category | |
| limit | No | Maximum number of results |
Implementation Reference
- src/services/ReactBitsService.ts:220-242 (handler)Main handler function that performs the component search by filtering the component registry based on the query string, category, and 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:162-182 (handler)MCP server tool call handler for 'search_components' that validates input and delegates to ReactBitsService.
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/index.ts:69-90 (registration)Tool registration in the MCP tools list, defining name, description, and input schema.
{ 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 input options for the search_components tool.
export interface ComponentSearchOptions { query: string; category?: string; style?: ComponentStyle; limit?: number; }