Web Component

<script type="module" src="https://vol.example.com/embed/embed.mjs"></script>

<vol-chat
  case="papers"
  api-key="vol_live_…"
  base-url="https://vol.example.com/api"
  heading="Ask the papers"
  theme="light"
  style="height: 560px; max-width: 720px"
></vol-chat>

<vol-chat> uses an open Shadow DOM and @vol/sdk to stream answers directly from the API, with numbered citations, a sources list and cluster pills.

Attributes

Attribute	Description
case	Corpus (papers, cordis, …). Changing it resets the conversation.
api-key	Integration key. Falls back to Vol("init").
base-url	API base without /v1. Falls back to init, then <script origin>/api.
origin	VOL app origin used by “open in map”.
heading	Header title (default “Ask VOL”).
placeholder	Input placeholder.
theme	light (default) or dark.

Methods

const chat = document.querySelector("vol-chat");
await chat.ask("Which projects study green hydrogen?");
chat.reset();

Events

vol:answer, vol:citation (cancelable), vol:cluster, vol:error — see Overview.

chat.addEventListener("vol:citation", (e) => {
  e.preventDefault();
  myMap.flyTo(e.detail.citation.nodeIndex);
});

Theming

Size it from the outside (height, max-width). Inside, colours come from CSS custom properties that you can override on the element:

vol-chat {
  --vol-brand: #0f766e;   /* accent: citation chips, active source */
  --vol-ink-soft: #111827; /* user bubbles and send button */
  --vol-radius: 8px;
}

Available tokens: --vol-canvas, --vol-surface, --vol-ink, --vol-ink-soft, --vol-ink-muted, --vol-ink-subtle, --vol-line, --vol-line-strong, --vol-brand, --vol-danger, --vol-radius, --vol-font-display, --vol-font-sans.

In a bundler

import "@vol/embed"; // registers <vol-chat> and window.Vol
// or
import { defineVolChat, VolChatElement } from "@vol/embed";
defineVolChat("my-chat"); // custom tag name