Quickstart

Overview

This guide takes you from an empty project to a fully functional, interactive Asiyst assistant running on your web application.

Prerequisites

Before starting, ensure you have:

• An active Asiyst account (Create Account)

• A registered project in the Asiyst dashboard (Create Project)

• Node.js version 18.0.0 or higher (for npm / package manager setups)

Step 1: Create a Project

1. Navigate to the Projects section of your Asiyst Dashboard.

1. Click Create Project and enter your project name (e.g., Acme Production) and primary website URL (e.g., https://example.com).

1. Copy your Public Project ID (proj_...) and Public SDK Key (pk_live_...).

Step 2: Install the SDK

Install the official Asiyst Web SDK package using your preferred package manager:

# Using npm
npm install @asiyst/sdk
# Using pnpm
pnpm add @asiyst/sdk
# Using yarn
yarn add @asiyst/sdk

If you are using a static HTML website or WordPress, you can alternatively use the direct CDN script tag:

<script src="https://cdn.asiyst.com/sdk/v1/asiyst.min.js" async></script>

Step 3: Initialize the Assistant

Import and initialize the client in your application root or client-side provider:

import { Asiyst } from "@asiyst/sdk";
// Initialize client-side
Asiyst.init({
  projectId: "proj_9f8a2b3c4d",
  publicKey: "pk_live_8e7d6c5b4a3f2e1d",
  options: {
    position: "bottom-right",
    theme: "auto",
  },
});

In Next.js (App Router), place this inside a client component mounted in your root layout:

"use client";
import { useEffect } from "react";
import { Asiyst } from "@asiyst/sdk";
export function AsiystAssistantProvider() {
  useEffect(() => {
    Asiyst.init({
      projectId: process.env.NEXT_PUBLIC_ASIYST_PROJECT_ID!,
      publicKey: process.env.NEXT_PUBLIC_ASIYST_PUBLIC_KEY!,
    });
    return () => {
      Asiyst.destroy();
    };
  }, []);
  return null;
}

Step 4: Verify the Connection

Once your application is running, open the browser console and check the network tab. You should see a successful handshake to:

POST /api/v1/sdk/handshake -> 200 OK

You can also check the Connection Status tab in the Asiyst dashboard to confirm active telemetry.

For next steps, see SDK Configuration or Knowledge Ingestion.