React

npm i @sweberdev/cosine-react @huggingface/transformers

import { CosineSearch } from "@sweberdev/cosine-react";
import { useRouter } from "next/navigation";

export function DocsSearch() {
  const router = useRouter();
  return (
    <CosineSearch
      index="/cosine/cosine-index.json"
      lang="de"
      shortcut="mod+k"
      onSelect={(result) => {
        router.push(result.chunk.url);
        return false; // Cosine does not navigate itself
      }}
    />
  );
}

import { useCosine, useCosineSearch } from "@sweberdev/cosine-react";
import { useState } from "react";

export function Search() {
  const { cosine, status } = useCosine("/cosine/cosine-index.json");
  const [query, setQuery] = useState("");
  const { results } = useCosineSearch(cosine, query, { limit: 5, groupByPage: true });

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} onFocus={() => cosine?.warmup()} />
      {status === "loading-model" && <p>Loading smart search…</p>}
      <ul>
        {results.map((r) => (
          <li key={r.chunk.id}>
            <a href={r.chunk.url}>{[r.chunk.title, ...r.chunk.headings].join(" › ")}</a>
            <p>{r.snippet}</p>
          </li>
        ))}
      </ul>
    </>
  );
}