Add AI Search to Any React App in 10 Minutes

npm install @localmode/core @localmode/transformers

import { createVectorDB } from '@localmode/core';
import { transformers } from '@localmode/transformers';

// Create an embedding model (33MB, downloads once, cached in browser)
const model = transformers.embedding('Xenova/bge-small-en-v1.5');

// Create an in-memory vector database
const db = await createVectorDB({
  name: 'my-search',
  dimensions: 384,
  storage: 'memory',
});

import { embedMany } from '@localmode/core';

const articles = [
  { id: '1', text: 'Troubleshooting CI/CD pipeline failures and deployment rollbacks' },
  { id: '2', text: 'Setting up authentication with OAuth2 and JWT tokens' },
  { id: '3', text: 'Optimizing PostgreSQL queries with indexes and EXPLAIN ANALYZE' },
  { id: '4', text: 'Designing REST APIs with proper error handling and pagination' },
  { id: '5', text: 'Configuring Docker containers for production environments' },
];

// Embed all texts in one call
const { embeddings } = await embedMany({
  model,
  values: articles.map((a) => a.text),
});

// Store each vector in the database
for (let i = 0; i < articles.length; i++) {
  await db.add({
    id: articles[i].id,
    vector: embeddings[i],
    metadata: { text: articles[i].text },
  });
}

import { embed } from '@localmode/core';

const { embedding } = await embed({
  model,
  value: 'how to fix a broken deployment',
});

const results = await db.search(embedding, { k: 3 });

for (const result of results) {
  console.log(`${result.score.toFixed(3)} - ${result.metadata?.text}`);
}
// 0.847 - Troubleshooting CI/CD pipeline failures and deployment rollbacks
// 0.612 - Configuring Docker containers for production environments
// 0.534 - Designing REST APIs with proper error handling and pagination

'use client';

import { useState, useRef, useEffect } from 'react';
import { createVectorDB, embedMany, semanticSearch } from '@localmode/core';
import { transformers } from '@localmode/transformers';
import type { VectorDB } from '@localmode/core';

const ARTICLES = [
  'Troubleshooting CI/CD pipeline failures and deployment rollbacks',
  'Setting up authentication with OAuth2 and JWT tokens',
  'Optimizing PostgreSQL queries with indexes and EXPLAIN ANALYZE',
  'Designing REST APIs with proper error handling and pagination',
  'Configuring Docker containers for production environments',
  'Writing unit tests with Jest and React Testing Library',
  'Managing state in React with hooks and context',
  'Implementing WebSocket connections for real-time updates',
];

const model = transformers.embedding('Xenova/bge-small-en-v1.5');

export default function SearchApp() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<{ text: string; score: number }[]>([]);
  const [isReady, setIsReady] = useState(false);
  const [isSearching, setIsSearching] = useState(false);
  const dbRef = useRef<VectorDB | null>(null);

  // Index articles on mount
  useEffect(() => {
    let cancelled = false;

    async function init() {
      const db = await createVectorDB({
        name: 'search-demo',
        dimensions: 384,
        storage: 'memory',
      });

      const { embeddings } = await embedMany({
        model,
        values: ARTICLES,
      });

      for (let i = 0; i < ARTICLES.length; i++) {
        await db.add({
          id: String(i),
          vector: embeddings[i],
          metadata: { text: ARTICLES[i] },
        });
      }

      if (!cancelled) {
        dbRef.current = db;
        setIsReady(true);
      }
    }

    init();
    return () => { cancelled = true; };
  }, []);

  // Search on query change
  async function handleSearch(q: string) {
    setQuery(q);
    if (!q.trim() || !dbRef.current) {
      setResults([]);
      return;
    }

    setIsSearching(true);
    const { results: hits } = await semanticSearch({
      db: dbRef.current,
      model,
      query: q,
      k: 5,
    });
    setResults(hits.map((h) => ({ text: h.text ?? '', score: h.score })));
    setIsSearching(false);
  }

  return (
    <div style={{ maxWidth: 600, margin: '2rem auto', fontFamily: 'system-ui' }}>
      <h1>Semantic Search Demo</h1>
      <input
        type="text"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder={isReady ? 'Search articles...' : 'Loading model...'}
        disabled={!isReady}
        style={{ width: '100%', padding: '0.75rem', fontSize: '1rem' }}
      />
      <ul style={{ listStyle: 'none', padding: 0, marginTop: '1rem' }}>
        {results.map((r, i) => (
          <li key={i} style={{ padding: '0.75rem 0', borderBottom: '1px solid #eee' }}>
            <strong>{(r.score * 100).toFixed(1)}%</strong> - {r.text}
          </li>
        ))}
      </ul>
      {isSearching && <p>Searching...</p>}
    </div>
  );
}