> ## 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 CrewAI
> Connect a CrewAI agent to CometChat, customize it with UI Kit Builder, and ship it as React UI Kit code or a Chat Widget.
## What you’ll build
* A **CrewAI** agent exposed via a public endpoint (e.g., FastAPI `/kickoff`) that streams NDJSON.
* The same agent **connected to CometChat** (Agent ID + Deployment URL).
* A **customized chat experience** using **UI Kit Builder**.
* An export to **React UI Kit code** *or* **Chat Widget** for integration.
* A streaming contract that emits `text_start` → `text_delta` → `text_end` → `done` (plus `error`), with `message_id`/`thread_id`/`run_id`.
***
## Prerequisites
* A CometChat account and an app: **[Create App](https://app.cometchat.com/apps)**
* A CrewAI agent endpoint (Python/FastAPI sample shown below)
* Python 3.10+ (3.11 recommended) with your preferred package manager (`uv` or `pip`)
* OpenAI (or Anthropic) API key for the agent
* Optional service-specific env vars (e.g., Product Hunt token) can live in repo root `.env` or service-level `.env`.
***
## Step 1 - Create your CometChat app
Sign in at app.cometchat.com. Create a new app or open an existing one.
Note your App ID, Region, and Auth Key (needed if you export the Chat Widget later).
***
## Step 2 - Connect your CrewAI Agent
Navigate to **AI Agent → BYO Agents** and then **Get Started / Integrate**.
Select **CrewAI**.
Provide:
- Name and optional Icon
- (Optional) Greeting and Introductory Message
- (Optional) Suggested messages
Paste:
- Agent ID — a unique handle that matches how you route traffic (e.g.,
support).
- Deployment URL — the public HTTPS endpoint exposed by your CrewAI service (e.g.,
/kickoff).
- (Optional) Headers — flat JSON auth headers your FastAPI deployment expects.
Click **Save**, then ensure the agent’s toggle is **ON** in **AI Agents** list.
> **Tip:** If you update your CrewAI agent later (prompts, tools, routing), you won’t need to re-connect it in CometChat—just keep the **Agent ID** and **Deployment URL** the same.
***
## Step 3 - Define Frontend Actions (Optional)
Go to AI Agent → Actions and click Add to create a frontend action your agent can call (e.g., “Open Product,” “Start Demo,” “Book Slot”).
Include:
- Display Name — Shown to users (e.g., “Open Product Page”).
- Execution Text — How the agent describes running it (e.g., “Opening product details for the user.”).
- Name — A unique, code‑friendly key (e.g.,
open\_product).
- Description — What the tool does and when to use it.
- Parameters — JSON Schema describing inputs (the agent will fill these).
Example parameters JSON:
```json theme={null}
{
"type": "object",
"required": ["productId"],
"properties": {
"productId": {
"type": "string",
"description": "The internal product ID to open"
},
"utm": {
"type": "string",
"description": "Optional tracking code"
}
}
}
```
At runtime, listen for tool calls and execute them client‑side (e.g., route changes, modals, highlights).
***
## Step 4 - Customize in UI Kit Builder
From AI Agents click the variant (or Get Started) to enter UI Kit Builder.
Select Customize and Deploy.
Theme, layout, features; ensure the CrewAI agent is attached.
Use live preview to validate responses & any tool triggers.
} description="Embed / script" href="/ai-agents/chat-widget" horizontal />
} href="https://www.cometchat.com/docs/ui-kit/react/ai-assistant-chat" horizontal>Pre Built UI Components
***
## Step 5 - Export & Integrate
Choose how you’ll ship the experience (Widget or React UI Kit export).
Pick Chat Widget (fastest) or export React UI Kit for code-level customization.
Open Widget Builder → Get Embedded Code → copy script + credentials.
Export the variant as code (UI Kit) if you need deep theming or custom logic.
Preview: the CrewAI agent should appear without extra config.
***
## Step 6 - Deploy & Secure (Reference)
If you need a starter CrewAI endpoint, you can reuse the `/kickoff` pattern from your CrewAI project. Stream newline-delimited JSON events in this order: `text_start` → `text_delta` chunks → `text_end` → `done` (emit `error` on failures). Include `message_id` plus optional `thread_id` and `run_id` for threading.
```python theme={null}
@app.post("/kickoff")
async def kickoff(request: KickoffRequest):
inputs = {
"user_message": request.messages[-1].content,
"conversation_history": "\n".join([f"{m.role}: {m.content}" for m in request.messages[:-1]]),
}
return StreamingResponse(stream_crew(inputs), media_type="application/x-ndjson")
```
Deploy behind HTTPS, add auth headers, and keep API keys server-side. Once live, update your CometChat agent’s **Deployment URL** to point at the public endpoint and keep the toggle **ON**.