Posted on Aug 6

🔍 Introducing AI-Powered Semantic Search in `react-data-grid-lite`

#react #webdev #ai #javascript

I’m excited to announce the release of version 1.2.0 for react-data-grid-lite—now with built-in AI-powered semantic search powered by OpenAI and custom LLM endpoints!

If you’ve ever wanted users to search your table data using natural language—such as “show users older than 30 who signed up last month”—this update is for you.

🚀 Why AI Search?

Traditional search in grids is often literal and brittle—it depends on exact matches or filters and doesn't understand intent. Semantic AI search changes that by interpreting your query contextually, returning relevant rows even when phrasing differs.

🧩 How It Works

The grid sends your search query and JSON data to OpenAI (or your LLM provider). The AI analyzes the intent and returns filtered results. Integration with pagination, fallback behavior, and customizable prompts ensures a seamless experience.

🧪 Quick Setup

Here’s a concise config snippet to enable AI search in your grid:

<DataGrid
  columns={columns}
  data={rows}
  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
    }
  }}
/>

⚙️ Configuration Options

aiSearch: Customize request settings such as:
- enable – (boolean): Turn AI search on or off.
- apiKey – Your OpenAI secret key (optional)
- model – e.g. gpt-4(optional)
- endpoint – E.g. OpenAI chat endpoint or your own LLM server
- systemPrompt – Guide the LLM’s behavior
- headers – Add custom HTTP headers (optional)
- minRowCount – 50 // Minimum number of rows to trigger AI search
- runAISearch – Custom AI search function (overrides built-in logic)

Built-in fallback: If AI search fails, the grid automatically reverts to local search—no extra config needed.

Explore detailed documentation here →.

📄 Use Case Example

Imagine you want a user to type: “customers from Australia who ordered over \$500 last quarter.” The AI will semantically understand the criteria and return the relevant rows—even if your JSON data doesn't use those exact words.

✅ What’s New in v1.2.0

Core AI-powered semantic search via OpenAI API
Configurable API settings and system prompts
Seamless fallback to local search logic
Improved global search logic with clear separation of AI and local modes
Debounced input handling and edge‑case fixes
New unit tests covering AI search paths
Comprehensive docs and examples—including usage and customization guidance

💡 Why You’ll Love It

Boost user experience with intuitive, intelligent search
Reduce UI complexity—skip multi-filter dialogs or complex dropdowns
Maintain performance and reliability with fallback paths to local search
Stay flexible—works with any LLM endpoint, and fully customizable

📦 Getting Started

npm install react-data-grid-lite@latest

Then configure AI search with your OpenAI key or endpoint as shown above.

🔗 Learn More

Check out the official AI Search doc page:
AI-Powered Semantic Search in react-data-grid-lite

🗣 Feedback Welcome!

Have feedback or feature ideas? Let me know on GitHub or Dev.to. I’d love to hear how you’re using AI search in your apps!

Thanks for reading—happy coding! 👋

DEV Community