> ## 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.

# Create an AI Agent with LangGraph

> Connect a LangGraph agent (TypeScript or Python) to CometChat, customize it in UI Kit Builder, and ship the experience as code or a widget.

## What you’ll build

* A **LangGraph** agent (TypeScript or Python) that streams messages and tool calls.
* The same agent **connected to CometChat** via Agent ID + Deployment URL.
* A **customized chat experience** using **UI Kit Builder**.
* An export to **React UI Kit code** or **Chat Widget**, plus reference demos (knowledge + Product Hunt).
* A streaming contract: `text_start` → `text_delta` → `tool_call_start/args/end` (+ `tool_result`) → `text_end` → `done` (+ `error`), carrying `message_id` and optional `thread_id`/`run_id`.

***

## Prerequisites

* A CometChat account and an app: **[Create App](https://app.cometchat.com/apps)**
* A LangGraph endpoint that streams responses (SSE or NDJSON). Examples live in **ai-agent-lang-graph-examples** for both TypeScript and Python.
* Node.js 18+ (for TypeScript examples) or Python 3.10+ (for Python examples).
* `OPENAI_API_KEY`; optional model overrides: TypeScript (`KNOWLEDGE_OPENAI_MODEL`, `PRODUCT_OPENAI_MODEL`), Python (`MODEL`).

***

## Step 1 - Create your CometChat app

<Steps>
  <Step title="Create or open an app">
    Sign in at <b><a href="https://app.cometchat.com/apps">app.cometchat.com</a></b>. Create a new app or open an existing one.
  </Step>

  <Step title="Copy credentials">
    Note your <b>App ID</b>, <b>Region</b>, and <b>Auth Key</b> (used if you export the Chat Widget later).
  </Step>
</Steps>

***

## Step 2 - Connect your LangGraph agent

Navigate to **AI Agent → BYO Agents** and then **Get Started / Integrate**.

<Steps>
  <Step title="Choose provider">
    Select **LangGraph**.
  </Step>

  <Step title="Basic details">
    Provide:

    <ul>
      <li><b>Name</b> and optional <b>Icon</b></li>
      <li>(Optional) <b>Greeting</b> and <b>Introductory Message</b></li>
      <li>(Optional) <b>Suggested messages</b></li>
    </ul>
  </Step>

  <Step title="LangGraph configuration">
    Paste/define:

    <ul>
      <li><b>Agent ID</b> — unique handle you will route to (e.g., <code>support</code> or <code>launch</code>).</li>
      <li><b>Deployment URL</b> — public HTTPS endpoint that wraps your LangGraph stream.</li>
      <li>(Optional) <b>Headers</b> — JSON auth headers your service expects.</li>
    </ul>
  </Step>

  <Step title="Save & enable">
    Click <b>Save</b>, then ensure the agent’s toggle is <b>ON</b> in the <b>AI Agents</b> list.
  </Step>
</Steps>

***

## Step 3 - Define Frontend Actions (Optional)

<Steps>
  <Step title="Add an action">
    Go to <b>AI Agent → Actions</b> and click <b>Add</b> to create a frontend action the agent can call (e.g., “Open Product,” “Start Demo,” “Book Slot”).
  </Step>

  <Step title="Define fields">
    Include:

    <ul>
      <li><b>Display Name</b></li>
      <li><b>Execution Text</b> — how the agent should describe running it.</li>
      <li><b>Name</b> — code-friendly key (e.g., <code>open\_product</code>).</li>
      <li><b>Description</b> — when to trigger the action.</li>
      <li><b>Parameters</b> — JSON Schema inputs (the agent will populate these).</li>
    </ul>
  </Step>

  <Step title="Handle in your UI">
    Listen for tool calls and execute them client-side (routes, modals, highlights, celebrations).
  </Step>
</Steps>

***

## Step 4 - Customize in UI Kit Builder

<Steps>
  <Step title="Open variant">From <b>AI Agents</b>, open your agent to enter UI Kit Builder.</Step>
  <Step title="Customize & Deploy">Select <b>Customize and Deploy</b>.</Step>
  <Step title="Adjust settings">Update theme, layout, and features; confirm your LangGraph agent is attached.</Step>
  <Step title="Preview">Use live preview to validate streaming responses and any frontend actions.</Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/2U5tVIzH12dbbFtr/images/ai-agent-chat-builder-preview.png?fit=max&auto=format&n=2U5tVIzH12dbbFtr&q=85&s=7e5a476c0f779f984406b979ed12f972" width="5760" height="3200" data-path="images/ai-agent-chat-builder-preview.png" />
</Frame>

***

## Step 5 - Export & Integrate

Choose how you’ll ship the experience (Widget or React UI Kit export).

<CardGroup>
  <Card title="Widget Builder" icon={<img src="/docs/images/products/ai-agents.svg" alt="Widget" />} description="Embed / script" href="/widget/ai-agents" horizontal />

  <Card title="React UI Kit" icon={<img src="/docs/images/icons/react.svg" alt="React" />} href="https://www.cometchat.com/docs/ui-kit/react/ai-assistant-chat" horizontal>Pre Built UI Components</Card>
</CardGroup>

> The LangGraph agent from Step 2 is included automatically in exported variants—no extra config needed for basic conversations.

<Steps>
  <Step title="Decide delivery mode">Pick <b>Chat Widget</b> (fastest) or export <b>React UI Kit</b> for code-level customization.</Step>
  <Step title="Widget path">Open <b>Widget Builder</b> → Get Embedded Code → copy script + credentials.</Step>
  <Step title="React UI Kit path">Export the variant as code if you need deeper theming or custom logic.</Step>
  <Step title="Verify agent inclusion">Preview to confirm your LangGraph agent responds and streams correctly.</Step>
</Steps>

## REST API Reference

For programmatic agent management, see the [Agent Builder APIs](/rest-api/ai-agents-apis/overview) and [BYO Agent APIs](/rest-api/byo-ai-agents-apis/overview).

## Troubleshooting

| Issue                  | Solution                                                                                                      |
| ---------------------- | ------------------------------------------------------------------------------------------------------------- |
| Agent not responding   | Verify your LangGraph server is running and the endpoint URL is accessible from CometChat's servers.          |
| Messages not appearing | Check that the `onBehalfOf` header is set correctly and the user exists in CometChat.                         |
| Tool calls failing     | Ensure tools are properly registered in both LangGraph and CometChat. Check the agent logs for error details. |
| Webhook not triggering | Verify the webhook URL is publicly accessible and returns a 200 status code.                                  |