Autopilot Client

Appearance

1. Project setup ​

In this five-step tutorial you will build a weather assistant — a small Vite + Vue 3 app that connects to an LLMOR autopilot, registers a get_weather function the autopilot can call, syncs the user's selected city into context, and renders the conversation with the drop-in AutopilotBar.

By the end you will have touched every public layer of the library.

Prerequisites ​

  • Node 18+
  • An autopilot conversation URL from your LLMOR backend. For this tutorial we will call it CONVERSATION_URL.

Scaffold a Vite + Vue project ​

bash
npm create vite@latest weather-assistant -- --template vue-ts
cd weather-assistant
npm install

Install runtime dependencies ​

The autopilot packages live in a private static npm registry served from docs.llmor.com. Point npm at it for the @llmor scope by adding one line to your project's .npmrc:

ini
# .npmrc
@llmor:registry=https://docs.llmor.com/autopilot-client/registry/

Then install the Vue layer and its peer dependencies:

bash
npm install @llmor/autopilot-vue pinia @tabler/icons-vue

@llmor/autopilot-vue declares vue, pinia, and @tabler/icons-vue as peer dependencies. vue is already installed by the Vite template; the others you install above. @llmor/autopilot-core is pulled in automatically as a regular dependency.

Later in the tutorial we will swap in the drop-in bar — when you get there you can also install @llmor/autopilot-bar:

bash
npm install @llmor/autopilot-bar

Set up Pinia ​

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

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

Add an env file ​

bash
# .env.local
VITE_CONVERSATION_URL=https://llmor.example.com/v1/conversations/<token>

import.meta.env.VITE_CONVERSATION_URL is now available in code.

Replace the starter template ​

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

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

<template>
  <main>
    <h1>Weather assistant</h1>
    <label>
      City:
      <input v-model="city" />
    </label>
    <p>Ask the assistant about the weather in {{ city }}.</p>
  </main>
</template>

Run npm run dev — you should see the empty page. Next step: connect to the autopilot.