Vecnest UI setup¶

The Vecnest UI is an inspector you can add to your app to view DBs, documents, and a 3D embedding space on the same origin. Useful for debugging and demos.

One command¶

From your project root:

npx vecnest setup-ui

This:

Builds the Vecnest UI.
Copies it into your project’s static directory (public/ or static/, auto-detected).
Prints next steps (add link, run dev server).

Override the copy destination with --out:

npx vecnest setup-ui --out static/vecnest-ui

After setup¶

1. Add a link in your app¶

You must manually add a link to the UI. For example:

<a href="/vecnest-ui/index.html">Open Vecnest UI</a>

In React, use the same href in a <a> tag or router link.

2. Run your dev server¶

Use your app’s dev command (e.g. npm run dev). The UI is served at /vecnest-ui/index.html on the same origin as your app so it can access the same IndexedDB.

3. Open the inspector¶

Visit /vecnest-ui/index.html (or click the link). You’ll see registered Vecnest DBs, documents, and the 3D embedding view.

RAG examples (vanilla & React)¶

The repo includes minimal RAG apps: examples/rag-vanilla and examples/rag-react.

Vanilla JS¶

From the vecnest repo root:

cd examples/rag-vanilla && npx vecnest setup-ui
cd ../..
npm run dev:rag-vanilla

App: http://localhost:5176/
UI: http://localhost:5176/vecnest-ui/index.html

Use the RAG dev command

Run npm run dev:rag-vanilla, not npm run dev. npm run dev starts the main Vecnest demo (full UI app), not the RAG example.

React¶

cd examples/rag-react && npx vecnest setup-ui
cd ../..
npm run dev:rag-react

App: http://localhost:5177/
UI: http://localhost:5177/vecnest-ui/index.html

Again, use npm run dev:rag-react, not npm run dev.

Static directory detection¶

Directory	Used by
`public/`	Vite, Next.js, Vue, CRA
`static/`	SvelteKit

If neither exists, public/ is used (and created). Use --out <path> to override, e.g. --out static/vecnest-ui or --out dist/vecnest-ui.

Other bundlers (Webpack, Rollup, etc.)¶

The UI is static files (HTML, JS, CSS). It works with any setup that serves a static directory at the site root.

Run npx vecnest setup-ui --out <your-static-dir>/vecnest-ui (e.g. public/vecnest-ui or static/vecnest-ui).
Add the link <a href="/vecnest-ui/index.html">Open Vecnest UI</a> in your app.
Run your dev server. App and UI must be on the same origin (same protocol, host, port) so they share IndexedDB.

CLI commands¶

Command	Description
`vecnest setup-ui`	Build UI + copy into project (recommended).
`vecnest setup-ui --out <path>`	Same, but copy to `<path>`.
`vecnest build-ui`	Build UI to `dist-ui/` (no copy).
`vecnest copy-ui`	Copy existing `dist-ui/` only.
`vecnest copy-ui --out <path>`	Copy to custom path.
`vecnest dev`	Run the standalone Vecnest demo (port 5174).