@yak-io/svelte

Svelte integration for the Yak embeddable chat widget. Uses Svelte stores for reactive state.

Installation

pnpm add @yak-io/svelte

Quickstart

1. Initialize the provider (module scope)

// src/yak.ts
import { onMount, onDestroy } from "svelte";
import { createYakProvider } from "@yak-io/svelte";

export const yak = 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) => {
    goto(path);
  },
});

2. Mount and destroy in your root component

<!-- App.svelte -->
<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { yak } from "./yak.ts";

  onMount(() => yak.mount());
  onDestroy(() => yak.destroy());
</script>

<slot />

3. Use stores in components

isOpen and isReady are Svelte Readable stores — subscribe with $:

<script lang="ts">
  import { yak } from "../yak.ts";
  const { isOpen, isReady, open, openWithPrompt } = yak;
</script>

<button on:click={open}>Open Chat</button>
{#if $isOpen}
  <p>Chat is open</p>
{/if}
{#if $isOpen && !$isReady}
  <p>Loading…</p>
{/if}

4. Subscribe to tool events

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

API Reference

createYakProvider(options)

Creates a Yak widget instance. Returns a YakApi with Svelte stores for reactive state.

You must call yak.mount() in onMount() and yak.destroy() in onDestroy().

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 |

YakApi

type YakApi = {
  isOpen: Readable<boolean>;   // Svelte store
  isReady: Readable<boolean>;  // Svelte store
  open: () => void;
  close: () => void;
  openWithPrompt: (prompt: string) => void;
  subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
  mount: () => void;    // Call in onMount()
  destroy: () => void;  // Call in onDestroy()
};

Logging

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

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/svelte";

License

Proprietary — see LICENSE file.