How to Add an AI Assistant with JavaScript

Install the lightweight client SDK via your preferred package manager:

Alternatively, if using pnpm or yarn: pnpm add @asiyst/sdk or yarn add @asiyst/sdk.

Here is a complete, production-ready JavaScript implementation:

import { Asiyst } from "@asiyst/sdk";

// Create client instance with configuration parameters
const asiyst = new Asiyst({
  projectId: "your_project_id", // Replace with your real Project ID
  position: "bottom-right",     // "bottom-right" | "bottom-left"
  theme: "dark",                // "dark" | "light" | "auto"
  autoGreet: true,              // Proactive greeting on first visit
  onReady: () => {
    console.log("Asiyst Assistant is live and ready!");
  },
  onMessage: (message) => {
    console.log("User or assistant interaction:", message);
  }
});

In a Next.js App Router project, wrap initialization inside a client component with a cleanup lifecycle:

"use client";

import { useEffect } from "react";
import { Asiyst } from "@asiyst/sdk";

export function AsiystAssistant() {
  useEffect(() => {
    const asiyst = new Asiyst({
      projectId: process.env.NEXT_PUBLIC_ASIYST_PROJECT_ID || "your_project_id",
    });

    return () => {
      asiyst.destroy(); // Clean unmount on route transition
    };
  }, []);

  return null;
}

Direct visitor attention to specific buttons, forms, or navigation links programmatically:

// Instruct the assistant to point to a specific UI button
asiyst.guideToElement({
  targetSelector: "#checkout-button",
  message: "Click here to proceed to secure checkout!",
  pulse: true
});