Prerequisites Before You Begin
- An active website, web app (React, Next.js, Vue, or HTML), or CMS.
- An Asiyst account (free to create with 1,000 complimentary AI credits).
- Basic access to your HTML header or frontend project source code.
1
Create Your Project in Asiyst
Start by navigating to asiyst.com/register and signing in. Upon creating your account, create a new project by entering your website domain name. You will receive a unique projectId (e.g. proj_abc123).
2
Ground the Assistant with Your Knowledge Base
To ensure your AI assistant answers queries accurately without hallucinations, connect your company data:
- Sitemap URL: Automatically index your public documentation, marketing pages, and product links.
- Documents: Upload Markdown files or PDFs containing return policies, pricing specs, and FAQs.
- CLI Sync: Synchronize local documentation files straight from your terminal using
npx @asiyst/cli sync.
3
Choose Your Installation Method
Asiyst supports two primary integration approaches depending on your tech stack:
Option A: Modern JavaScript / TypeScript Frameworks
Ideal for Next.js, React, Vue, SvelteKit, and modern web apps:
// 1. Install package
npm install @asiyst/sdk
// 2. Initialize in client component
import { Asiyst } from "@asiyst/sdk";
const assistant = new Asiyst({
projectId: "your_project_id",
position: "bottom-right",
theme: "dark"
});Option B: Direct HTML Script Tag (Zero Build Step)
Add this snippet to your HTML <head> before the closing tag:
<script src="https://cdn.asiyst.com/sdk/v2/asiyst.min.js" data-project-id="your_project_id" async> </script>
4
Customize 3D Avatar Appearance and Guidance
In the Avatar Studio, select your 3D character mesh, customize clothing colors, configure greeting voiceovers, and test interactive element pointing.
Want to explore SDK API details?
Learn more about lifecycle events and client callbacks.