Next.js

MOSS_PROJECT_ID=your_project_id
MOSS_PROJECT_KEY=your_project_key
MOSS_INDEX_NAME=your_index_name

"use server";

import { MossClient } from "@moss-dev/moss";

const client = new MossClient(
  process.env.MOSS_PROJECT_ID!,
  process.env.MOSS_PROJECT_KEY!,
);

const indexName = process.env.MOSS_INDEX_NAME!;
const indexReady = client.loadIndex(indexName);

export async function searchMoss(query: string) {
  await indexReady;

  const results = await client.query(indexName, query, { topK: 5 });

  return results.docs.map((doc) => ({
    id: doc.id,
    text: doc.text,
    score: doc.score,
    metadata: doc.metadata,
  }));
}

"use client";

import { useState, useTransition } from "react";
import { searchMoss } from "./actions";

export default function SearchPage() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch() {
    if (!query.trim()) return;
    startTransition(async () => {
      const data = await searchMoss(query);
      setResults(data);
    });
  }

  return (
    <main>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && handleSearch()}
        placeholder="Search..."
      />
      <button onClick={handleSearch} disabled={isPending}>
        {isPending ? "Searching..." : "Search"}
      </button>
      {results.map((r) => (
        <div key={r.id}>
          <p>{r.text}</p>
          <span>Score: {(r.score * 100).toFixed(1)}%</span>
        </div>
      ))}
    </main>
  );
}