Sign in

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 and a composer for adding new messages.

AiChat

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

When registering a tool, the AiTool component can be used to show tool progress and results 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.

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 (              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. “Confirm” and Cancel” buttons are displayed to the user.

Usage

<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 (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:

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.