Skip to main content

​
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
  • 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

1

Create or open an app

Sign in at app.cometchat.com. Create a new app or open an existing one.
2

Copy credentials

Note your App ID, Region, and Auth Key (used if you export the Chat Widget later).

​
Step 2 - Connect your LangGraph agent

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

Choose provider

Select LangGraph.
2

Basic details

Provide:
  • Name and optional Icon
  • (Optional) Greeting and Introductory Message
  • (Optional) Suggested messages
3

LangGraph configuration

Paste/define:
  • Agent ID — unique handle you will route to (e.g., support or launch).
  • Deployment URL — public HTTPS endpoint that wraps your LangGraph stream.
  • (Optional) Headers — JSON auth headers your service expects.
4

Save & enable

Click Save, then ensure the agent’s toggle is ON in the AI Agents list.

​
Step 3 - Define Frontend Actions (Optional)

1

Add an action

Go to AI Agent → Actions and click Add to create a frontend action the agent can call (e.g., “Open Product,” “Start Demo,” “Book Slot”).
2

Define fields

Include:
  • Display Name
  • Execution Text — how the agent should describe running it.
  • Name — code-friendly key (e.g., open_product).
  • Description — when to trigger the action.
  • Parameters — JSON Schema inputs (the agent will populate these).
3

Handle in your UI

Listen for tool calls and execute them client-side (routes, modals, highlights, celebrations).

​
Step 4 - Customize in UI Kit Builder

1

Open variant

From AI Agents, open your agent to enter UI Kit Builder.
2

Customize & Deploy

Select Customize and Deploy.
3

Adjust settings

Update theme, layout, and features; confirm your LangGraph agent is attached.
4

Preview

Use live preview to validate streaming responses and any frontend actions.

​
Step 5 - Export & Integrate

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

Widget Builder

React UI Kit

Pre Built UI Components
The LangGraph agent from Step 2 is included automatically in exported variants—no extra config needed for basic conversations.
1

Decide delivery mode

Pick Chat Widget (fastest) or export React UI Kit for code-level customization.
2

Widget path

Open Widget Builder → Get Embedded Code → copy script + credentials.
3

React UI Kit path

Export the variant as code if you need deeper theming or custom logic.
4

Verify agent inclusion

Preview to confirm your LangGraph agent responds and streams correctly.