Autopilot Client

Appearance

5. Adding the bar ​

The fastest path to a usable UI is enableAutopilotBar(). It mounts a floating toggle button and an overlay chat surface that shares the same Pinia store the rest of your app already uses.

Mount the bar after the app mounts ​

ts
// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { enableAutopilotBar } from '@llmor/autopilot-bar';
import App from './App.vue';
import { bootAutopilot, client } from './autopilot';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

bootAutopilot().then(() => {
  enableAutopilotBar(client);
});

A floating button appears in the bottom-right of the page. Click it: the overlay opens, the messages from the conversation render, and the input box at the bottom sends user messages.

Try it:

  1. Type "What's the weather in the city I selected?"
  2. The autopilot calls your get_weather function (you'll see the function-call indicator render in the message stream).
  3. The response streams back into the same message.

Order matters ​

  • Call setAutopilotClient(client) (or use new AutopilotClient() and setAutopilotClient(client) — we did this in step 2) before enableAutopilotBar().
  • enableAutopilotBar() must run after app.mount() if your Vue app uses Pinia and you want the bar to share that Pinia instance. The bar creates its own apps, but it can only share state because both ends of the singleton are wired up first.

Tearing down ​

ts
const bar = enableAutopilotBar(client);

// later (e.g. on route change for a non-SPA setup)
bar.destroy();

The destroy() call unmounts both Vue apps and removes the host elements from the DOM.

Style isolation ​

The overlay lives inside a Shadow DOM, so your global CSS does not affect it and the bar's Tailwind output does not affect your page. The only host context the overlay inherits is fonts.

The toggle button, on the other hand, lives in the regular DOM (so it participates in the host page's stacking context). Its styles are scoped with the [data-autopilot-scope] attribute — see Shadow DOM isolation.

Done ​

You now have a complete autopilot integration: a connected client, a function the autopilot can call, context that tracks the user's selection, and a working UI. From here, head into the reference sections for everything you skipped: