> ## Documentation Index > Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Integrate an AI Agent into the Chat Widget > Embed your AI Agent (Agent Builder or Bring Your Own Agent) into the CometChat Chat Widget. ## Prerequisites * CometChat app (App ID, Region, Auth Key). * Chat Widget variant configured in UI Kit Builder. * An AI Agent already created and enabled in your app via: * [Agent Builder](/ai-agents/agent-builder/overview) — build and host inside CometChat, or * [Bring Your Own Agent](/ai-agents/mastra) — connect your own hosted agent. * Agent ID and (optional) variant set to default to that agent. * (Optional) Frontend Action definitions if you want UI‑bound behaviors. *** ## Step 1 - Export & Embed In UI Kit Builder click **Get Embedded Code** → copy credentials: * App ID * Auth Key * Region * Variant ID Example embed (HTML): Add script tag in document head (see snippet below). Add mount div + init script before closing body. ```html theme={null} ``` Choose the auth flow that matches your site: ### Option A - Anonymous (Guest Mode) **Use this when:** * Let anyone chat anonymously without signing up or logging in. * Perfect for marketing pages, help centers, or demo sites. ```html lines highlight={7-8, 10, 14-16, 21-22, 25-26} theme={null}

``` ### Option B - Create + Log In User On The Fly (Auth Key + UID) **Use this when:** * Use your existing user IDs (email, username etc.) to create and log in users automatically. * No backend needed—CometChat creates users the first time they visit. ```html lines highlight={7-8, 10, 13, 17-19, 24-25, 28-29} theme={null}

``` ### Option C - Backend-Created User (Auth Token Login) **Use this when:** * Create your users via server and login them using secure auth token on frontend. * Ideal for sites with existing login systems and backends. ```html lines highlight={7-8, 12, 16-17, 20-21} theme={null}