@yak-io/vue

Vue 3 integration for the Yak embeddable chat widget. Uses Vue's Composition API with reactive refs.

Installation

pnpm add @yak-io/vue

Quickstart

1. Initialize in your root component

// App.vue <script setup>
import { createYakProvider } from "@yak-io/vue";

createYakProvider({
  appId: import.meta.env.VITE_YAK_APP_ID,
  theme: { position: "bottom-right", colorMode: "system" },
  trigger: { label: "Ask with AI" },
  getConfig: async () => {
    const res = await fetch("/api/yak");
    return res.json();
  },
  onToolCall: async (name, args) => {
    const res = await fetch("/api/yak", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, args }),
    });
    const data = await res.json();
    if (!data.ok) throw new Error(data.error);
    return data.result;
  },
  onRedirect: (path) => {
    router.push(path);
  },
});

createYakProvider calls onMounted and onUnmounted internally — no manual lifecycle management needed.

2. Use in descendant components

// MyComponent.vue <script setup>
import { useYak } from "@yak-io/vue";

const { open, openWithPrompt, isOpen, isReady } = useYak();

isOpen and isReady are readonly Vue refs — use them like any other ref:

<template>
  <div>
    <button @click="open">Open Chat</button>
    <p v-if="isOpen">Chat is open</p>
    <p v-if="!isReady && isOpen">Loading…</p>
  </div>
</template>

3. Subscribe to tool events

import { useYakToolEvent } from "@yak-io/vue";

useYakToolEvent((event) => {
  if (event.ok && event.name.startsWith("tasks.")) {
    refreshTasks();
  }
});

Automatically unsubscribes when the component unmounts.

API Reference

createYakProvider(options)

Call once in your root/layout component. Sets up the widget, registers lifecycle hooks, and provides the API to all descendant components via Vue's provide/inject.

Returns a YakApi object (same as useYak()).

Options:

| Option | Type | Description | |--------|------|-------------| | appId | string | Your Yak app ID | | getConfig | ChatConfigProvider | Async function returning routes + tools. Called on first open. | | onToolCall | ToolCallHandler | Handle tool invocations from the assistant | | onGraphQLSchemaCall | GraphQLSchemaHandler | Handle GraphQL schema tool calls | | onRESTSchemaCall | RESTSchemaHandler | Handle REST/OpenAPI schema tool calls | | theme | Theme | Position, color mode, and custom colors | | onRedirect | (path: string) => void | Navigation handler (defaults to window.location.assign) | | disableRestartButton | boolean | Hide the restart session button | | trigger | boolean \| TriggerButtonConfig | Built-in trigger button |

useYak()

Inject the widget API in any descendant component.

const {
  isOpen,             // DeepReadonly<Ref<boolean>>
  isReady,            // DeepReadonly<Ref<boolean>>
  open,               // () => void
  close,              // () => void
  openWithPrompt,     // (prompt: string) => void
  subscribeToToolEvents, // (handler) => () => void
} = useYak();

Throws if called outside a component tree where createYakProvider was used.

useYakToolEvent(handler)

Subscribe to tool call completion events. Unsubscribes automatically on component unmount.

Logging

import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/vue";

enableYakLogging();    // Enable verbose SDK logs
disableYakLogging();   // Disable SDK logs
isYakLoggingEnabled(); // → boolean

Types

import type {
  YakProviderOptions,
  YakApi,
  ToolCallEventHandler,
  ChatConfigProvider,
  ToolCallHandler,
  ToolCallEvent,
  Theme,
  TriggerButtonConfig,
  WidgetPosition,
} from "@yak-io/vue";

License

Proprietary — see LICENSE file.