Skip to content

ai-agents.mdx

Latest commit

 

History

History
159 lines (136 loc) · 9.98 KB

ai-agents.mdx

File metadata and controls

159 lines (136 loc) · 9.98 KB
mode custom
title AI Agents
sidebarTitle Overview
description Build and ship AI agents in chat: pick a provider, connect your agent, and export UI or embed widgets.
canonical https://cometchat.com/docs/ai-agents

{/* Hero */}

AI Agents

Plug in your provider, wire actions, and ship chat UI — in minutes, not sprints.

AI Agents

{/* Overview */}

Overview

Design, tailor, and ship AI chatbots, copilots, and assistants directly into your product with CometChat AI Agents.

They plug into your app’s logic, state, and user context so conversations feel truly native—whether you embed our UI or run everything headless. The platform covers creation, deployment, and monitoring, making intelligent experiences seamless to launch and simple to manage.

Because CometChat AI Agents are model-agnostic, you can swap providers or upgrade models whenever you need without interrupting your customer experience.

Integrate AI Agents

Three core steps to get an AI Agent into your product.

<Step title="Connect your AI Agent" description="Choose how you want to bring an agent into CometChat.">
  <p className="text-gray-600 dark:text-gray-300">
    Start by setting up your AI agent—this is the first step when integrating CometChat’s AI Agent platform. You can do this in two ways:
  </p>

  <div className="mt-6 space-y-6">

    <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6 shadow-sm">
      <span className="text-xs font-semibold tracking-wide text-gray-500 dark:text-gray-400">OPTION 01</span>
      <h3 className="mt-2 text-lg font-semibold text-gray-800 dark:text-white">Create an AI Agent in CometChat</h3>
      <p className="mt-2 text-gray-600 dark:text-gray-300">
        Use our Agent Builder to create and manage your own agents directly within CometChat.
      </p>
      <div className="mt-4 flex flex-wrap gap-3">
        <a
          href="/docs/ai-agents/agent-builder/overview"
          className="inline-flex items-center justify-center rounded-full bg-gray-900 text-white px-5 py-2 text-sm font-medium hover:bg-gray-800 transition"
        >
          AI Agent Builder
        </a>
         
      </div>
    </div>

    <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6 shadow-sm">
      <span className="text-xs font-semibold tracking-wide text-gray-500 dark:text-gray-400">OPTION 02</span>
      <h3 className="mt-2 text-lg font-semibold text-gray-800 dark:text-white">Connect a Third-Party Agent</h3>
      <p className="mt-2 text-gray-600 dark:text-gray-300">
        Bring existing agents from platforms like OpenAI, LangGraph, or Mastra via our API integration.
      </p>
      <div className="mt-4 flex flex-wrap gap-3">
        <a
          href="/docs/ai-agents/ag-ui"
          className="inline-flex items-center justify-center rounded-full bg-gray-900 text-white px-5 py-2 text-sm font-medium hover:bg-gray-800 transition"
        >
          Connect Third-Party Agent
        </a>
         
      </div>
    </div>
  
  </div>
</Step>

{/* <Step title="Setup Frontend Actions & Tools" description="Extend what the agent can do in your UI.">
  <p className="text-gray-600 dark:text-gray-300">Create and manage frontend actions and tools to enhance your agent’s capabilities.</p>

  <div className="flex flex-wrap gap-3 mt-4">
    <a href="/docs/ai-agents/actions" className="inline-flex items-center gap-1 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800" target="_blank">Get Started with Actions ↗</a>
    <a href="/docs/ai-agents/tools" className="inline-flex items-center gap-1 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800" target="_blank">Get Started with Tools ↗</a>
  </div>
  <p className="text-gray-500 text-sm mt-3">Actions: trigger UI & workflows. Tools: structured capabilities the agent can call.</p>
</Step> */}

<Step title="Add to your frontend" description="Choose no‑code widget, prebuilt components, or headless SDK.">
  <p className="text-gray-600 dark:text-gray-300">Customize the agent’s appearance and copy the embed code to integrate it into your app.</p>

  <CardGroup cols={3} className="mt-4">
    <Card title="Widget Builder" icon={<img src="/docs/images/icons/ai-agents.svg" alt="Widget" />} description="No‑code" href="/ai-agents/chat-widget" 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>
    <Card title="JavaScript SDK" icon={<img src="/docs/images/icons/js.svg" alt="JavaScript SDK" />} href="https://www.cometchat.com/docs/sdk/javascript/ai-agents" horizontal>Ready to use SDK Methods</Card>
  </CardGroup>
  <CardGroup cols={3} className="mt-4">
    <Card title="React Native" icon={<img src="/docs/images/icons/react.svg" alt="React Native" />} href="https://www.cometchat.com/docs/ui-kit/react-native/guide-ai-agent" horizontal>Pre Built UI Components</Card>
    <Card title="Android" icon={<img src="/docs/images/icons/android.svg" alt="Android" />} href="https://www.cometchat.com/docs/ui-kit/android/guide-ai-agent" horizontal>Pre Built UI Components</Card>
    <Card title="iOS Swift" icon={<img src="/docs/images/icons/swift.svg" alt="iOS Swift" />} href="https://www.cometchat.com/docs/ui-kit/ios/guide-ai-agent" horizontal>Pre Built UI Components</Card>
  </CardGroup>
  <CardGroup cols={3} className="mt-4">
    <Card title="Flutter" icon={<img src="/docs/images/icons/flutter.svg" alt="Flutter" />} href="https://www.cometchat.com/docs/ui-kit/flutter/guide-message-agentic-flow" horizontal>Pre Built UI Components</Card>
  </CardGroup>
</Step>

{/* Footer */}