title attribute is the browser tooltip. Use header-title, header-subtitle, and header-avatar for the chat header. Properties are available when setting structured values such as theme, variants, and strings:
Framework notes
React
React 19 supports custom-element properties. React 18 passes values as attributes, so pass simple strings as attributes there and assign object properties through a ref after the element mounts. Key the element by agent id when switching agents so the old client is destroyed with the old element. Use the lower-case custom-element attribute names in JSX.Vue
Use.prop to bind object-valued properties:
Next.js
The panel is client-only. In the App Router, place it in a'use client' component and load @osvi-ai/chat/ui from useEffect, or use next/dynamic with ssr: false. In the Pages Router, use a dynamic import with ssr: false. Importing the UI entry on the server is a no-op; elements upgrade in the browser.
Attributes and properties
The panel takes the same settings as the widget, as lower-case attributes (header-title, primary-color, new-chat…) or properties. It has no launcher, so position, launcher and greeting do not apply. The full list, plus the panel-only closable and client, is in the Configuration reference.
Tool elements
The UI entry also registers<osvi-buttons>, <osvi-carousel>, and <osvi-date-picker>. These render the corresponding interaction presentation without supplying the transcript or composer. Your application owns the surrounding UI and passes the interaction data and response callback.
osvi-respond bubbles from a tool selection and carries interactionId and response. The panel forwards it to client.respond. osvi-request-input switches the composer to a typed-answer mode; when submitted, the panel calls client.respond(id, { kind: "text", value }).
The headless client is responsible for session and interaction state; see Headless SDK.