SDK Overview

Overview

The Asiyst Web SDK (@asiyst/sdk) is the official client library for embedding conversational 3D avatars, real-time speech synthesis, and contextual guidance into browser-based applications. Engineered for performance, the SDK operates with zero host CSS pollution and weighs under 28 KB gzipped.

Architecture & Shadow DOM Isolation

The SDK mounts inside an encapsulated Shadow DOM boundary:

• 0% CSS Collisions: Host application global CSS (Tailwind, Bootstrap, styled-components) will never distort the assistant widget.

• WebGL Hardware Acceleration: Renders 3D glTF/GLB models using hardware-accelerated shaders with automatic fallback to 2D sprites on legacy devices.

• Protocol Multiplexing: Automatically negotiates between WebSockets (wss://api.asiyst.com) and HTTP/2 Server-Sent Events (SSE).

Key Capabilities

• DOM Guidance & Highlighting: Smoothly scrolls users to target elements and renders animated focus rings.

• Proactive Triggers: Displays contextual speech bubbles when visitors enter specific sections or spend time idle.

• Streaming Token Delivery: Real-time typewriter responses with low Time to First Token (< 180ms TTFT).

• Session Continuity: Synchronizes conversations across page navigations and multiple active browser tabs.

Browser Compatibility & Hardware Requirements

• Chrome / Edge / Brave: Version 90+

• Firefox: Version 88+

• Safari / iOS Safari: Version 14+

• WebGL Support: WebGL 1.0 / 2.0 (standard in all modern smartphones and computers).

Lifecycle & Programmatic Control

import { Asiyst } from "@asiyst/sdk";
// 1. Initialize client
await Asiyst.init({
  projectId: "proj_9f8a2b3c4d",
  publicKey: "pk_live_8e7d6c5b4a3f2e1d",
  options: {
    position: "bottom-right",
    theme: "auto",
  },
});
// 2. Programmatic Controls
Asiyst.open();
Asiyst.say("Welcome back! Here are our updated docs.");
Asiyst.close();
// 3. Clean up on component unmount
Asiyst.destroy();