Svelte SDK

The @yak-io/svelte package provides a Svelte-compatible provider for integrating Yak. It exposes Svelte readable stores for reactive state and explicit mount()/destroy() methods for lifecycle control.

Installation

npm install @yak-io/svelte @yak-io/javascript

pnpm add @yak-io/svelte @yak-io/javascript

yarn add @yak-io/svelte @yak-io/javascript

bun add @yak-io/svelte @yak-io/javascript

Quick Start

Set up the provider in your root component

Call createYakProvider and wire up mount()/destroy() to Svelte's lifecycle:

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

const yak = createYakProvider({
  appId: "your-app-id",
  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;
  },
});

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

<slot />

Set up server handlers

Use @yak-io/javascript to create the API endpoints on your backend. See the JavaScript SDK for runtime-specific examples (Express, Hono, Cloudflare Workers, etc.).

// api/yak.ts
import { createYakHandler } from "@yak-io/javascript/server";

export const { GET, POST } = createYakHandler({
  routes: [
    { path: "/", title: "Home" },
    { path: "/products", title: "Products" },
  ],
});

API

createYakProvider

Creates a Yak widget instance with Svelte-compatible stores. Unlike the Vue and React SDKs, the Svelte SDK does not use framework-level context — you manage the lifecycle explicitly with mount() and destroy().

Option	Type	Required	Description
`appId`	`string`	Yes	Your Yak application ID
`getConfig`	`() => Promise<ChatConfig> \| ChatConfig`	No	Config provider for routes and tools
`onToolCall`	`(name, args) => Promise<unknown>`	No	Handler for tool execution
`theme`	`Theme`	No	Widget styling options
`onRedirect`	`(path: string) => void`	No	Custom navigation handler
`disableRestartButton`	`boolean`	No	Hide the restart button in the header
`trigger`	`boolean \| TriggerButtonConfig`	No	Configure the floating trigger button

Return value (`YakApi`)

Property	Type	Description
`isOpen`	`Readable<boolean>`	Whether the chat panel is currently open
`isReady`	`Readable<boolean>`	Whether the widget iframe is ready
`open`	`() => void`	Open the chat panel
`close`	`() => void`	Close the chat panel
`openWithPrompt`	`(prompt: string) => void`	Open and send a specific prompt
`subscribeToToolEvents`	`(handler) => () => void`	Subscribe to tool call events (returns unsubscribe)
`mount`	`() => void`	Mount the widget DOM — call in `onMount`
`destroy`	`() => void`	Destroy the widget DOM — call in `onDestroy`

Reactive State

isOpen and isReady are Svelte readable stores. Access their values with the $ prefix in templates or subscribe manually:

<script lang="ts">
const { isOpen, isReady, open, close } = yak;
</script>

<button on:click={() => open()}>Open Chat</button>
{#if $isOpen}
  <button on:click={() => close()}>Close</button>
{/if}
<p>Ready: {$isReady}</p>

Tool Events

Subscribe to tool call completion events for UI synchronization:

<script lang="ts">
import { onDestroy } from "svelte";

const unsubscribe = yak.subscribeToToolEvents((event) => {
  if (event.ok && event.name.startsWith("order.")) {
    refreshOrders();
  }
});

onDestroy(unsubscribe);
</script>

Router Integration

Pass SvelteKit's navigation function to onRedirect for client-side navigation:

<script lang="ts">
import { goto } from "$app/navigation";
import { createYakProvider } from "@yak-io/svelte";

const yak = createYakProvider({
  appId: "your-app-id",
  onRedirect: (path) => goto(path),
  // ...other options
});
</script>