@yak-io/nuxt 0.3.0 → 0.4.0

package/README.md

@@ -1,29 +1,39 @@
 # @yak-io/nuxt
 
-Nuxt 3 integration for the Yak embeddable chat widget. Provides a plugin-compatible factory that auto-mounts on `app:mounted` and provides the widget API via Nuxt's plugin system.
+> 📚 **Full documentation:** https://docs.yak.io/docs/sdks/nuxt
+>
+> 🤖 **For LLMs / AI agents:** https://docs.yak.io/llms.txt
 
-## Installation
+Nuxt 3 SDK for [Yak](https://docs.yak.io) — an embeddable AI assistant (text chat **and** push-to-talk voice) for web apps. Register `createYakProvider` in a client plugin and expose the `YakApi` (Vue refs) through `useNuxtApp()`.
 
 ```bash
 pnpm add @yak-io/nuxt
 ```
 
+## Exports
+
+| Export | Kind | Purpose |
+| --- | --- | --- |
+| `createYakProvider(options)` | fn | Create a widget instance. Returns a `YakApi` with refs + `mount`/`destroy`. |
+| `enableYakLogging` / `disableYakLogging` / `isYakLoggingEnabled` | fn | Toggle verbose SDK logging. |
+| Types | — | `YakProviderOptions`, `YakApi`, `ToolCallEventHandler`, plus core types from `@yak-io/javascript`. |
+
 ## Quickstart
 
-### 1. Create a Nuxt plugin
+### 1. Create a client plugin
 
 ```ts
 // plugins/yak.client.ts
-import { defineNuxtPlugin } from "#app";
-import { createYakProvider, enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/nuxt";
+import { createYakProvider } from "@yak-io/nuxt";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const runtimeConfig = useRuntimeConfig();
 
   const yak = createYakProvider({
-    appId: runtimeConfig.public.yakAppId,
+    appId: runtimeConfig.public.yakAppId as string,
+    mode: "both",   // "chat" | "voice" | "both" — default "chat"
+    trigger: true,  // show the floating launcher pill
     theme: { position: "bottom-right", colorMode: "system" },
-    trigger: { label: "Ask with AI" },
     getConfig: async () => {
       const res = await fetch("/api/yak");
       return res.json();
@@ -38,89 +48,103 @@ export default defineNuxtPlugin((nuxtApp) => {
       if (!data.ok) throw new Error(data.error);
       return data.result;
     },
-    onRedirect: (path) => {
-      navigateTo(path);
-    },
+    onRedirect: (path) => navigateTo(path),
   });
 
-  // Mount on client, clean up on HMR
   nuxtApp.hook("app:mounted", () => yak.mount());
-  if (import.meta.hot) {
-    import.meta.hot.dispose(() => yak.destroy());
-  }
-
-  return {
-    provide: {
-      yak,
-      yakLogging: { enableYakLogging, disableYakLogging, isYakLoggingEnabled },
-    },
-  };
+  if (import.meta.hot) import.meta.hot.dispose(() => yak.destroy());
+
+  return { provide: { yak } };
 });
 ```
 
-### 2. Access in components
+The `.client.ts` suffix keeps the widget out of SSR. Use `runtimeConfig.public.yakAppId` (set via `NUXT_PUBLIC_YAK_APP_ID`).
 
-```ts
-// Any component <script setup>
+### 2. Access it in components
+
+```vue
+<script setup lang="ts">
 const { $yak } = useNuxtApp();
-const { open, openWithPrompt, isOpen, isReady } = $yak;
+const { open, openWithPrompt, isOpen } = $yak;
+</script>
+
+<template>
+  <button @click="open">Open chat</button>
+  <button @click="openWithPrompt('How do I get started?')">Get help</button>
+  <span v-if="isOpen">Chat is open</span>
+</template>
 ```
 
-`isOpen` and `isReady` are Vue `readonly` refs:
+`isOpen`/`isReady` are `readonly` Vue refs.
+
+## Voice
+
+Set `mode: "voice"` or `mode: "both"`, then drive the session. `voiceStart()` must run from a user gesture (browser mic requirement).
+
+```vue
+<script setup lang="ts">
+const { $yak } = useNuxtApp();
+const { voiceToggle, voiceLoading, voiceMachine } = $yak;
+</script>
 
-```html
 <template>
-  <button @click="open">Open Chat</button>
-  <span v-if="isOpen">Chat is open</span>
+  <button @click="voiceToggle" :disabled="voiceLoading">
+    {{ voiceMachine.state === "idle" ? "Start voice" : `Stop (${voiceMachine.state})` }}
+  </button>
 </template>
 ```
 
-### 3. Subscribe to tool events
+## Tool events
 
 ```ts
 const { $yak } = useNuxtApp();
 
 $yak.subscribeToToolEvents((event) => {
-  if (event.ok && event.name.startsWith("tasks.")) {
-    refreshTasks();
-  }
+  // { name, args, ok, result?, error? }
+  if (event.ok && event.name.startsWith("tasks.")) refreshTasks();
 });
 ```
 
-## API Reference
+## API reference
 
 ### `createYakProvider(options)`
 
-Creates a Yak widget instance. Returns a `YakApi` with Vue-reactive refs for reactive state.
-
-You must call `yak.mount()` on the client side (e.g., in the `app:mounted` hook) and `yak.destroy()` when cleaning up.
-
-**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 |
+Returns a `YakApi`. Call `yak.mount()` on the client (e.g. the `app:mounted` hook) and `yak.destroy()` on cleanup.
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `appId` | `string` | — | Your Yak app ID (required). |
+| `mode` | `"chat" \| "voice" \| "both"` | `"chat"` | Which surfaces the widget exposes. |
+| `trigger` | `boolean \| TriggerButtonConfig` | `false` | Show the floating pill. **Set `true`** to display it; `TriggerButtonConfig` recolors it. |
+| `getConfig` | `ChatConfigProvider` | — | Async provider of routes + tools. Called on open / voice start. |
+| `onToolCall` | `ToolCallHandler` | — | Executes a tool the assistant calls. |
+| `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | — | Handles GraphQL schema tool calls. |
+| `onRESTSchemaCall` | `RESTSchemaHandler` | — | Handles REST/OpenAPI schema tool calls. |
+| `theme` | `Theme` | — | Position, color mode, and colors. |
+| `onRedirect` | `(path: string) => void` | `window.location.assign` | Navigation handler. |
+| `disableRestartButton` | `boolean` | `false` | Hide the restart-session button. |
 
 ### `YakApi`
 
 ```ts
 type YakApi = {
-  isOpen: DeepReadonly<Ref<boolean>>;  // Vue readonly ref
-  isReady: DeepReadonly<Ref<boolean>>; // Vue readonly ref
+  // chat
+  isOpen: DeepReadonly<Ref<boolean>>;
+  isReady: DeepReadonly<Ref<boolean>>;
+  chatLoading: DeepReadonly<Ref<boolean>>; // isOpen && !isReady
   open: () => void;
   close: () => void;
   openWithPrompt: (prompt: string) => void;
   subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
-  mount: () => void;    // Call in app:mounted hook
-  destroy: () => void;  // Call on HMR dispose / cleanup
+  // voice
+  voiceMachine: DeepReadonly<Ref<VoiceMachine>>; // { state, errorMessage? }
+  voiceLoading: DeepReadonly<Ref<boolean>>; // state === "connecting"
+  voiceStart: () => Promise<void>;
+  voiceStop: () => Promise<void>;
+  voiceToggle: () => Promise<void>;
+  // lifecycle
+  mount: () => void;    // call in app:mounted
+  destroy: () => void;  // call on HMR dispose / cleanup
 };
 ```
 
@@ -129,9 +153,7 @@ type YakApi = {
 ```ts
 import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/nuxt";
 
-enableYakLogging();    // Enable verbose SDK logs
-disableYakLogging();   // Disable SDK logs
-isYakLoggingEnabled(); // → boolean
+enableYakLogging(); // verbose SDK logs
 ```
 
 ## Types
@@ -145,11 +167,13 @@ import type {
   ToolCallHandler,
   ToolCallEvent,
   Theme,
-  TriggerButtonConfig,
+  WidgetMode,
   WidgetPosition,
+  VoiceState,
+  VoiceMachine,
 } from "@yak-io/nuxt";
 ```
 
 ## License
 
-Proprietary — see LICENSE file.
+Proprietary — see [LICENSE](./LICENSE).

package/dist/plugin.d.ts

@@ -13,18 +13,35 @@ export type YakProviderOptions = {
     disableRestartButton?: boolean;
     trigger?: boolean | TriggerButtonConfig;
 };
+/** Reactive handle for controlling the Yak widget — chat + voice — from Nuxt. */
 export type YakApi = {
+    /** Whether the chat panel is currently open. */
     isOpen: DeepReadonly<Ref<boolean>>;
+    /** Whether the chat iframe is ready to receive messages. */
     isReady: DeepReadonly<Ref<boolean>>;
+    /** Whether the chat is opening but not yet interactive (`isOpen && !isReady`). */
+    chatLoading: DeepReadonly<Ref<boolean>>;
+    /** Open the chat panel. */
     open: () => void;
+    /** Close the chat panel. */
     close: () => void;
+    /** Open the chat panel and send a specific prompt. */
     openWithPrompt: (prompt: string) => void;
+    /** Subscribe to tool-call completion events; returns an unsubscribe function. */
     subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
+    /** Current voice state-machine snapshot. `idle` when mode is `chat`. */
     voiceMachine: DeepReadonly<Ref<VoiceMachine>>;
+    /** Whether the voice session is establishing its connection (`state === "connecting"`). */
+    voiceLoading: DeepReadonly<Ref<boolean>>;
+    /** Start a voice session. Must be invoked from a user gesture. */
     voiceStart: () => Promise<void>;
+    /** Stop the current voice session. */
     voiceStop: () => Promise<void>;
+    /** Toggle voice: start if idle/error, stop if active. */
     voiceToggle: () => Promise<void>;
+    /** Mount the widget into the DOM. */
     mount: () => void;
+    /** Tear down the widget and remove its listeners. */
     destroy: () => void;
 };
 /**

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAGzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EACV,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,GAAG,EAAiB,MAAM,KAAK,CAAC;AAIjE,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACpC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IACrE,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC9C,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAIF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAmGrE"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAGzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EACV,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAY,KAAK,YAAY,EAAE,KAAK,GAAG,EAAiB,MAAM,KAAK,CAAC;AAI3E,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACzC,CAAC;AAEF,iFAAiF;AACjF,MAAM,MAAM,MAAM,GAAG;IAEnB,gDAAgD;IAChD,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,4DAA4D;IAC5D,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACpC,kFAAkF;IAClF,WAAW,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACxC,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,sDAAsD;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iFAAiF;IACjF,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IAErE,wEAAwE;IACxE,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC9C,2FAA2F;IAC3F,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,kEAAkE;IAClE,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,yDAAyD;IACzD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAIF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAwGrE"}

package/dist/plugin.js

@@ -1,5 +1,5 @@
 import { INITIAL_VOICE_MACHINE, logger, YakEmbed, } from "@yak-io/javascript";
-import { readonly, ref } from "vue";
+import { computed, readonly, ref } from "vue";
 // ── Provider factory ────────────────────────────────────────────────────────
 /**
  * Creates a yak widget (chat + voice) for Nuxt.
@@ -75,9 +75,12 @@ export function createYakProvider(options) {
             logger.warn("Voice start failed", err);
         }
     };
+    const chatLoading = computed(() => isOpen.value && !isReady.value);
+    const voiceLoading = computed(() => voiceMachine.value.state === "connecting");
     return {
         isOpen: readonly(isOpen),
         isReady: readonly(isReady),
+        chatLoading,
         open: () => embed.open(),
         close: () => embed.close(),
         openWithPrompt: (prompt) => embed.openWithPrompt(prompt),
@@ -88,6 +91,7 @@ export function createYakProvider(options) {
             };
         },
         voiceMachine: readonly(voiceMachine),
+        voiceLoading,
         voiceStart,
         voiceStop: () => embed.voiceStop(),
         voiceToggle: () => embed.voiceToggle(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/nuxt",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Nuxt 3 module for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -25,6 +25,7 @@
     "node": ">=18"
   },
   "files": [
+    "README.md",
     "dist",
     "LICENSE"
   ],
@@ -41,7 +42,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.8.0"
+    "@yak-io/javascript": "0.9.0"
   },
   "peerDependencies": {
     "nuxt": "^3.0.0",
@@ -53,6 +54,7 @@
     "vue": "^3.5.34",
     "@repo/typescript-config": "0.0.0"
   },
+  "homepage": "https://docs.yak.io/docs/sdks/nuxt",
   "scripts": {
     "build": "tsc",
     "check-types": "tsc --noEmit",