Vue integration overview

The autopilot-client/vue entry point is headless: a reactive Pinia store, composables, and renderless components (logic + scoped slots, no markup and no styles). You bring your own UI. If you want a styled, drop-in chat surface instead, use @llmor/autopilot-bar — it is the only layer that ships markup and CSS, and it is built on these same primitives.

When to use this layer

• You are building UI with Vue 3 and want autopilot state as reactive refs.
• You want to render the conversation yourself with your own markup and design system.
• You want to call the autopilot client from inside components without prop-drilling it.

If you just want a working chat UI with no custom rendering, use enableAutopilotBar.

Setup

// 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);

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

await client.connect({ conversationUrl: '…' });

Two things to call out:

1. Pinia must be installed before any component calls useAutopilotStore(). That is just standard Pinia.
2. setAutopilotClient(client) must be called before the store initializes. The store grabs the singleton in its setup function and wires listeners on it — if the singleton is empty, those listeners never get attached.

What you import from autopilot-client/vue

import {
  // Pinia stores
  useAutopilotStore,
  useAutopilotConversation,

  // Composables — the headless logic surface
  useAskUser,
  useConfirmations,
  useAutopilotContext,
  useAskUserForm,
  useMessageComposer,
  useFunctionCallDetails,

  // Renderless components (scoped slots, no markup, no styles)
  AutopilotOverlay,
  ConversationMessage,
  ConversationMessageAssistant,
  ConfirmationPrompt,
  AskUserPrompt,

  // Formatting helpers (no styling)
  renderMarkdown,
  translateFunctionName,
  getFunctionIcon,
  formatDateTime,
} from '@llmor/autopilot-vue';

The styled AutopilotBar / AutopilotButton widgets live in @llmor/autopilot-bar, not here.

Peer dependencies

The ./vue entry has these peer dependencies you install yourself:

npm install vue pinia

marked ships as a regular dependency (used by renderMarkdown). Icons (@tabler/icons-vue) are only needed for the styled bar, not the headless layer.

Pages

• useAutopilotStore — full reactive state catalog.
• useAutopilotConversation — message-focused composable.
• Components — the renderless components and their slot props.
• Recipes — common patterns: per-component function registration, reacting to streaming, syncing route into context.