---
meta:
  title: "AI Copilots"
  parentTitle: "Collaboration features"
  description: "Easily integrate customizable AI copilots into your product"
---

Embed customizable AI copilots into your product, enabling your users to
collaborate with AI. Features include contextual chat, and AI toolbars, which
can understand and modify your application state.

## Overview

{/* TODO make more icons */}

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Features"
    href="/docs/collaboration-features/ai-copilots/features"
    description="Learn about chats, actions, integrations"
    visual={<DocsFeaturesIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Copilots"
    href="/docs/collaboration-features/ai-copilots/copilots"
    description="Choose an AI model and configure your copilot"
    visual={<DocsRobotIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Default components"
    href="/docs/collaboration-features/ai-copilots/default-components"
    description="Ready-to-use customizable components"
    visual={
      <DocsDefaultComponentsIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
  <DocsCard
    type="technology"
    title="Hooks"
    href="/docs/collaboration-features/ai-copilots/hooks"
    description="Fetch, create, & modify AI chats"
    visual={<DocsHooksIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Knowledge"
    href="/docs/collaboration-features/ai-copilots/knowledge"
    description="Provide AI with a knowledge base & context"
    visual={
      <DocsKnowledgeIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
  <DocsCard
    type="technology"
    title="Tools"
    href="/docs/collaboration-features/ai-copilots/tools"
    description="Allow AI to interact with your application"
    visual={<DocsToolIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Styling and customization"
    href="/docs/collaboration-features/ai-copilots/styling-and-customization"
    description="CSS variables, dark mode, localization"
    visual={<DocsStylingIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Troubleshooting"
    href="/docs/collaboration-features/ai-copilots/troubleshooting"
    description="Troubleshoot common issues"
    visual={
      <DocsTroubleshootingIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
</ListGrid>

## AI Copilots API Reference

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="React"
    href="/docs/api-reference/liveblocks-react#AI-Copilots"
    description="@liveblocks/react"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React UI"
    href="/docs/api-reference/liveblocks-react-ui#AI-Copilots"
    description="@liveblocks/react-ui"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="JavaScript"
    href="/docs/api-reference/liveblocks-client#AI-Copilots"
    description="@liveblocks/client"
    visual={<DocsJavascriptIcon />}
  />
  <DocsCard
    type="technology"
    title="Node.js"
    href="/docs/api-reference/liveblocks-node#AI-Copilots"
    description="@liveblocks/node"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="REST API"
    href="/docs/api-reference/rest-api-endpoints#AI"
    description="HTTP endpoints"
    visual={<DocsApiIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Examples

<ListGrid columns={2}>
  <ExampleCard
    example={{
      title: "AI Popup Chat",
      slug: "ai-popup/nextjs-ai-popup",
      image: "/images/examples/thumbnails/ai-popup.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "AI Reports Dashboard",
      slug: "ai-dashboard-reports/nextjs-ai-dashboard-reports",
      image: "/images/examples/thumbnails/ai-reports-dashboard.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "AI Chats",
      slug: "ai-chats/nextjs-ai-chats",
      image: "/images/examples/thumbnails/ai-chats.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
</ListGrid>

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).
