Embed an AI agent in a Vue app

Register the widget

Create a single-file component that injects the two scripts and passes your router to the agent, then mount it once in your root App.vue.

<!-- components/ActbrowWidget.vue -->
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const BASE_URL = 'https://actbrow-backend.depak.dev';
const router = useRouter();

onMounted(() => {
  // Hand the agent your Vue Router so it can navigate your SPA.
  window.ActbrowWidgetConfig = {
    assistantId: 'YOUR_ASSISTANT_ID',
    baseUrl: BASE_URL,
    apiKey: 'wk_...',
    navigate: (path) => router.push(path),
  };

  const sdk = document.createElement('script');
  sdk.src = BASE_URL + '/actbrow-sdk.js';
  sdk.onload = () => {
    const widget = document.createElement('script');
    widget.src = BASE_URL + '/actbrow-widget.js';
    document.body.appendChild(widget);
  };
  document.body.appendChild(sdk);
});
</script>

<template><!-- widget mounts itself --></template>

Next steps

• Full docs & REST tool execution
• React example
• Self-host with Docker