Get started - Get started with AI Copilots 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.

Quickstart

Install Liveblocks
Every package should use the same version.
$npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/node

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(`*`, session.FULL_ACCESS);
  // 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