This May, we’ve written new guides, new examples, and upgraded Storage.

- [AI agents in Comments](#ai-agents-in-comments): How to build complex agents
  into comments.
- [Collaborative grids with Handsontable](#collaborative-handsontable): Add
  comment pins & multiplayer.
- [Liveblocks Storage improvements](#liveblocks-storage-improvements): Better
  performance & new history method.
- [Install with a prompt](#install-with-a-prompt): Copy AI prompts to get
  started with Liveblocks.

## Upgrade now [#upgrade-now]

To use the latest features, update your packages with the following command.

```bash
npx create-liveblocks-app@latest --upgrade
```

If you were previously on Liveblocks 3.17 or below, make sure to follow our
[upgrade guides](/docs/platform/upgrading) before updating.

## AI agents in Comments [#ai-agents-in-comments]

Liveblocks allows you to
[add AI agents to your comment threads](/docs/get-started/nextjs-comments-ai),
and we’ve created new examples highlighting how you can deeply integrate it into
your apps. We’ve also created a new helper to simplify adding markdown to
comments.

### AI flowchart editor

In our
[flowchart example](/examples/collaborative-flowchart-ai/nextjs-react-flow-ai),
you can place comment pins down and ask AI to make changes to the document.
Because our [React flow integration](/docs/api-reference/liveblocks-react-flow)
uses Liveblocks Storage, our sync engine, multiple agents can work at the same
time as humans.

<Figure
  caption={
    <>
      Our{" "}
      <Link href="/examples/collaborative-flowchart-ai/nextjs-react-flow-ai">
        Collaborative Flowchart AI
      </Link>{" "}
      example
    </>
  }
>
  <MuxVideo
    playbackId="BU5xkElYyVXGDBGksop022ym51H5vq001GvvdI1IvDEzs"
    alt="Collaborative Flowchart AI example"
    static={true}
  />
</Figure>

We’ve written a new guide that explains how to
[get started with AI agents in React Flow](/docs/get-started/nextjs-ai-react-flow).

### AI issue editor

In our
[issue tracker example](/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker),
agents have the ability to read and edit issue content and properties. While the
AI makes changes, its agent presence is displayed in the UI, so you can see
exactly which changes it’s making.

<Figure
  caption={
    <>
      Our{" "}
      <Link href="/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker">
        Linear-like Issue Tracker
      </Link>{" "}
      example
    </>
  }
>
  <Figure>
    <MuxVideo
      playbackId="JkHk14vCvCoY01Yd00NyBkU0002rzqRpuQDyTfjuCSGz5wg"
      alt="Linear example"
      static={true}
    />
  </Figure>
</Figure>

We’ve written a new guide on how to
[get started with AI presence](/docs/get-started/nextjs-ai-presence).

### New markdown helper

AI agents often generate markdown output, so to simplify AI replies, we’ve
created a new helper function that converts markdown into a `CommentBody` object
that can be posted back into threads. Here’s how
[`markdownToCommentBody`](/docs/api-reference/liveblocks-node#markdown-to-comment-body)
works.

```ts
import { markdownToCommentBody } from "@liveblocks/node";

// Generate a markdown reply
// +++
const { text: markdown } = await generateText({
  // +++
  model: openai("gpt-5.5"),
  prompt: `Reply to the comment thread: ${thread}`,
});

// Convert to a comment body
// +++
const commentBody = markdownToCommentBody(markdown);
// +++

// Reply to the thread
await liveblocks.createComment({
  roomId,
  threadId,
  data: {
    userId: "agent-123",
    // +++
    body: commentBody,
    // +++
  },
});
```

## Collaborative grids with Handsontable [#collaborative-handsontable]

We’ve written new guides and examples that show you how to add collaboration to
[Handsontable](https://handsontable.com/) grids. The first example enables you
to add contextual comments to individual cells.

<Figure
  caption={
    <>
      Our{" "}
      <Link href="/examples/handsontable-comments/nextjs-comments-handsontable">
        Handsontable Comments
      </Link>{" "}
      example
    </>
  }
>
  <MuxVideo
    playbackId="8Ppae9qZq100UVgotc02HElPYPPykNfjrObIc8AotGfXA"
    alt="Handsontable blog"
    static={true}
  />
</Figure>

In the second example, the table state is multiplayer, and you can edit cells in
realtime with other users. As cells are selected, live presence shows who’s
editing them.

<Figure
  caption={
    <>
      Our{" "}
      <Link href="/examples/multiplayer-handsontable/nextjs-multiplayer-handsontable">
        Multiplayer Handsontable
      </Link>{" "}
      example{" "}
    </>
  }
>
  <MuxVideo
    playbackId="83Jb92z1aThBsVPhVxhmgop3PpoDXUXZ2xLWlANPuBg"
    alt="Handsontable multi window blog"
    static={true}
  />
</Figure>

We’ve written two new Handsontable guides to help you get started with
[contextual comments](/docs/get-started/nextjs-comments-handsontable) and
[multiplayer editing](/docs/get-started/nextjs-multiplayer-handsontable).

## Liveblocks Storage improvements [#liveblocks-storage-improvements]

[Liveblocks Storage](/docs/products/multiplayer-editing/sync-engine/liveblocks-storage)
now has improved performance and a new history method.

### Faster realtime data storage [#faster-realtime-data-storage]

In February, new rooms started using our rewritten v2 realtime data storage
engine. The v2 engine brings a number of benefits to every room:

- Faster initial connection and load times, especially for larger documents.
- Support for much larger documents, preventing out-of-memory crashes.
- Higher limits and lower transmission overhead.

This May, we completed the rollout—all existing rooms have now been seamlessly
migrated to use the v2 engine.
[Learn more about the new engine](/docs/guides/about-the-new-storage-engine).

### Make changes outside of history

Previously, all changes to Storage were tracked by the undo/redo history. You
could batch changes together, but they were still added to the history stack.
Our new method,
[`room.history.disable`](/docs/api-reference/liveblocks-client#Room.history.disable),
allows you to make changes that aren’t saved in history.

```ts
room.history.disable(() => {
  root.set("title", "Hello world");
});
```

This method is particularly useful for background or async changes, for example
adding AI-generated content to the document—changes that a user didn’t make
themselves, and shouldn’t be able to undo. Import
[`useHistory`](/docs/api-reference/liveblocks-react#useHistory) to use
`disable()` in React.

```tsx
import { useHistory, useMutation } from "@liveblocks/react/suspense";

function AiChanges() {
  // +++
  const { disable } = useHistory();
  // +++

  const generateInfo = useMutation(async ({ storage }) => {
    const title = await __generateTitle__(text);
    const description = await __generateDescription__(text);

    // +++
    disable(() => {
      storage.set("title", title);
      storage.set("description", description);
    });
    // +++
  });

  return <Button onClick={generateInfo}>✨ Generate info</Button>;
}
```

Calling [`useUndo`](/docs/api-reference/liveblocks-react#useUndo) after
`generateInfo` has run will not undo the changes made.

## Install with a prompt [#install-with-a-prompt]

We've made it much faster to start building with Liveblocks from inside AI
coding tools like Cursor and Claude Code. Every get started guide now has a
“Copy prompt” button that copies a ready-to-paste prompt straight into your
editor, and any docs page can be copied as Markdown from a new dropdown.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="HOyFir01PZbcp6u01QGPSUbEEFH02yHB02syHZXSRsH3eQU"
    alt="Install with a prompt"
    static={true}
  />
</Figure>

You can even get started from our homepage—your agent will quiz you on what
you’d like to add before it starts working.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="jEG9urNXXFjsbdNdocgkIpuoVSPrwHJtyaue3L9AV01Q"
    alt="Homepage prompt"
    static={true}
  />
</Figure>

We've also added a new [Integrations](/docs/integrations) section to our
documentation, covering how to bring Liveblocks into the tools you already use,
including Bolt, Claude, Codex, Cursor, Lovable, Neon, PlanetScale, Reply,
Supabase, and v0.

## Minor improvements [#minor-improvements]

- Added 20+ new videos to our [showcase](/showcase) highlighting AI agents,
  presence, and multiplayer editing across Comments, React Flow, Handsontable,
  and AG Grid.
- New get started guides for
  [AI Presence](/docs/get-started/nextjs-ai-presence),
  [AI agents in React Flow](/docs/get-started/nextjs-ai-react-flow), and
  [AI agent notifications](/docs/get-started/nextjs-ai-notifications).
- Updated the Notifications get started guide to use a secret key.
- Added AI comments, buttons, and presence to the
  [Linear-like Issue Tracker](/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker)
  example—it can read and edit issue content and properties.
- Added AI comment pins to the
  [Collaborative Flowchart AI](/examples/collaborative-flowchart-ai/nextjs-react-flow-ai)
  example, which can read and edit flow state.
- Added AI comments to the
  [AI Dashboard Reports](/examples/ai-dashboard-reports/nextjs-ai-dashboard-reports)
  example, which can answer questions on the app's data.
- Update provider models in `@liveblocks/node` and the Python SDK to support
  newer models up to GPT-5.5 variants, Sonnet 4.6, Opus 4.7, and Gemini 3/3.1
  variants.
- Fix unexpected disconnects that could happen while receiving large or
  long-running streaming responses from the server (e.g. loading a large initial
  storage state).
- Fix `@liveblocks/client` so clients with `backgroundKeepAliveTimeout` enabled
  no longer disconnect before pending Yjs updates have synced to the server.
- Fix keyboard shortcut in the strikethrough tooltip in
  `@liveblocks/react-tiptap`. Thank you
  [@HellBoy-OP](https://github.com/HellBoy-OP)!
- Fix Yjs undo/redo silently breaking in `@liveblocks/react-tiptap` after
  `editor.registerPlugin` / `unregisterPlugin` is called (e.g. when Tiptap's
  `BubbleMenu`, `DragHandle`, or `SlashCommand` mount). Thank you
  [@lucasmotta](https://github.com/lucasmotta)!
- New breadcrumb UI on docs pages.
- Add `--random-port` (`-P`) flag to `liveblocks dev` in the
  [dev server](/docs/tools/dev-server) (v1.5.0) to bind a random free port,
  ideal for avoiding port collisions in CI.
- Fix `LiveList.push()` in the dev server so concurrent pushes from multiple
  clients no longer settle out of order.
- Fix `client.getOrCreateRoom()` in the dev server so it no longer errors when
  the room already exists, matching production behavior.
- Fix Yjs document updates made via `PUT /v2/rooms/<roomId>/ydoc` in the dev
  server so they get broadcast to connected WebSocket clients, matching
  production behavior.

### Upgrade

To use these latest features, update your packages with:

```bash
npx create-liveblocks-app@latest --upgrade
```

## Contributors [#contributors]

<Contributors
  gitHubUsernames={[
    "ctnicholas",
    "HellBoy-OP",
    "lucasmotta",
    "marcbouchenoire",
    "nvie",
    "ofoucherot",
    "pierrelevaillant",
  ]}
/>