Get started with an AI chat using Liveblocks and Next.js

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

Live example

See the finished result in the AI Chats example.

Quickstart

Install Liveblocks

Every package should use the same version.

Terminal

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

Add your project’s secret key
Create a new .env.local file and add your Liveblocks secret key from the dashboard.
.env.local
LIVEBLOCKS_SECRET_KEY=""

Set up authentication

Create an authentication API route with prepareSession, passing a unique user ID. Each user has their own set of private chats, and this allows Liveblocks to identify who is connecting.

app/api/liveblocks-auth/route.ts

import { Liveblocks } from "@liveblocks/node";import { NextRequest } from "next/server";
const liveblocks = new Liveblocks({  secret: process.env.LIVEBLOCKS_SECRET_KEY!,});
export async function POST(req: NextRequest) {  // 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 });}

Add your secret key
Create a project in the dashboard and add your secret key to .env.local:
.env.local
LIVEBLOCKS_SECRET_KEY=""

Create a Liveblocks provider

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

app/Providers.tsx

"use client";
import { ReactNode } from "react";import { LiveblocksProvider } from "@liveblocks/react";
export function Providers({ children }: { children: ReactNode }) {  return (    <LiveblocksProvider authEndpoint="/api/liveblocks-auth">      {children}    </LiveblocksProvider>  );}

Add the provider to your layout

After creating your provider file, it’s time to use it. Import your room into your layout.tsx file.

app/layout.tsx

import { Providers } from "./Providers";
export default function Layout({ children }) {  return (    <html>      <body>        <Providers>          {children}        </Providers>      </body>    </html>  );}

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.

app/page.tsx

"use client";
import { AiChat } from "@liveblocks/react-ui";import { RegisterAiTool, RegisterAiKnowledge } from "@liveblocks/react";
export default function Page() {  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 layout of your app or directly into a CSS file with @import.
app/layout.tsx
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