Today, we’re releasing a Liveblocks integration for n8n, an open-source workflow
automation platform. This enables you to build complex AI workflows using a
visual canvas, rather than writing code. n8n already supports hundreds of
popular tools and APIs, and now you can integrate Liveblocks directly into those
workflows. n8n perfectly complements our new
[agent workflow features](/blog/introducing-feeds-and-apis-for-agent-workflows),
enabling realtime workflow status, document editing, and AI presence.

## What is n8n?

[n8n](https://n8n.io/) is an open-source workflow automation tool that lets you
connect different apps and services together. It’s a great way to automate your
workflows and build powerful AI agents by linking nodes together on a visual
canvas.

Nodes are available for hundreds of popular tools and APIs, such as GitHub,
Google Drive, Slack, Anthropic, and now Liveblocks.

<Figure caption="Adding a “Create a thread” node and setting it to post a “Hello world” comment">
  <MuxVideo
    playbackId="HSL3dq7iTMvA018dn6QTl9uEWJh900005zx9lOxDyaYDHg"
    alt="Screen recording: add a Create a thread node and post a Hello world comment"
    static={true}
  />
</Figure>

You can link together different parts of Liveblocks, such as rooms or comments,
with other tools and automations.

<Figure caption="Adding a “Get a thread” node and fetching the thread for that comment">
  <MuxVideo
    playbackId="mKoHaXeAdR00AqrGAH1oJEtgDAW00P1Us1RB1iF02Ns2EM"
    alt="Screen recording: add a Get a thread node and fetch the thread"
    static={true}
  />
</Figure>

Additionally, we’ve added a number of Liveblocks triggers, which you can use to
start your workflows. These are all based on our
[webhooks](/docs/platform/webhooks), which means you can trigger workflows when
users create comments, modify realtime storage, have unread notifications, and
more.

## Liveblocks n8n nodes

Our n8n integration ships a Liveblocks node for each of our 85+ REST APIs—get
started by searching for the verified “Liveblocks” option in the n8n sidebar,
and clicking “Install node”. Here’s a few examples of how you can use them.

### Create a room

[Rooms](/docs/concepts#Rooms) are the foundation of Liveblocks—they’re
multiplayer spaces where people and agents can collaborate. In n8n, add a
“Create a room” node to set one up and define default access.

<Figure caption="Node diagram: Create a room" captionIsAlt>
  <N8nDemo fakeNodeNames={["Create a room"]} />
</Figure>

In your React front end, you can join the room with
[`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider).

```tsx title="Join a room"
import { RoomProvider } from "@liveblocks/react";

export function Room({ children }) {
  return <RoomProvider id="my-room-id">{children}</RoomProvider>;
}
```

### Modify realtime storage

Your multiplayer room may use
[Liveblocks Storage](/docs/collaboration-features/multiplayer/sync-engine/liveblocks-storage)
for realtime data—for example shapes on a collaborative canvas. Use the “Patch
room storage” node to
[update the document with JSON Patch](/docs/guides/modifying-storage-via-rest-api-with-json-patch).

<Figure caption="Node diagram: Patch room storage" captionIsAlt>
  <N8nDemo fakeNodeNames={["Patch room storage"]} />
</Figure>

Changes are displayed in realtime for all connected clients with
[`useStorage`](/docs/api-reference/liveblocks-react#useStorage).

```tsx title="Display realtime storage"
export function Canvas() {
  const shapes = useStorage((root) => root.shapes);

  return (
    <div>
      {shapes.map((shape) => (
        <Shape key={shape.id} shape={shape} />
      ))}
    </div>
  );
}
```

### Use AI to modify realtime storage

By using the “Get room storage” node you can fetch the current realtime document
as JSON. Pass this data through your favorite n8n AI model, then “Patch room
storage” with the generated JSON Patch to apply AI changes to your document.

<Figure
  caption="Node diagram: Get room storage → AI agent → Patch room storage"
  captionIsAlt
>
  <N8nDemo
    fakeNodeNames={["Get room storage", "AI Agent", "Patch room storage"]}
  />
</Figure>

### Show AI presence in a document

By using the “Set room presence” node you can show, then hide, an AI participant
in a document while it generates data. In this workflow, we’re showing presence
as realtime storage is modified.

<Figure
  caption="Node diagram: Set room presence → Get room storage → AI agent → Patch room storage → Set room presence 2"
  captionIsAlt
>
  <N8nDemo
    fakeNodeNames={[
      "Set room presence",
      "Get room storage",
      "AI Agent",
      "Patch room storage",
      "Set room presence 2",
    ]}
  />
</Figure>

In your front end, the AI’s avatar will appear in
[`AvatarStack`](/docs/api-reference/liveblocks-react-ui#AvatarStack).

```tsx title="AI avatar appears in the stack"
import { AvatarStack } from "@liveblocks/react-ui";

export function Header() {
  return <AvatarStack size="48px" />;
}
```

You can also build fully custom presence UI with
[`useOthers`](/docs/api-reference/liveblocks-react#useOthers).

### Display realtime AI workflow status

[Feeds](/docs/collaboration-features/ai-collaboration#Overview) is our new
primitive for storing realtime chat messages, AI activity logs, and similar
streams. We can use this to display a workflow’s status—add the “Create feed
message” node to add a status such as `“Thinking…”` as your agent runs. After,
update the status to `“Done”`.

<Figure
  caption="Node diagram: Create feed message → AI agent → Update feed message"
  captionIsAlt
>
  <N8nDemo
    fakeNodeNames={["Create feed message", "AI Agent", "Update feed message"]}
  />
</Figure>

In your front end, you can show this message in your UI as soon as it’s created
and updated.

```tsx title="Show realtime AI workflow status"
import { useFeedMessages } from "@liveblocks/react/suspense";

export function AgentStatus() {
  const { messages } = useFeedMessages("my-feed-id");
  const latestMessage = messages[messages.length - 1];

  return <div>{latestMessage.data.status}</div>;
}
```

Sending new feed messages updates this UI in realtime.

### Reply to comments with AI

[Comments](/comments) allows you to add threaded commenting to your product. To
create an AI workflows that automatically replies to comments, add the “Comment
created” trigger to start your workflow after a comment is created. Next, use
“Get a comment” to get the comment, generate a response, then insert it with
“Create a comment”.

<Figure
  caption="Node diagram: Comment created trigger → Get a comment → AI agent → Create a comment"
  captionIsAlt
>
  <N8nDemo
    fakeNodeNames={[
      "trigger: Comment created",
      "Get a comment",
      "AI Agent",
      "Create a comment",
    ]}
  />
</Figure>

In the front end, comments are displayed with
[`useThreads`](/docs/api-reference/liveblocks-react#useThreads) and
[`Thread`](/docs/api-reference/liveblocks-react-ui#Thread), and the AI response
will appear after it’s created.

```tsx title="Display comment threads"
import { useThreads } from "@liveblocks/react";
import { Thread } from "@liveblocks/react-ui";

export function Comments() {
  const { threads } = useThreads();

  return (
    <div>
      {threads.map((thread) => (
        <Thread key={thread.id} thread={thread} />
      ))}
    </div>
  );
}
```

### Lots more APIs

We’ve only highlighted a few flows. Many more Liveblocks capabilities are
exposed as n8n operations, so you can:

- List rooms, fetch connected users, send realtime events.
- [Multiplayer](/docs/collaboration-features/multiplayer): Fetch and modify Yjs
  text document data.
- [Comments](/docs/collaboration-features/comments): Send emails when users have
  unread comments.
- [Notifications](/docs/collaboration-features/notifications): Trigger custom
  notifications in notification inboxes.
- [AI Copilots](/docs/collaboration-features/ai-copilots): Upload knowledge
  sources to your chats.

Additionally, each [webhook event](/docs/platform/webhooks#Liveblocks-events)
has a corresponding trigger node, allowing you to start your workflows when
these events occur.

- When a room’s created.
- When a user joins a room.
- When a reaction’s left left on a comment.
- When a thread’s marked as resolved.
- When a text editor’s content is modified.

## Templates

We’ve published three full templates, demonstrating how to use n8n nodes to
interact with Liveblocks. Interact with them below.

### Modify Liveblocks storage with AI

This templates simulates an AI workflow in a drawing tool, containing shapes.
Clicking the trigger creates a room with shapes. Then the AI modifies the shapes
based on a prompt. The AI’s presence is shown during the process.

<Figure
  caption="Interactive n8n nodes: Modify Liveblocks storage with JSON Patch and Anthropic Claude"
  captionIsAlt
>
  <N8nDemo workflowId="modify-json-storage" interactive />
</Figure>

<ButtonLink
  size="lg"
  href="https://n8n.io/workflows/14301-modify-liveblocks-storage-with-json-patch-and-anthropic-claude"
  openInNewWindow
>
  Get template
</ButtonLink>

### Automatic AI comment reply

This templates sets up an AI that can automatic reply to comments in a thread.
First, it checks if the AI was mentioned, before generating a response.

<Figure
  caption="Interactive n8n nodes: Automatic AI reply when mentioned in a Liveblocks comment"
  captionIsAlt
>
  <N8nDemo workflowId="automatic-ai-reply" interactive />
</Figure>

<ButtonLink
  size="lg"
  href="https://n8n.io/workflows/14299-automatic-ai-reply-when-mentioned-in-a-liveblocks-comment"
  openInNewWindow
>
  Get template
</ButtonLink>

### Analyze comment attachments with AI

Similar to the previous template, this one responts to mentions in comment
threads. It also analyzes different types of attachments in comments, and can
answer questions about them.

<Figure
  caption="Interactive n8n nodes: Analyze Liveblocks comment attachments with Anthropic Claude AI"
  captionIsAlt
>
  <N8nDemo workflowId="analyze-comment-attachments" interactive />
</Figure>

<ButtonLink
  size="lg"
  href="https://n8n.io/workflows/14300-analyze-liveblocks-comment-attachments-with-anthropic-claude-ai"
  openInNewWindow
>
  Get template
</ButtonLink>

## Get started

To install the nodes, search for “Liveblocks” in the n8n sidebar, and install
the verified node. Read our documentation if you’d like to learn more.

<ButtonLink href="/docs/integrations/n8n-nodes" size="lg">
  Learn more
</ButtonLink>

## Contributors

<Contributors gitHubUsernames={["jrowny", "ctnicholas"]} />