# Notion-like AI Editor (Lexical)

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

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)

### Deploy on Vercel

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.

### Develop on CodeSandbox

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

Liveblocks Notion-like AI Editor