Examples

Vecnest includes four runnable examples: a React demo, a JavaScript-only app, and RAG vanilla / RAG React apps for testing the library plus the Vecnest UI inspector.

---

React demo

Location: examples/demo/

A React + Vite app that showcases:

• Database name — Configurable IndexedDB name (persisted in localStorage).
• Storage info — Usage and quota from navigator.storage.estimate.
• Add text — Embed and store via addText.
• Search — Semantic search with useSearchText; results update as you type.
• Documents list — List, edit, and delete stored documents.
• Vector space — 3D embedding visualization (first three dimensions) with search-result highlighting.

Run the demo

From the repository root:

npm install
npm run dev

Then open http://localhost:5174/ (or the URL Vite prints).

Tech stack

• Vite — Build and dev server.
• React — UI.
• vecnest + vecnest/react — DB and hooks.
• shadcn/ui + Tailwind CSS — Styling.

---

JavaScript-only example

Location: examples/js-only/

A minimal vanilla JS example (no React). It uses VecnestDB with addText and searchText, then closes the DB in a finally block.

Run the JS-only example

From the repository root:

npm install
npm run dev:js

Then open http://localhost:5175/ (or the URL Vite prints).

Example snippet

import { VecnestDB } from 'vecnest';

async function main() {
  const db = new VecnestDB('js-only-demo');
  await db.connect();

  await db.addText('First document.', { id: 'a' });
  await db.addText('Second document.', { id: 'b' });

  const results = await db.searchText('document', { k: 5 });
  for (const r of results) {
    console.log(r.metadata.text, '—', r.score);
  }

  db.close();
}

main().catch(console.error).finally(() => db?.close());

---

RAG vanilla example

Location: examples/rag-vanilla/

Minimal vanilla JS RAG app: chunk, embed, store, and search. Includes a link to the Vecnest UI so you can inspect DBs, documents, and 3D embeddings on the same origin.

Setup and run

1. Add the Vecnest UI (one-time):

cd examples/rag-vanilla && npx vecnest setup-ui
cd ../..

1. Start the app:

npm run dev:rag-vanilla

1. Open http://localhost:5176/ for the RAG app. Click "Open Vecnest UI" or go to http://localhost:5176/vecnest-ui/index.html to use the inspector.

Use the RAG dev command

Run npm run dev:rag-vanilla, not npm run dev. npm run dev starts the main Vecnest demo, not this RAG app.

---

RAG React example

Location: examples/rag-react/

Minimal React RAG app using useVecnest and useSearchText, with a link to the Vecnest UI.

Setup and run

1. Add the Vecnest UI (one-time):

cd examples/rag-react && npx vecnest setup-ui
cd ../..

1. Start the app:

npm run dev:rag-react

1. Open http://localhost:5177/ for the RAG app. Click "Open Vecnest UI" or go to http://localhost:5177/vecnest-ui/index.html to use the inspector.

Use the RAG dev command

Run npm run dev:rag-react, not npm run dev. npm run dev starts the main Vecnest demo, not this RAG app.

---

Vecnest UI setup (your own project)

To add the Vecnest UI inspector to your app:

1. Run npx vecnest setup-ui from your project root.
2. Add a link: <a href="/vecnest-ui/index.html">Open Vecnest UI</a>.
3. Run your dev server and open /vecnest-ui/index.html on the same origin.

See Vecnest UI setup for details (static dirs, --out, Webpack/Rollup, CLI commands).

---

Connecting your project to Vecnest

1. Install: npm install vecnest
2. Use the core API in any browser-based app (Vite, Next.js, Create React App, etc.):

import { VecnestDB } from 'vecnest';

const db = new VecnestDB('my-app-db');
await db.connect();
await db.addText('Hello world');
const results = await db.searchText('hello', { k: 5 });
db.close();

1. Or use React hooks if you use React:

import { useVecnest, useSearchText } from 'vecnest/react';

1. Bundler: Use a bundler that supports ESM (Vite, webpack, Rollup, etc.). Vecnest is browser-only; it uses IndexedDB and optional Transformers.js (WASM). It is not intended for Node.js server-side use.

For more detail, see Quick start and the Guide.