ReactBits MCP Server

Instructions

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; }