---
title: "Liveblocks Multiplayer AI Chat"
description: "A real-time multiplayer chat powered by Liveblocks."
url: "https://vercel.com/templates/next.js/liveblocks-multiplayer-ai-chat"
links:
  repository: "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-ai-elements-realtime"
  demo: "https://nextjs-ai-elements-realtime.liveblocks.app"
  deploy: "https://vercel.com/new/clone?demo-title=Liveblocks+Multiplayer+AI+Chat&demo-description=A+real-time+multiplayer+chat+powered+by+Liveblocks.&demo-url=https%3A%2F%2Fnextjs-ai-elements-realtime.liveblocks.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5eKb1k1hfXIBCRZ7fYkzlw%2F872fdf9c540f2407855d486aadddfdf0%2Fliveblocks-template-thumbnail.png&project-name=Liveblocks+Multiplayer+AI+Chat&repository-name=liveblocks-multiplayer-ai-chat&repository-url=https%3A%2F%2Fgithub.com%2Fliveblocks%2Fliveblocks%2Ftree%2Fmain%2Fexamples%2Fnextjs-ai-elements-realtime&from=templates&skippable-integrations=1"
---

# Liveblocks Multiplayer AI Chat

A real-time multiplayer chat powered by Liveblocks.

# Realtime AI chat with AI Elements

<p>
  <a href="https://liveblocks.io/examples/nextjs-ai-elements-realtime">
    <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" />
  </a>
  <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-ai-elements-realtime">
    <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" />
  </a>
  <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" />
  <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" />
</p>

This example shows how to build a realtime, multiplayer AI chat with
[Liveblocks Feeds](https://liveblocks.io/docs/collaboration-features/ai-collaboration),
[Next.js](https://nextjs.org/), and [AI Elements](https://ai-sdk.dev/elements).

Each chat is a feed inside a Liveblocks room, so messages sync instantly to
everyone connected, complete with shared presence (avatar stack and a live "AI
is thinking…" status). The AI reply is generated on the server and streamed back
into the feed with `@liveblocks/node` (`createFeedMessage` + `updateFeedMessage`),
then rendered live for all users through the `useFeedMessages` hook — including
reasoning, chain of thought, tool calls, sources, and token usage via AI
Elements.

## Getting started

Run the following command to try this example locally:

```bash
npx create-liveblocks-app@latest --example nextjs-ai-elements-realtime --api-key
```

This will download the example and ask permission to open your browser, enabling
you to automatically get your API key from your
[liveblocks.io](https://liveblocks.io) account.

### Manual setup

<details><summary>Read more</summary>

<p></p>

Alternatively, you can set up your project manually:

- Install all dependencies with `npm install`
- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
- Copy your **secret** key from the
  [dashboard](https://liveblocks.io/dashboard/apikeys)
- Create an `.env.local` file and add your **secret** key as the
  `LIVEBLOCKS_SECRET_KEY` environment variable
- _(Optional)_ Add an `AI_GATEWAY_API_KEY` from the
  [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to get real model
  responses. Without it, the example uses a built-in mock assistant so it still
  runs end to end.
- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)

To see the realtime sync, open the page in two browser tabs and send a message
from one — it appears instantly in both, along with the AI's reply.

</details>

### Deploy on Vercel

<details><summary>Read more</summary>

<p></p>

To both deploy on [Vercel](https://vercel.com), and run the example locally, use
the following command:

```bash
npx create-liveblocks-app@latest --example nextjs-ai-elements-realtime --vercel
```

This will download the example and ask permission to open your browser, enabling
you to deploy to Vercel.

</details>

### Develop on CodeSandbox

<details><summary>Read more</summary>

<p></p>

After forking
[this example](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-ai-elements-realtime)
on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a
[secret](https://codesandbox.io/docs/secrets).

</details>

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.