Skip to main content

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

​
Prerequisites

  • A CometChat account and an app: Create App
  • A CrewAI agent endpoint (Python/FastAPI sample shown below)
  • Python 3.13+ with your preferred package manager (uv or pip)
  • OpenAI (or Anthropic) API key for the agent

​
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 (needed if you export the Chat Widget later).

​
Step 2 - Connect your CrewAI Agent

Navigate to AI Agent → Get Started and then AI Agents → Add Agent.
1

Choose provider

Select CrewAI.
2

Basic details

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

CrewAI configuration

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

Save & enable

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)

1

Add an action

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”).
2

Define fields

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).
3

Validate inputs (schema)

Example parameters JSON:
{
  "type": "object",
  "required": ["productId"],
  "properties": {
    "productId": {
      "type": "string",
      "description": "The internal product ID to open"
    },
    "utm": {
      "type": "string",
      "description": "Optional tracking code"
    }
  }
}
4

Handle in your UI

At runtime, listen for tool calls and execute them client‑side (e.g., route changes, modals, highlights).

​
Step 4 - Customize in UI Kit Builder

1

Open variant

From AI Agents click the variant (or Get Started) to enter UI Kit Builder.
2

Customize & Deploy

Select Customize and Deploy.
3

Adjust settings

Theme, layout, features; ensure the CrewAI agent is attached.
4

Preview

Use live preview to validate responses & any tool triggers.

Widget Builder

React UI Kit

Pre Built UI Components

​
Step 5 - Export & Integrate

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

Decide delivery mode

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

Widget path

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

React UI Kit path

Export the variant as code (UI Kit) if you need deep theming or custom logic.
4

Verify agent inclusion

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: 
@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.