Skip to content
VOLVOL Docs

Overview

@vol/atoms are React 19 components that implement VOL’s core experiences on top of @vol/sdk, styled with the @vol/ui design tokens (Cal Sans headings, Inter text, #6349ea accent).

Atom Purpose
<VolProvider> Creates/holds the VolClient and default case
<VolChat> Streaming chat with numbered, clickable citations and clusters
<VolSearch> Debounced semantic search box with results
<VolCitationList> Numbered list of sources
<VolGraph> Lazy-loaded 3D knowledge map (wraps @vol/viewer3d)
Hooks useVolChat, useVolClient, useVol, useCase, parseAnswer

Setup

Section titled “Setup”
Terminal window
pnpm add @vol/atoms @vol/sdk @vol/ui
/* your CSS entry (Tailwind CSS v4) */
@import "tailwindcss";
@import "@vol/ui/fonts.css";
@import "@vol/ui/styles.css";
@source "../node_modules/@vol/atoms/src";
import { VolProvider, VolChat } from "@vol/atoms";


<VolProvider apiKey="vol_live_…" baseUrl="https://vol.example.com/api" defaultCase="papers">
  <VolChat onCitation={(c) => console.log(c.nodeIndex)} />
</VolProvider>;

The step-by-step version is in the React atoms guide.