Sign in

Quickstart - 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.

Quickstart

  1. Install Liveblocks

    Every package should use the same version.

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

  2. 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=""

  3. 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 });}

  4. Add your secret key

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

    .env.local
    LIVEBLOCKS_SECRET_KEY=""

  5. 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>  );}

  6. 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>  );}

  7. 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>  );}

  8. 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";

  9. 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

What to read next

Congratulations! You’ve set up the foundation to start building an AI copilot experience for your Next.js application.

Examples using Next.js