---
title: "Liveblocks AI Spreadsheet"
description: "A collaborative AI spreadsheet powered by Liveblocks."
url: "https://vercel.com/templates/next.js/liveblocks-ai-spreadsheet"
links:
  repository: "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-ai-spreadsheet"
  demo: "https://nextjs-ai-spreadsheet.liveblocks.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Liveblocks+AI+Spreadsheet&demo-description=A+collaborative+AI+spreadsheet+powered+by+Liveblocks.&demo-url=https%3A%2F%2Fnextjs-ai-spreadsheet.liveblocks.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FGBogMdNgPPqtq2fLoC1OO%2F5573f7e270cd965a3aa73074e55a1496%2Fliveblocks-ai-spreadsheet-thumbnail.png&project-name=Liveblocks+AI+Spreadsheet&repository-name=liveblocks-ai-spreadsheet&repository-url=https%3A%2F%2Fgithub.com%2Fliveblocks%2Fliveblocks%2Ftree%2Fmain%2Fexamples%2Fnextjs-ai-spreadsheet&from=templates&skippable-integrations=1"
---

# Liveblocks AI Spreadsheet

A collaborative AI spreadsheet powered by Liveblocks.

# Realtime AI spreadsheet

<p>
  <a href="https://liveblocks.io/examples/nextjs-ai-spreadsheet">
    <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-spreadsheet">
    <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 spreadsheet with an AI
that edits the grid, using
[Liveblocks](https://liveblocks.io),
[Handsontable](https://handsontable.com/),
[Next.js](https://nextjs.org/), and the [Vercel AI SDK](https://ai-sdk.dev/).

The grid is backed by Liveblocks Storage, so cells, formatting, column/row sizes,
and order all sync instantly to everyone — along with live selection presence and
per-cell comment threads. Everything is addressed by stable ids, so moving,
sorting, and inserting or deleting rows and columns never breaks comments,
formatting, or presence, and every user sees the same order. The AI lives in a
[Feeds](https://liveblocks.io/docs/collaboration-features/ai-collaboration)-based
chat: it edits the spreadsheet from the server with `@liveblocks/node`
(`mutateStorage`) and shows its live selection with `setPresence`, streaming both
its reply and the grid edits as it works.

## Getting started

Run the following command to try this example locally:

```bash
npx create-liveblocks-app@latest --example nextjs-ai-spreadsheet --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
- Add an `AI_GATEWAY_API_KEY` from the
  [Vercel AI Gateway](https://vercel.com/docs/ai-gateway). This is required for
  the AI chat — it needs a real, tool-calling model to edit the spreadsheet.
- 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 edit a cell, drag
a row, or ask the AI to fill in some data — it appears instantly in both.

</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-spreadsheet --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-spreadsheet)
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.