search_components

Instructions

Implementation Reference

• src/index.ts:69-90 (schema)

  Tool definition and input schema for 'search_components'. Defines the tool name, description, and inputSchema with properties: query (required), category (optional), and limit (optional).

  {
    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/index.ts:27-113 (registration)

  The tool is registered in the `tools` array (line 69-90) and served via the ListToolsRequestSchema handler (line 116-118).

  const tools: Tool[] = [
    {
      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',
          },
        },
      },
    },
    {
      name: 'get_component',
      description: 'Get the source code for a specific ReactBits component',
      inputSchema: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
            description: 'Name of the component (e.g., "splash-cursor", "pixel-card")',
          },
          style: {
            type: 'string',
            enum: ['css', 'tailwind', 'default'],
            description: 'Preferred styling method (defaults to available)',
          },
        },
        required: ['name'],
      },
    },
    {
      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'],
      },
    },
    {
      name: 'get_component_demo',
      description: 'Get usage example and demo code for a ReactBits component',
      inputSchema: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
            description: 'Name of the component',
          },
        },
        required: ['name'],
      },
    },
    {
      name: 'list_categories',
      description: 'List all available component categories',
      inputSchema: {
        type: 'object',
        properties: {},
      },
    },
  ];

• src/index.ts:162-182 (handler)

  Handler case in CallToolRequestSchema for 'search_components'. Extracts searchOptions from args (using ComponentSearchOptions type), validates query is required, then calls reactBitsService.searchComponents() and returns results as JSON.

  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 business logic: ReactBitsService.searchComponents(). Filters components by query (matching name, slug, description, or category), then applies optional limit. Returns filtered ReactBitsComponent[].

  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/types/index.ts:28-33 (schema)

  TypeScript interface ComponentSearchOptions defining the shape of search options: query (string), category (optional string), style (optional ComponentStyle), and limit (optional number).

  export interface ComponentSearchOptions {
    query: string;
    category?: string;
    style?: ComponentStyle;
    limit?: number;
  }