React atoms

@vol/atoms provides ready-made React 19 components styled with VOL’s design tokens (@vol/ui), in the spirit of “drop-in scheduling components” — here for research Q&A.

1. Install

   pnpm add @vol/atoms @vol/sdk @vol/ui

2. Add the styles. The atoms use Tailwind CSS v4 utility classes and @vol/ui tokens. In your CSS entry:

   @import "tailwindcss";
   @import "@vol/ui/fonts.css";
   @import "@vol/ui/styles.css";
   @source "../node_modules/@vol/atoms/src";

3. Wrap your app in VolProvider

   import { VolProvider } from "@vol/atoms";
   
   export function App() {
     return (
       <VolProvider baseUrl="https://vol.example.com/api" apiKey={import.meta.env.VITE_VOL_KEY} defaultCase="papers">
         <Research />
       </VolProvider>
     );
   }

4. Render atoms

   import { VolChat, VolGraph, VolSearch } from "@vol/atoms";
   import { useState } from "react";
   
   function Research() {
     const [focus, setFocus] = useState<number[]>([]);
     return (
       <div className="grid h-[640px] grid-cols-[1fr_420px] gap-4">
         <VolGraph focus={{ citations: focus }} />
         <VolChat
           suggestions={["What are graph RAG methods?"]}
           onAnswer={(r) => setFocus(r.citations.map((c) => c.nodeIndex))}
           onCitation={(c) => setFocus([c.nodeIndex])}
         />
       </div>
     );
   }

Note

For signed-in users pass accessToken (a function returning the Supabase token) instead of apiKey, or pass a preconfigured client={new VolClient(...)}.

Component reference: Provider, VolChat, VolSearch, VolCitationList, VolGraph, Hooks.