---
meta:
  title: "Default components"
  parentTitle: "AI Copilots"
  description: "Ready-to-use customizable components"
---

The default components included in AI Copilots are a great way to start building
AI into your application. With these components you can render advanced AI
chats, that understand your application state, modify it with actions, and
render custom in-chat components.

- Fully styled AI chat components, with an optional dark mode.
- Pass in knowledge, add actions, and render custom components.
- Customize through CSS variables and class names.
- Localize and modify strings with overrides.

## AiChat

The [`AiChat`][] component renders an AI chat, with a chat history and a
composer for adding new messages.

<Figure>
  <Image
    src="/assets/ai-copilots/ai-chat.jpg"
    alt="AiChat"
    width={768}
    height={446}
  />
</Figure>

### Usage

Get started by importing the component, and passing in a unique chat ID.

```tsx
import { AiChat } from "@liveblocks/react-ui";

function Component() {
  return <AiChat chatId="my-chat-id" />;
}
```

This will render an AI chat on the page, with a chat history, and a composer for
adding new messages. Each chat is stored permanently, and can be accessed again
later.

{/* TODO list everything you can do with it */}

## AiTool

When
[registering a tool](/docs/ready-made-features/ai-copilots/tools#Registering-a-tool),
the [`AiTool`][] component can be used to
[show tool progress and results](/docs/ready-made-features/ai-copilots/tools)
within AI chats. It shows the tool’s name, its stage (e.g. a spinner when
executing, a checkmark when successful, etc.), and optionally an icon and custom
content inside it.

{/* TODO AiTool image */}

### Usage

```tsx
import { defineAiTool } from "@liveblocks/client";
import { RegisterAiTool, AiTool, AiChat } from "@liveblocks/react-ui";

function App() {
  return (
    <>
      <RegisterAiTool
        name="get-weather"
        tool={defineAiTool()({
          description: "Get current weather information",
          parameters: {
            type: "object",
            properties: {
              location: { type: "string", description: "City name" },
            },
            required: ["location"],
            additionalProperties: false,
          },
          execute: async (args) => {
            const { temperature, condition } = await __getWeather__(
              args.location
            );
            return { data: { temperature, condition } };
          },
          render: ({ result }) => {
            return (
              // +++
              <AiTool title="Weather" icon="🌤️">
                {result.data ? (
                  <div>
                    {result.data.temperature}°F - {result.data.condition}
                  </div>
                ) : null}
              </AiTool>
              // +++
            );
          },
        })}
      />
      <AiChat chatId="my-chat" />
    </>
  );
}
```

## AiTool.Confirmation

Inside of tools, the [`AiTool.Confirmation`][] component is a sub-component of
[`AiTool`][] that renders confirm/deny buttons as part of a
[human-in-the-loop tool action](/docs/ready-made-features/ai-copilots/tools#Default-confirmation-component).
“Confirm” and Cancel” buttons are displayed to the user.

{/* TODO AiTool.Confirmation image */}

### Usage

```tsx
<RegisterAiTool
  name="delete-document"
  tool={defineAiTool()({
    description: "Delete a document by its ID",
    parameters: {
      type: "object",
      properties: {
        documentId: { type: "string" },
      },
      required: ["documentId"],
      additionalProperties: false,
    },
    render: ({ stage, args, result, types }) => {
      return (
        <AiTool title="Delete document" variant="minimal">
          // +++
          <AiTool.Confirmation
            types={types}
            confirm={async ({ documentId }) => {
              await __deleteDocument__(documentId);
              return {
                data: { documentId },
                description: "The user chose to delete the document",
              };
            }}
            cancel={() => {
              return {
                data: { documentId },
                description: "The user cancelled deleting the document",
              };
            }}
          />
          // +++
        </AiTool>
      );
    },
  })}
/>
```

## Customization

It’s possible to style and localize the default components:

- Import dark mode styles.
- Modify the style with CSS variables and class names.
- Use overrides to change default text used in the components.

Learn more under
[styling and customization](/docs/ready-made-features/ai-copilots/styling-and-customization):

[`aichat`]: /docs/api-reference/liveblocks-react-ui#AiChat
[`aitool`]: /docs/api-reference/liveblocks-react-ui#AiTool
[`aitool.confirmation`]:
  /docs/api-reference/liveblocks-react-ui#AiTool.Confirmation

---

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