> ## Documentation Index
> Fetch the complete documentation index at: https://docs.osvi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Inline panel and frameworks

> Place the chat panel in your layout or render Osvi AI interactive tools

Import the UI entry once in the browser to register the custom elements:

```js theme={null}
import "@osvi-ai/chat/ui";
```

Then place a panel wherever it belongs in the page:

```html theme={null}
<osvi-chat
  agent-id="agent_yourAgentId"
  base-url="https://api.osvi.ai"
  header-title="Talk to our team"
  header-subtitle="We usually reply quickly"
  header-avatar="https://example.com/support.png"
  new-chat="true"
  primary-color="#1447e6"
  radius="md"
  mode="light"
  buttons="chips"
  carousel="slider"
  powered-by="true"
  theme='{"mode":"light"}'
  strings='{"send":"Send"}'>
</osvi-chat>
```

A bare `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`:

```js theme={null}
const chat = document.querySelector("osvi-chat");
chat.theme = { mode: "dark", colors: { primary: "#2563eb" } };
chat.variants = { buttons: "list", carousel: "slider" };
```

## 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.

```jsx theme={null}
function SupportChat({ agentId }) {
  return <osvi-chat key={agentId} agent-id={agentId} header-title="Support" />;
}
```

### Vue

Use `.prop` to bind object-valued properties:

```html theme={null}
<osvi-chat :agent-id="agentId" :theme.prop="theme" />
```

### 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](/website-chat/configuration#widget-options).

## 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](/website-chat/headless).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.