AutopilotBar overview

AutopilotBar is the drop-in chat UI. One call wires up a floating toggle button and an overlay chat surface, both backed by the headless client.

import { enableAutopilotBar } from '@llmor/autopilot-bar';

const bar = enableAutopilotBar(client);
// later:
bar.destroy();

What it mounts

enableAutopilotBar() adds two top-level elements to document.body:

1. Toggle button — a floating action button (regular DOM, scoped via [data-autopilot-scope]). Lives in the host page's stacking context so it can sit above arbitrary content.
2. Overlay host — a host element with an attached Shadow DOM that contains the chat surface. The Tailwind CSS the bar uses is injected into the shadow root, so it does not leak into the page (and the page's CSS does not leak in either, except for inherited fonts).

Both Vue apps share the same Pinia instance. That means:

• Anything your app puts in useAutopilotStore is visible to the bar.
• Anything the bar's components mutate (isBarOpen, recentActivity) is visible to your app.

Order of operations

// 1. Create the client
const client = new AutopilotClient();

// 2. Register it as the singleton — enableAutopilotBar relies on this
setAutopilotClient(client);

// 3. Connect (optional — the bar's connection UI can do this too)
await client.connect({ conversationUrl: '…' });

// 4. Mount
const bar = enableAutopilotBar(client);

If you are inside a Vue app that mounted with app.use(createPinia()), call enableAutopilotBar() after app.mount() so the bar's Pinia instance and your app's Pinia instance refer to the same store.

Return value

const bar = enableAutopilotBar(client);
bar.destroy();

destroy() unmounts both Vue apps and removes the DOM containers. Safe to call multiple times.

Pages in this section

• Embed in plain HTML — the IIFE path, no bundler.
• Embed in a Vue app — the import path, inside Vite or webpack.
• Shadow DOM isolation — what crosses the boundary and what does not.
• Lifecycle — destroy, reconnect, SPA route teardown.