AI Site Search

A React component for AI-powered site search with customizable themes and dark mode support.

Installation

To install this package, you'll need to have the necessary permissions:

npm install ai-site-search

Usage

Import and use the AISiteSearch component in your React application:

import AISiteSearch from 'ai-site-search';

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <AISiteSearch apiKey="your-ai-site-search-api-key" />
    </div>
  );
}

export default App;

Features

• Seamless integration with AI-powered site search
• Dark mode support with automatic detection of system preferences
• Responsive design for mobile and desktop

Controlled vs Uncontrolled Usage

Uncontrolled (Default)

By default, AISiteSearch is uncontrolled and provides its own trigger button:

<AISiteSearch apiKey="your-ai-site-search-api-key" />

Controlled

For controlled usage, pass isOpen and onClose props:

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open AI Site Search</button>
      <AISiteSearch
        apiKey="your-ai-site-search-api-key"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </div>
  );
}

Dark Mode

The search modal supports dark mode out of the box. It will automatically detect the user's system preferences and apply the appropriate theme. Users can also toggle between light and dark mode using the sun/moon icon in the search interface.

Props

• apiKey (required): Your AI Site Search API key.
• isOpen (optional): Boolean to control the visibility of the search modal.
• onClose (optional): Function to be called when the modal is closed.
• title (optional): Custom title for the chat modal. Defaults to "AI Site Search".
• placeholder (optional): Custom placeholder text for the input field. Defaults to "Ask a question".