AI Copilots - Default 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, a composer for adding new messages, and a toolbar for adding AI actions.

Usage

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

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.

AiTool

The AiTool component renders tools called in 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.

Usage

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 }) => (            <AiTool>              {result.data ? (                <div>                  {result.data.temperature}°F - {result.data.condition}                </div>              ) : null}            </AiTool>          ),        })}      />      <AiChat chatId="my-chat" />    </>  );}

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.