Vue

useLoushoAgent() for Vue 3 is the React hook as a composable: the same sources, the same state and the same actions, over the same typed event stream. Read React for what each field means, the two kinds of source, how approvals work and the server side; this page covers what differs. It lives in the @lousho/build-ai-agent/vue subpath. vue (3.x) is an optional peer dependency: install it in the app that uses the composable.

import { useLoushoAgent } from '@lousho/build-ai-agent/vue';

// In <script setup>:
const { messages, status, pendingApproval, send, stop, approve, reject, reset } = useLoushoAgent(
  { url: '/api/agent' },
  { approvalsUrl: '/api/approvals' }
);

export async function submit(text: string): Promise<void> {
  if (text.trim() && status.value !== 'streaming') await send(text);
}

export { messages, status, pendingApproval, stop, approve, reject, reset };

and in the template:

<article v-for="message in messages" :key="message.id">
  <header>{{ message.role }}</header>
  <p>{{ message.text }}</p>
  <code v-for="call in message.toolCalls" :key="call.id">{{ call.name }}: {{ call.status }}</code>
</article>
<p v-if="pendingApproval">
  Run {{ pendingApproval.toolName }}?
  <button @click="approve()">Approve</button>
  <button @click="reject('Not now')">Reject</button>
</p>
<button v-if="status === 'streaming'" @click="stop">Stop</button>

What differs from React

State is refs. messages, status, pendingApproval, error, usage and lastEvent are read-only ComputedRefs: use .value in script, nothing in a template. The commands (send, stop, approve, reject, answer) are plain functions with the React hook’s signatures.
reset() aborts the run in flight, forgets the in-process session ({ agent, sessionId } starts a new conversation) and clears the state.
The source and options can be refs. Pass a plain object or a ref; it is read when a turn starts, so a changed url or agent applies to the next turn.
Cleanup is scope disposal. stop() aborts the request in flight, and so does stopping the owning scope: a component unmounting, or effectScope().stop() in tests and plain scripts. Called outside any scope, the composable has nothing to dispose: call stop() yourself.

The reducer and the stream parser are exported from this subpath too (reduceAgentEvents, initialAgentUIState, parseEventStream), the same ones as in @lousho/build-ai-agent/react.

Get started

Build an agent

Compose agents

Run it reliably

Put it in front of people

Test and observe

Ship

What differs from React

​What differs from React

What differs from React