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

> Connect an Agno 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

* An **Agno** agent served with **FastAPI** that streams responses and exposes tools.
* The same agent **connected to CometChat** through Agent ID + Deployment URL routing.
* 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](https://app.cometchat.com/apps)**
* An Agno agent endpoint (see Step 6 for the example services).
* Python 3.10+ with `pip`, plus access to an OpenAI-compatible model (`OPENAI_API_KEY`).

***

## 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> (needed if you export the Chat Widget later).
  </Step>
</Steps>

***

## Step 2 - Connect your Agno Agent

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

<Steps>
  <Step title="Choose provider">
    Select **Agno**.
  </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="Agno configuration">
    Paste/define:

    <ul>
      <li><b>Agent ID</b> — a unique handle that matches how you route traffic (e.g., <code>support</code>).</li>
      <li><b>Deployment URL</b> — the public HTTPS endpoint exposed by your Agno service.</li>
      <li>(Optional) <b>Headers</b> — JSON auth headers that your FastAPI deployment 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>

> **Tip:** The Agno examples stream newline-delimited JSON events using CometChat’s Bring Your Own Agent format. Keep the **Agent ID** and **Deployment URL** stable so you don’t need to reconnect.

CometChat includes `thread_id`, `run_id`, the recent `messages`, and optional `namespace` (or `toolParams.namespace`) in every `/stream` request. Echo those IDs back in each event so UI Kit Builder variants can stitch partial responses correctly.

***

## 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 your agent can call (e.g., “Open Product,” “Start Demo,” “Book Slot”).
  </Step>

  <Step title="Define fields">
    Include:

    <ul>
      <li><b>Display Name</b> — Shown to users (e.g., “Open Product Page”).</li>
      <li><b>Execution Text</b> — How the agent describes running it (e.g., “Opening product details for the user.”).</li>
      <li><b>Name</b> — A unique, code-friendly key (e.g., <code>open\_product</code>).</li>
      <li><b>Description</b> — What the tool does and when to use it.</li>
      <li><b>Parameters</b> — JSON Schema describing inputs (the agent will fill these).</li>
    </ul>
  </Step>

  <Step title="Validate inputs (schema)">
    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"
        }
      }
    }
    ```
  </Step>

  <Step title="Handle in your UI">
    At runtime, listen for tool calls and execute them client-side (e.g., route changes, modals, highlights).
  </Step>
</Steps>

***

## Step 4 - Customize in UI Kit Builder

<Steps>
  <Step title="Open variant">From <b>AI Agents</b> click the variant (or Get Started) 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 the Agno agent is attached.</Step>
  <Step title="Preview">Use live preview to validate responses & any tool triggers.</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 Agno agent from Step 2 is included automatically in exported variants—no extra code 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 (UI Kit) if you need deep theming or custom logic.</Step>
  <Step title="Verify agent inclusion">Preview: the Agno agent should appear without extra config.</Step>
</Steps>

***

## Step 6 - Deploy & Secure (Reference)

<Callout>
  Need an Agno backend? Use these reference projects to define, expose, and deploy FastAPI services that stream directly into CometChat.
</Callout>

<AccordionGroup>
  <Accordion title="Run the Agno Knowledge Agent">
    Clone the examples, install dependencies, and start the FastAPI server:

    ```bash theme={null}
    git clone https://github.com/cometchat/ai-agent-agno-examples.git
    cd ai-agent-agno-examples
    python3 -m venv .venv
    source .venv/bin/activate
    pip install -e .
    uvicorn knowledge_agent.main:app --host 0.0.0.0 --port 8000 --reload
    ```

    Key points:

    * `knowledge_agent/main.py` exposes `/api/tools/ingest`, `/api/tools/searchDocs`, `/api/agents/knowledge/generate`, and `/stream` (newline-delimited JSON with `text_delta`, `tool_*`, `text_done`, `done`, `error`).
    * `KnowledgeManager` creates an Agno agent bound to a per-namespace vector store and enforces retrieval-before-answer behavior with citations.
    * Configure secrets via `.env` (`OPENAI_API_KEY`, optional `KNOWLEDGE_*` overrides). The example persists markdown under `knowledge_agent/data/knowledge/<namespace>`.
  </Accordion>

  <Accordion title="Run the Agno Product Hunt Agent">
    Launch the Product Hunt assistant on another port:

    ```bash theme={null}
    uvicorn product_hunt_agent.main:app --host 0.0.0.0 --port 8001 --reload
    ```

    Highlights:

    * `/api/top`, `/api/top-week`, `/api/top-range`, and `/api/search` surface Algolia + GraphQL data for Product Hunt launches.
    * `/api/chat` and `/stream` share the same newline-delimited event schema as the knowledge agent, so CometChat receives consistent payloads (`text_delta`, `tool_*`, `text_done`, `done`).
    * Provide `PRODUCTHUNT_API_TOKEN` for live data (the agent falls back gracefully when it’s absent) and customize tool prompts in `agent_builder.py`.
  </Accordion>
</AccordionGroup>

> Deploy behind HTTPS and secure with auth headers or gateway middleware before pointing CometChat at the `/stream` endpoint.