Get started with an AI chat using Liveblocks and React

Liveblocks is a realtime collaboration infrastructure for building performant collaborative experiences. Follow the following steps to start adding an advanced AI chat to your React application using the hooks from @liveblocks/react and the components from @liveblocks/react-ui.

Quickstart

Install Liveblocks

Every package should use the same version.

Terminal

npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/node

Set up an authentication route

Create an authentication endpoint at /api/liveblocks-auth, passing a unique user ID to prepareSession. Each user has their own set of private chats, and this allows Liveblocks to identify who is connecting. Add your secret key from the dashboard.

Your endpoint at /api/liveblocks-auth

import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "",});
export async function POST() {  // Get the current user from your database  const user = {    id: "user-1",    info: {      // Optional. `name`, `avatar`, `color`, custom info.    },  };
  // Create a session for the current user  const session = liveblocks.prepareSession(user.id, {    userInfo: user.info,  });
  // Give the user access to AI chats  session.allow(`*`, ["*:write"]);
  // Authorize the user and return the result  const { status, body } = await session.authorize();  return new Response(body, { status });}

Set up the Liveblocks client

To connect the user to their chats, you must add LiveblocksProvider to a client component in your app.

App.tsx

"use client";
import { LiveblocksProvider } from "@liveblocks/react/suspense";import { MyApp } from "./MyApp";
export default function App() {  return (    <LiveblocksProvider authEndpoint="/api/liveblocks-auth">      <MyApp />    </LiveblocksProvider>  );}

Add the AI chat component

Now you can add the AiChat component to your application. This component renders a fully-featured AI chat interface with message history and a composer. You can add tools, knowledge, and use hooks.

MyApp.tsx

"use client";
import { AiChat } from "@liveblocks/react-ui";import { RegisterAiTool, RegisterAiKnowledge } from "@liveblocks/react";
export function MyApp() {  return (    <div style={{ height: 500, width: 500 }}>      <AiChat        chatId="my-first-chat"        // copilotId="co_aH1j2..."      />      {/* <RegisterAiTool ... /> and <RegisterAiKnowledge ... /> */}    </div>  );}

Import default styles
The default components come with default styles, you can import them into the root of your app or directly into a CSS file with @import.
import "@liveblocks/react-ui/styles.css";
Next: create a copilot
AI Copilots is set up and working, but it’s using our default AI model and prompt—the next step is to create a custom copilot using your preferred AI provider and configuration.
Create a copilot