AI Copilots

# AI assistants that can take actions on behalf of the user

Add AI assistants with domain-specific knowledge that can take actions on behalf of the user.

ChatsNew chat

Could you tell me if I missed any questions that we've included in previous onboarding forms that got a high response rate?

Updating document…

AI

Updating document…

Stacy

#### Bring your LLM

Connect any LLM provider in seconds, just add your API key and start building instantly.

#### Context-aware AI actions

Your AI understands your app's state and takes meaningful, in-product actions that feel natural.

#### No AI expertise required

No AI plumbing, just add<AiChat />. Get tool calling and RAG out of the box so you can ship faster.

#### Collaborative by design

We’ve spent years perfecting realtime collaboration, now your AI copilots get it too.

## Enable your users to collaborate with AI in your product using pre‑built components.

What was last quarter's revenue?

I can definitely assist with that analysis. The latest financial data shows some interesting trends:

#### Q3 revenue performance

$2.2M+25%

AI chat

Change appearance

```javascript
import { AiChat } from "@liveblocks/react-ui";
import { RegisterAiKnowledge, RegisterAiTool } from "@liveblocks/react";

function MyChat() {
  return (
    <>
      <AiChat chatId="my-chat" layout="compact" copilotId="co_g7Aj3kF9hQs9xL" />
      <RegisterAiKnowledge
        description="Revenue data per quarter"
        value={[
          { quarter: "Q1", amount: "$1.3M", growth: "6%" },
          { quarter: "Q2", amount: "$1.6M", growth: "18%" },
          { quarter: "Q3", amount: "$1.8M", growth: "12%" },
          { quarter: "Q4", amount: "$2.4M", growth: "23%" }
        ]}
      />
      <RegisterAiKnowledge description="The current date" value={new Date()} />
      <RegisterAiTool
        name="revenue-bar"
        tool={defineAiTool()({
          description: "Display revenue performance bar",
          parameters: {
            type: "object",
            properties: {
              quarter: { type: "string" },
              amount: { type: "number" },
              growth: { type: "number" },
            },
          },
          execute: () => {},
          render: ({ args }) => args ? (
            <div className="revenue-bar">
              <h4>{args.quarter} revenue performance</h4>
              <ProgressBar value={args.amount} />
              <div>
                <span>${args.amount}</span>
                <span>+{args.growth}%</span>
              </div>
            </div>
          ) : null
        })}
      />
      <RegisterAiKnowledge
        description="Team progress data"
        value={getTeamProgressData()}
      />
      <RegisterAiTool
        name="team-progress"
        tool={defineAiTool()({
          description: "Display team progress",
          parameters: {
            type: "object",
            properties: {
              members: {
                type: "array",
                items: {
                  type: "object",
                  properties: {
                    name: { type: "string" },
                    performance: { type: "number" },
                  }
                }
              }
            },
          },
          execute: () => {},
          render: ({ args }) => args ? (
            <div className="team-progress">
              <h4>Team progress</h4>
              {args.members.map(member => (
                <div key={member.name}>
                  {member.name}: {member.performance}%
                </div>
              ))}
            </div>
          ) : null
        })}
      />
    </>
  );
}
```

## Why you don’t want to build this from scratch.

Build collaborative AI without the pain.

#### Building in-house

- Clunky HTTP infrastructure
- Handle state, retries, tool calls
- Handle multi-tab and agent sessions
- Build chat UI from scratch
- Store and sync messages in your database
- Set up vector databases and RAG
- Juggle LLM provider quirks manually

#### With Liveblocks

- Reliable WebSocket infrastructure
- Easy APIs for calling tools and handling state
- Seamless multi-tab and agent sessions
- Customizable pre-built components
- Chats automatically persisted for you
- Feed knowledge by submitting websites and files
- Unified support for multiple LLM providers

## Create exceptional AI copilot experiences.

Embed context-aware, realtime AI copilots into your product using pre-built React components that handle both UI and backend logic.

### Managed knowledge infrastructure

Ingest knowledge via dashboard or REST API—orchestrated like Notion, Linear, and Cursor.

Source

Status

Created at

Updated at

https://yourapp.com/help

Processing

2m ago

2m ago

https://yourapp.com/docs/api

Ready

4m ago

3m ago

product-requirements-v2.4.pdf

Ready

2d ago

1d ago

customer-support-faq.md

Ready

4d ago

3d ago

brand-and-style-guide.docx

Ready

1w ago

5d ago

```tsx
await liveblocks.createFileKnowledgeSource({  copilotId: "co_abc123...",  file: pdfFile,});
```

### Custom UI in chat

Render interactive React components directly inside chat messages.

#### Schedule meeting

Tue, March 4 10:00 – 10:45 PM
Q2 Planning sync

Cancel Accept

### Plug in your own AI model

Bring your LLM. Own the data and logic. Skip the plumbing.

### Custom tool calls

Define tools that let your AI look up data and take actions on behalf of users.

### Launch in days, not months

Designed for speed: drop-in components, managed infrastructure, no AI ramp-up.

### Enterprise-grade by default

Secure by design—with compliance, availability, and full data ownership.

### No maintenance required

Spend time building, not maintaining infrastructure.

## More than just AI Copilots.

Engage users, fuel creativity, and _drive growth_ with just a few lines of code. Ship collaborative features into your product _in days, not months_.