Autopilot Client

Appearance

Quick start ​

Three minimal recipes, one per layer. All assume you have a conversation URL from your backend:

https://llmor.example.com/v1/conversations/<token>

1. Headless client ​

ts
import { AutopilotClient } from '@llmor/autopilot-core';

const client = new AutopilotClient();

client.on('status', (status) => console.log('status:', status));
client.on('completionStream', ({ chunk }) => process.stdout.write(chunk));

await client.connect({
  conversationUrl: 'https://llmor.example.com/v1/conversations/<token>',
});

client.registerFunction({
  name: 'get_current_time',
  description: 'Returns the current ISO timestamp.',
  handler: () => new Date().toISOString(),
});

await client.engageAutopilot('What time is it?');

→ Continue with the Client overview.

2. Vue 3 + Pinia store ​

ts
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { AutopilotClient, setAutopilotClient } from '@llmor/autopilot-core';
import App from './App.vue';

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

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

await client.connect({
  conversationUrl: 'https://llmor.example.com/v1/conversations/<token>',
});
vue
<!-- ChatStatus.vue -->
<script setup lang="ts">
import { useAutopilotStore } from '@llmor/autopilot-vue';

const store = useAutopilotStore();
</script>

<template>
  <p>Status: {{ store.connectionStatus }}</p>
  <p>Messages: {{ store.messageCount }}</p>
  <p v-if="store.isStreaming">{{ store.streamingMessage?.message }}</p>
</template>

→ Continue with the Vue overview.

3. Drop-in AutopilotBar ​

html
<!doctype html>
<html>
  <body>
    <script src="https://docs.llmor.com/autopilot-client/pkg/cdn/autopilot-core.standalone.min.js"></script>
    <script src="https://docs.llmor.com/autopilot-client/pkg/cdn/autopilot-bar.standalone.min.js"></script>
    <script>
      const client = AutopilotClient.useAutopilotClient();
      client.connect({
        conversationUrl: 'https://llmor.example.com/v1/conversations/<token>',
      });
      AutopilotBar.enableAutopilotBar(client);
    </script>
  </body>
</html>

That is the whole integration — a floating toggle button appears in the bottom-right, opening a chat overlay isolated by Shadow DOM.

→ Continue with the Bar overview.