Autopilot Client

Appearance

2. Connecting ​

Create the client once at app startup, register it as the singleton (so the Pinia store and the bar can find it), and call connect().

Create the client ​

ts
// src/autopilot.ts
import { AutopilotClient, setAutopilotClient } from '@llmor/autopilot-core';

export const client = new AutopilotClient();
setAutopilotClient(client);

export async function bootAutopilot() {
  await client.connect({
    conversationUrl: import.meta.env.VITE_CONVERSATION_URL,
  });
}

setAutopilotClient() stores the instance in a module-level singleton that useAutopilotClient(), useAutopilotStore(), and enableAutopilotBar() all rely on. Forgetting it is the most common integration mistake.

Boot it from main.ts ​

ts
// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { bootAutopilot } from './autopilot';

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

bootAutopilot().catch((err) => {
  console.error('autopilot failed to connect', err);
});

We do not await bootAutopilot() before mounting — that lets the UI render immediately and shows a "connecting…" state instead of a blank page.

Render the connection status ​

vue
<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import { useAutopilotStore } from '@llmor/autopilot-vue';

const store = useAutopilotStore();
const city = ref('Berlin');
</script>

<template>
  <main>
    <h1>Weather assistant</h1>
    <p>Status: <strong>{{ store.connectionStatus }}</strong></p>
    <label>
      City:
      <input v-model="city" />
    </label>
  </main>
</template>

Reload the page and you should briefly see connecting, then connected. If you see disconnected permanently, check the URL and your network tab for the initial HTTP request — that fetch is what surfaces a bad token.

Verify ​

ts
// In the browser console
window.dispatchEvent(new CustomEvent('debug'));

Or simply watch the store in Vue DevTools — connectionStatus, conversation, and messages should populate within a second or two.

Next: register a function the autopilot can call.