---
title: "Liveblocks Notion-like AI Editor"
description: "A Notion-like collaborative text editor with AI features built with Liveblocks, Lexical, Vercel AI SDK, and Next.js."
url: "https://vercel.com/templates/next.js/liveblocks-notion-like-ai-editor"
links:
  repository: "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-notion-like-ai-editor"
  demo: "https://nextjs-notion-like-ai-editor.liveblocks.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Notion-like+AI+Editor&demo-description=A+notion-like+ai+editor+example+built+with+Liveblocks+and+Next.js&demo-url=https%3A%2F%2Fliveblocks.io%2Fexamples%2Fnotion-like-ai-editor%2Fnextjs&project-name=notion-like-ai-editor&repository-name=notion-like-ai-editor&repository-url=https%3A%2F%2Fgithub.com%2Fliveblocks%2Fliveblocks%2Fblob%2Fmain%2Fexamples%2Fnextjs-notion-like-ai-editor&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3syb9V7uruTXryuIG5fVEs%2Fe8f7ef8a7b6c0467a66965fb035f3fd6%2Fvercel-gallery-template-notion-like-ai-editor.png&developer-id=oac_vgAdc0379wKPfhSvnUIZ4Vc8&integration-ids=oac_vgAdc0379wKPfhSvnUIZ4Vc8&env=OPENAI_API_KEY&external-id=eyJlbnYiOlt7Im5hbWUiOiJMSVZFQkxPQ0tTX1NFQ1JFVF9LRVkiLCJ0eXBlIjoic2VjcmV0In1dLCJlbnZSZWFkeSI6W10sIm9yaWdpbiI6IkVYQV9WREIifQ"
---

# Liveblocks Notion-like AI Editor

A Notion-like collaborative text editor with AI features built with Liveblocks, Lexical, Vercel AI SDK, and Next.js.

<p align="center">
  <a href="https://liveblocks.io#gh-light-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
  </a>
  <a href="https://liveblocks.io#gh-dark-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
  </a>
</p>

# Notion-like AI Editor (Lexical)

<p>
  <a href="https://liveblocks.io/examples/notion-like-ai-editor/nextjs-notion-like-ai-editor/preview">
    <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-notion-like-ai-editor">
    <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" />
  <img src="https://img.shields.io/badge/lexical-message?style=flat&color=7bf" alt="Lexical" />
</p>

This example shows how to build a collaborative text editor with an AI toolbar using [Liveblocks](https://liveblocks.io), [Lexical](https://lexical.dev/), [Vercel AI SDK](https://sdk.vercel.ai/), and [Next.js](https://nextjs.org/).

As users edit the document, changes will be automatically persisted and synced—allowing for an editor that updates in real-time across clients. Users will also be able to see who see each other’s cursors in the document. Query AI to generate improvements and new content.

<img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/examples/notion-like-ai-editor.png" width="536" alt="Collaborative Text Editor" />

## Getting started

Run the following command to try this example locally:

```bash
npx create-liveblocks-app@latest --example nextjs-notion-like-ai-editor --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
- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)

</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-notion-like-ai-editor --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-notion-like-ai-editor) on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a [secret](https://codesandbox.io/docs/secrets).

</details>

## Related Templates

### [Liveblocks Linear-like Issue Tracker](https://vercel.com/templates/next.js/liveblocks-linear-like-issue-tracker)

A Linear-like collaborative issue tracker using Liveblocks and Next.js.

### [Liveblocks Tldraw Whiteboard](https://vercel.com/templates/next.js/liveblocks-tldraw-whiteboard)

A collaborative tldraw-like whiteboard built with Liveblocks Storage and Next.js.

### [Novel – AI-powered Notion-style editor](https://vercel.com/templates/next.js/novel)

A Notion-style WYSYWIG editor with AI-powered autocompletions, built with Tiptap, OpenAI, and Vercel AI SDK.

---

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