Building AI-Powered Search UI with Vector Embeddings

Introduction

Semantic search enhances user experience by returning conceptually relevant results. This guide builds a React UI that queries a vector database for embeddings.

Prerequisites

• React 18+
• Vector search API endpoint

Step 1: Search API

Assumes an API endpoint /api/search that accepts { query } and returns [{ title, snippet }].

Step 2: Install Dependencies

npm install axios debounce

Step 3: Create Search Component

Create components/SemanticSearchUI.tsx:

'use client';

import { useState, useEffect } from 'react';
import axios from 'axios';
import debounce from 'lodash/debounce';

interface Result { title: string; snippet: string; }

export default function SemanticSearchUI() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Result[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchResults = debounce(async (q: string) => {
    if (!q) {
      setResults([]);
      return;
    }
    setLoading(true);
    try {
      const res = await axios.post('/api/search', { query: q });
      setResults(res.data.results);
    } catch (error) {
      console.error('Search error:', error);
    } finally {
      setLoading(false);
    }
  }, 300);

  useEffect(() => {
    fetchResults(query);
  }, [query]);

  return (
    <div className="max-w-2xl mx-auto p-6">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
        className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"
      />
      {loading && <div>Loading...</div>}
      <ul className="space-y-2">
        {results.map((r, idx) => (
          <li key={idx} className="border-b pb-2">
            <h3 className="font-semibold">{r.title}</h3>
            <p className="text-gray-600 text-sm">{r.snippet}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Step 4: Use in App

In app/page.tsx:

import SemanticSearchUI from '@/components/SemanticSearchUI';

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50">
      <SemanticSearchUI />
    </main>
  );
}

Summary

This React search UI uses vector embeddings behind the scenes for semantic search, providing users with more relevant results based on meaning rather than keywords.