🤖 AI Search Integration

The DataGrid component supports AI-powered search using OpenAI, OpenRouter, or your custom backend/logic.

You can enable this by configuring the options.aiSearch object passed into the DataGrid as props.

🔧 Enabling AI Search

<DataGrid
  id="my-grid"
  data={myData}
  columns={myColumns}
  options={{
    aiSearch: {
      enabled: true,
      apiKey: 'your-api-key', // Optional if using custom endpoint or logic
      model: 'openai/gpt-4' // or 'openai/gpt-3.5-turbo' — default is 'gpt-4'
      endpoint: 'https://openrouter.ai/api/v1/chat/completions', // Optional, only needed if not using OpenAI
      headers: {
        'HTTP-Referer': 'https://yourdomain.com', // Required for OpenRouter
        'X-Title': 'My AI Grid'
      },
      systemPrompt: 'You are a helpful assistant.',
      minRowCount: 50, // Minimum number of rows to trigger AI search
    }
  }}
/>

🧠 Default AI Behavior

The DataGrid uses the following default system prompt for AI queries:

You are a filtering assistant. Given a list of JSON rows, return only the rows matching the query. Only return a JSON array of matched rows.

🛠 Customizing the Prompt

You can override it using:

aiSearch: {
  systemPrompt: 'You are a helpful assistant that...'
}

⚠️ You must still ensure the AI output is a pure JSON array of rows, otherwise it will be rejected.

🚀 How It Works

When global search is used:

• If aiSearch.enabled is true, and:

  • the search is global,

    

  • the dataset exceeds minRowCount,

  • and a query is entered,

→ The DataGrid will attempt to use the configured AI service to find matching rows from your data.

If AI search fails (e.g., invalid key, timeout), the DataGrid automatically falls back to local search.

✅ AI Search Modes

There are 3 different modes you can configure based on your needs:

1. OpenAI / OpenRouter (Standard API Key)

Use when:

• You have an API key from OpenAI or OpenRouter.
• This integration method requires passing your API key directly to the frontend. For security reasons, it is strongly recommended to use this approach only in internal, private, or trusted network environments where API keys cannot be exposed publicly.

For public or production applications, consider setting up a backend proxy or serverless function to securely handle API calls.

Example:

aiSearch: {
  enabled: true,
  apiKey: 'sk-xxxxxx',
  model: 'gpt-4',
  endpoint: 'https://openrouter.ai/api/v1/chat/completions',
  headers: {
    'HTTP-Referer': 'https://yourdomain.com',
    'X-Title': 'Grid AI Search'
  },
  systemPrompt: 'You are an AI assistant that filters data.',
  minRowCount: 100
}

🔒 Note for OpenRouter: HTTP-Referer header is required for browser-based clients.

2. Custom Backend Endpoint (No API Key)

Use when:

• You want to process the AI logic server-side (e.g., with rate-limiting, prompt tuning, caching, etc.).
• No API key is provided.

Example:

aiSearch: {
  enabled: true,
  endpoint: 'https://my-backend.com/api/ai-search',
  headers: {
    Authorization: 'Bearer my-secret-token'
  },
  minRowCount: 100
}

Expected API Contract:

Your endpoint must accept:

{
  "query": "Search string",
  "data": [ ...your full grid data... ]
}

And return:

[ { /* matching row 1 */ }, { /* matching row 2 */ } ]

3. Custom AI Search Function

Use when:

• You want full control over AI logic (e.g., vector search, chaining, RAG).

Example:

aiSearch: {
  enabled: true,
  runAISearch: async ({ query, data }) => {
    const results = await myCustomAISearch(query, data);
    return results; // Must return a JSON array of matching rows
  },
  minRowCount: 100
}

This bypasses the built-in useAISearch logic entirely and uses your own function.

🔍 Local vs AI Search in React DataGrid Lite

🛠 Available aiSearch Options

🧪 Example Use Case

You want to enable AI search only when there are 100+ rows and fallback to local otherwise:

aiSearch: {
  enabled: true,
  apiKey: 'sk-...',
  model: 'gpt-3.5-turbo',
  minRowCount: 100
}

🧪 Example with OpenRouter

aiSearch: {
  enabled: true,
  apiKey: 'your-openrouter-api-key',
  endpoint: 'https://openrouter.ai/api/v1/chat/completions',
  model: 'mistral/mixtral-8x7b',
  headers: {
    'HTTP-Referer': 'https://mygrid.com',
    'X-Title': 'My Grid AI'
  },
  minRowCount: 50
}

🛠 Troubleshooting