@yak-io/angular

Angular integration for the Yak embeddable chat widget. Uses a factory function compatible with Angular's component and service patterns.

Installation

pnpm add @yak-io/angular

Quickstart

1. Initialize in your root component

// app.component.ts
import { Component, OnInit, OnDestroy, inject } from "@angular/core";
import { Router } from "@angular/router";
import { createYakProvider, type YakApi } from "@yak-io/angular";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  standalone: true,
  template: "<router-outlet />",
})
export class AppComponent implements OnInit, OnDestroy {
  private router = inject(Router);
  private yak: YakApi;

  constructor() {
    this.yak = createYakProvider({
      appId: environment.yakAppId,
      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) => {
        this.router.navigateByUrl(path);
      },
    });
  }

  ngOnInit() {
    this.yak.mount();
  }

  ngOnDestroy() {
    this.yak.destroy();
  }
}

2. Share via an Angular service

Create a service to share the widget API across components:

// yak.service.ts
import { Injectable, signal } from "@angular/core";
import type { YakApi } from "@yak-io/angular";

@Injectable({ providedIn: "root" })
export class YakService {
  private yak: YakApi | null = null;
  readonly isOpen = signal(false);
  readonly isReady = signal(false);

  setYak(yak: YakApi) {
    this.yak = yak;
    yak.subscribeToState(({ isOpen, isReady }) => {
      this.isOpen.set(isOpen);
      this.isReady.set(isReady);
    });
  }

  open() { this.yak?.open(); }
  close() { this.yak?.close(); }
  openWithPrompt(prompt: string) { this.yak?.openWithPrompt(prompt); }
}

3. Use in components

// any.component.ts
import { Component, inject } from "@angular/core";
import { YakService } from "./yak.service";

@Component({
  template: `
    <button (click)="yakService.open()">Open Chat</button>
    <p *ngIf="yakService.isOpen()">Chat is open</p>
  `,
})
export class AnyComponent {
  yakService = inject(YakService);
}

API Reference

createYakProvider(options)

Creates a Yak widget instance. Returns a YakApi object.

Call yak.mount() in ngOnInit() and yak.destroy() in ngOnDestroy().

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 = {
  readonly isOpen: boolean;  // Plain boolean (use subscribeToState for reactivity)
  readonly isReady: boolean; // Plain boolean
  open: () => void;
  close: () => void;
  openWithPrompt: (prompt: string) => void;
  subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
  subscribeToState: (handler: (state: { isOpen: boolean; isReady: boolean }) => void) => () => void;
  mount: () => void;    // Call in ngOnInit() or ngAfterViewInit()
  destroy: () => void;  // Call in ngOnDestroy()
};

Use subscribeToState to react to state changes — wire it to Angular signals, BehaviorSubjects, or change detection:

yak.subscribeToState(({ isOpen, isReady }) => {
  this.isOpen.set(isOpen);
  this.changeDetector.markForCheck();
});

Logging

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

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

License

Proprietary — see LICENSE file.