diff --git a/assets/ai-copilots/actions.png b/assets/ai-copilots/actions.png
deleted file mode 100644
index 9772dddbd2a..00000000000
Binary files a/assets/ai-copilots/actions.png and /dev/null differ
diff --git a/assets/ai-copilots/branching-chats.png b/assets/ai-copilots/branching-chats.png
deleted file mode 100644
index 5b0b7341946..00000000000
Binary files a/assets/ai-copilots/branching-chats.png and /dev/null differ
diff --git a/assets/ai-copilots/dashboard-add-copilot.png b/assets/ai-copilots/dashboard-add-copilot.png
deleted file mode 100644
index efbd631783b..00000000000
Binary files a/assets/ai-copilots/dashboard-add-copilot.png and /dev/null differ
diff --git a/assets/ai-copilots/full-dashboard.png b/assets/ai-copilots/full-dashboard.png
deleted file mode 100644
index 283cac4f255..00000000000
Binary files a/assets/ai-copilots/full-dashboard.png and /dev/null differ
diff --git a/assets/ai-copilots/image.png b/assets/ai-copilots/image.png
deleted file mode 100644
index 3b49a7475d4..00000000000
Binary files a/assets/ai-copilots/image.png and /dev/null differ
diff --git a/assets/authentication-access-token-permissions.png b/assets/authentication-access-token-permissions.png
deleted file mode 100644
index 3ffb5e0009a..00000000000
Binary files a/assets/authentication-access-token-permissions.png and /dev/null differ
diff --git a/assets/authentication-id-token-permissions.png b/assets/authentication-id-token-permissions.png
deleted file mode 100644
index c0542757e77..00000000000
Binary files a/assets/authentication-id-token-permissions.png and /dev/null differ
diff --git a/assets/concepts/liveblocks-collaboration-infrastructure.png b/assets/concepts/liveblocks-collaboration-infrastructure.png
index 50ad085485b..0f75269f60d 100644
Binary files a/assets/concepts/liveblocks-collaboration-infrastructure.png and b/assets/concepts/liveblocks-collaboration-infrastructure.png differ
diff --git a/assets/concepts/liveblocks-rooms.png b/assets/concepts/liveblocks-rooms.png
index 5dde3666717..ca11c3290bf 100644
Binary files a/assets/concepts/liveblocks-rooms.png and b/assets/concepts/liveblocks-rooms.png differ
diff --git a/assets/concepts/liveblocks-structure.png b/assets/concepts/liveblocks-structure.png
index 51d71f06943..d33128cfb2d 100644
Binary files a/assets/concepts/liveblocks-structure.png and b/assets/concepts/liveblocks-structure.png differ
diff --git a/assets/managing-rooms/rooms-type-metadata.mp4 b/assets/managing-rooms/rooms-type-metadata.mp4
deleted file mode 100644
index 66fa5deb7ec..00000000000
Binary files a/assets/managing-rooms/rooms-type-metadata.mp4 and /dev/null differ
diff --git a/assets/n8n-nodes/n8n-nodes-install.mp4 b/assets/n8n-nodes/n8n-nodes-install.mp4
new file mode 100644
index 00000000000..e4e5dd1a852
Binary files /dev/null and b/assets/n8n-nodes/n8n-nodes-install.mp4 differ
diff --git a/assets/n8n-nodes/n8n-nodes.mp4 b/assets/n8n-nodes/n8n-nodes.mp4
new file mode 100644
index 00000000000..f48aafc2b68
Binary files /dev/null and b/assets/n8n-nodes/n8n-nodes.mp4 differ
diff --git a/assets/nextjs-starter-kit/create-api-key.mp4 b/assets/nextjs-starter-kit/create-api-key.mp4
deleted file mode 100644
index cefe634b1e6..00000000000
Binary files a/assets/nextjs-starter-kit/create-api-key.mp4 and /dev/null differ
diff --git a/assets/tutorials/todo-list/todo-list.png b/assets/tutorials/todo-list/todo-list.png
deleted file mode 100644
index 2a3bf2964cb..00000000000
Binary files a/assets/tutorials/todo-list/todo-list.png and /dev/null differ
diff --git a/assets/tutorials/todo-list/tutorial-todo-list-1.gif b/assets/tutorials/todo-list/tutorial-todo-list-1.gif
deleted file mode 100644
index a419cc83c49..00000000000
Binary files a/assets/tutorials/todo-list/tutorial-todo-list-1.gif and /dev/null differ
diff --git a/assets/tutorials/whiteboard/tutorial-whiteboard-7.mp4 b/assets/tutorials/whiteboard/tutorial-whiteboard-7.mp4
deleted file mode 100644
index 3ce967bdc10..00000000000
Binary files a/assets/tutorials/whiteboard/tutorial-whiteboard-7.mp4 and /dev/null differ
diff --git a/assets/tutorials/whiteboard/tutorial-whiteboard.gif b/assets/tutorials/whiteboard/tutorial-whiteboard.gif
deleted file mode 100644
index c5c45b9dd0f..00000000000
Binary files a/assets/tutorials/whiteboard/tutorial-whiteboard.gif and /dev/null differ
diff --git a/assets/tutorials/whiteboard/whiteboard.png b/assets/tutorials/whiteboard/whiteboard.png
deleted file mode 100644
index 50a0ebbda2c..00000000000
Binary files a/assets/tutorials/whiteboard/whiteboard.png and /dev/null differ
diff --git a/assets/websocket-infrastructure/connection-engine.png b/assets/websocket-infrastructure/connection-engine.png
index c6d2021d173..e9995f5a58f 100644
Binary files a/assets/websocket-infrastructure/connection-engine.png and b/assets/websocket-infrastructure/connection-engine.png differ
diff --git a/assets/websocket-infrastructure/edge-network.png b/assets/websocket-infrastructure/edge-network.png
index 1ec501872cd..d17bf4e66ca 100644
Binary files a/assets/websocket-infrastructure/edge-network.png and b/assets/websocket-infrastructure/edge-network.png differ
diff --git a/docs/pages/collaboration-features/ai-collaboration.mdx b/docs/pages/collaboration-features/ai-collaboration.mdx
new file mode 100644
index 00000000000..26842297015
--- /dev/null
+++ b/docs/pages/collaboration-features/ai-collaboration.mdx
@@ -0,0 +1,290 @@
+---
+meta:
+ title: "AI Collaboration"
+ parentTitle: "Collaboration features"
+ description: "Easily integrate AI collaboration into your product"
+---
+
+Bring realtime multiplayer to your AI agents with Feeds and Presence. Connect
+any workflow and use Liveblocks APIs to update your application state with
+realtime UI updates, comment responses, AI presence, and more. It’s also
+possible to create and update feeds when an AI assistant is
+[mentioned in a comment](/docs/collaboration-features/comments/users-and-mentions),
+or trigger a feed from a custom UI component.
+
+Any workflows are compatible, such as n8n, LangChain, Crew AI, or custom setups.
+Feeds is ideal for multi-agent orchestration, automation, and complex pipelines.
+
+## Overview
+
+Feeds are realtime message lists that update live in your React app, inside
+[rooms](/docs/concepts#Rooms). It often makes sense to create feeds from your
+back end, and then render the results on the front end. Here's how to
+[create a feed](/docs/api-reference/liveblocks-client#post-rooms-roomId-feed)
+and
+[send a message](/docs/api-reference/liveblocks-client#post-rooms-roomId-feeds-feedId-messages)
+to it in Node.js.
+
+```ts title="Creating a feed and sending a message"
+import { liveblocks } from "@liveblocks/node";
+
+const liveblocks = new liveblocks.Liveblocks({
+ secret: "{{SECRET_KEY}}",
+});
+
+// +++
+const feed = await liveblocks.createFeed({
+ roomId: "my-room-id",
+ feedId: "my-feed-id",
+});
+// +++
+
+// +++
+const message = await liveblocks.createFeedMessage({
+ roomId: "my-room-id",
+ feedId: "my-feed-id",
+
+ // Custom message data
+ data: {
+ role: "user",
+ content: "Hello world",
+ },
+});
+// +++
+```
+
+In React, you can render the list of messages in a feed using
+[`useFeedMessages`](/docs/api-reference/liveblocks-react#useFeedMessages). This
+list updates in realtime for all connected users.
+
+```tsx title="Rendering a feed's messages"
+import { useFeedMessages } from "@liveblocks/react/suspense";
+
+function Feed() {
+ // +++
+ const { messages, error, isLoading } = useFeedMessages("my-feed-id");
+ // +++
+
+ // +++
+ // [{ data: { role: "user", content: "Hello world" }, ... }]
+ console.log(messages);
+ // +++
+
+ return (
+
+ {messages.map((message) => (
+
{message.content}
+ ))}
+
+ );
+}
+```
+
+You can also add new feed messages from the front end, for example in a chat
+application.
+
+```tsx title="Rendering a feed's messages"
+import {
+ useCreateFeedMessage,
+ useFeedMessages,
+} from "@liveblocks/react/suspense";
+
+function Feed() {
+ const { messages, error, isLoading } = useFeedMessages("my-feed-id");
+ // +++
+ const createFeedMessage = useCreateFeedMessage();
+ // +++
+ const [input, setInput] = useState("");
+
+ return (
+
+ {messages.map((message) => (
+
{message.content}
+ ))}
+ setInput(e.target.value)} />
+
+
+ );
+}
+```
+
+Feeds can be read and edited from React, JavaScript, Node.js, Python, with n8n
+nodes, and via REST API. [API references](#API-Reference).
+
+## Presence
+
+Presence represents connected users shown through UI, such as avatar stacks,
+cursors, or cell selections. When AI workflows are running you can choose to
+show an agent’s presence in your application, alongside humans. To create
+presence use
+[`liveblocks.setPresence`](/docs/api-reference/liveblocks-nodee#post-rooms-roomId-presence).
+
+```tsx
+import { liveblocks } from "@liveblocks/node";
+
+const liveblocks = new liveblocks.Liveblocks({
+ secret: "{{SECRET_KEY}}",
+});
+
+// +++
+await liveblocks.setPresence("my-room-id", {
+ userId: "agent-123",
+
+ // Custom presence data, e.g. the current cursor position
+ data: {
+ status: "active",
+ cursor: { x: 100, y: 200 },
+ },
+
+ // The AI user's information
+ userInfo: {
+ name: "AI Assistant",
+ avatar: "https://example.com/avatar.png",
+ color: "#22c55e",
+ },
+
+ // How long presence appears for
+ ttl: 30,
+});
+// +++
+```
+
+You can render the presence of an AI agents and humans using our default
+[`AvatarStack`](/docs/api-reference/liveblocks-react-ui#AvatarStack) and
+[`Cursors`](/docs/api-reference/liveblocks-react-ui#Cursors) components.
+
+```tsx
+import { AvatarStack, Cursors } from "@liveblocks/react-ui";
+
+function Presence() {
+ return (
+ // +++
+
+
+
+ // +++
+ );
+}
+```
+
+To create custom presence UI, add
+[`useOthers`](/docs/api-reference/liveblocks-react#useOthers), which returns a
+realtime list of every connected user, both human and AI. Here’s a way to render
+cursors for each user.
+
+```tsx
+import { useOthers } from "@liveblocks/react/suspense";
+
+function Avatars() {
+ // +++
+ const others = useOthers();
+ // +++
+
+ return (
+
+ );
+}
+```
+
+Note that `presence` and `info` are contain custom values we set on the back
+end.
+
+## AI comments
+
+One way to use feeds is to render AI comments in your application, using
+[custom thread components](/docs/api-reference/liveblocks-react-ui#Customize-comments).
+We have an example of this set up using [Workflow SDK](https://useworkflow.dev/)
+and [webhooks](/docs/platform/webhooks) to trigger the back end code.
+
+
+
+
+
+## n8n nodes
+
+[n8n](https://n8n.io/) is a workflow automation platform that allows you to
+build agents visually. A set of Liveblocks nodes are available which you can use
+directly in your workflow. Each Liveblocks REST API endpoint has a corresponding
+n8n node, allowing you to add messages to feeds, show presence, update
+multiplayer state, and more.
+
+
+
+## API Reference
+
+
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+## Examples
+
+
+
+
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots.mdx b/docs/pages/collaboration-features/ai-copilots.mdx
similarity index 87%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots.mdx
rename to docs/pages/collaboration-features/ai-copilots.mdx
index 44c8270384f..835efb747e4 100644
--- a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots.mdx
+++ b/docs/pages/collaboration-features/ai-copilots.mdx
@@ -1,7 +1,7 @@
---
meta:
- title: "Liveblocks AI Copilots"
- parentTitle: "AI Agents"
+ title: "AI Copilots"
+ parentTitle: "Collaboration features"
description: "Easily integrate customizable AI copilots into your product"
---
@@ -17,21 +17,21 @@ can understand and modify your application state.
}
/>
}
/>
@@ -40,14 +40,14 @@ can understand and modify your application state.
}
/>
@@ -56,21 +56,21 @@ can understand and modify your application state.
}
/>
}
/>
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/copilots.mdx b/docs/pages/collaboration-features/ai-copilots/copilots.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/copilots.mdx
rename to docs/pages/collaboration-features/ai-copilots/copilots.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/default-components.mdx b/docs/pages/collaboration-features/ai-copilots/default-components.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/default-components.mdx
rename to docs/pages/collaboration-features/ai-copilots/default-components.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/features.mdx b/docs/pages/collaboration-features/ai-copilots/features.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/features.mdx
rename to docs/pages/collaboration-features/ai-copilots/features.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/hooks.mdx b/docs/pages/collaboration-features/ai-copilots/hooks.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/hooks.mdx
rename to docs/pages/collaboration-features/ai-copilots/hooks.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/knowledge.mdx b/docs/pages/collaboration-features/ai-copilots/knowledge.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/knowledge.mdx
rename to docs/pages/collaboration-features/ai-copilots/knowledge.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/styling-and-customization.mdx b/docs/pages/collaboration-features/ai-copilots/styling-and-customization.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/styling-and-customization.mdx
rename to docs/pages/collaboration-features/ai-copilots/styling-and-customization.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/tools.mdx b/docs/pages/collaboration-features/ai-copilots/tools.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/tools.mdx
rename to docs/pages/collaboration-features/ai-copilots/tools.mdx
diff --git a/docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/troubleshooting.mdx b/docs/pages/collaboration-features/ai-copilots/troubleshooting.mdx
similarity index 100%
rename from docs/pages/ready-made-features/ai-agents/liveblocks-ai-copilots/troubleshooting.mdx
rename to docs/pages/collaboration-features/ai-copilots/troubleshooting.mdx
diff --git a/docs/pages/ready-made-features/comments.mdx b/docs/pages/collaboration-features/comments.mdx
similarity index 88%
rename from docs/pages/ready-made-features/comments.mdx
rename to docs/pages/collaboration-features/comments.mdx
index f92cc9e33f9..aa26153a21a 100644
--- a/docs/pages/ready-made-features/comments.mdx
+++ b/docs/pages/collaboration-features/comments.mdx
@@ -1,7 +1,7 @@
---
meta:
title: "Comments"
- parentTitle: "Ready-made features"
+ parentTitle: "Collaboration features"
description:
"Embed a customizable commenting experience into your product to enable
people to collaborate."
@@ -19,21 +19,21 @@ annotations, video annotations, and more.
}
/>
}
/>
@@ -42,21 +42,21 @@ annotations, video annotations, and more.
}
/>
}
/>
@@ -65,14 +65,14 @@ annotations, video annotations, and more.
}
/>
}
/>
diff --git a/docs/pages/ready-made-features/comments/concepts.mdx b/docs/pages/collaboration-features/comments/concepts.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/concepts.mdx
rename to docs/pages/collaboration-features/comments/concepts.mdx
diff --git a/docs/pages/ready-made-features/comments/default-components.mdx b/docs/pages/collaboration-features/comments/default-components.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/default-components.mdx
rename to docs/pages/collaboration-features/comments/default-components.mdx
diff --git a/docs/pages/ready-made-features/comments/email-notifications.mdx b/docs/pages/collaboration-features/comments/email-notifications.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/email-notifications.mdx
rename to docs/pages/collaboration-features/comments/email-notifications.mdx
diff --git a/docs/pages/ready-made-features/comments/hooks.mdx b/docs/pages/collaboration-features/comments/hooks.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/hooks.mdx
rename to docs/pages/collaboration-features/comments/hooks.mdx
diff --git a/docs/pages/ready-made-features/comments/metadata.mdx b/docs/pages/collaboration-features/comments/metadata.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/metadata.mdx
rename to docs/pages/collaboration-features/comments/metadata.mdx
diff --git a/docs/pages/ready-made-features/comments/primitives.mdx b/docs/pages/collaboration-features/comments/primitives.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/primitives.mdx
rename to docs/pages/collaboration-features/comments/primitives.mdx
diff --git a/docs/pages/ready-made-features/comments/styling-and-customization.mdx b/docs/pages/collaboration-features/comments/styling-and-customization.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/styling-and-customization.mdx
rename to docs/pages/collaboration-features/comments/styling-and-customization.mdx
diff --git a/docs/pages/ready-made-features/comments/users-and-mentions.mdx b/docs/pages/collaboration-features/comments/users-and-mentions.mdx
similarity index 100%
rename from docs/pages/ready-made-features/comments/users-and-mentions.mdx
rename to docs/pages/collaboration-features/comments/users-and-mentions.mdx
diff --git a/docs/pages/ready-made-features/multiplayer.mdx b/docs/pages/collaboration-features/multiplayer.mdx
similarity index 90%
rename from docs/pages/ready-made-features/multiplayer.mdx
rename to docs/pages/collaboration-features/multiplayer.mdx
index f22778ee3e4..6b367398d87 100644
--- a/docs/pages/ready-made-features/multiplayer.mdx
+++ b/docs/pages/collaboration-features/multiplayer.mdx
@@ -1,7 +1,7 @@
---
meta:
title: "Multiplayer"
- parentTitle: "Ready-made features"
+ parentTitle: "Collaboration features"
description:
"Add realtime collaboration to any surface in your product—from text editors
to whiteboards, forms, and beyond."
@@ -28,14 +28,14 @@ editors (like Tiptap, Lexical, or BlockNote), or more general packages like
}
/>
@@ -44,7 +44,7 @@ editors (like Tiptap, Lexical, or BlockNote), or more general packages like
}
/>
@@ -56,14 +56,14 @@ editors (like Tiptap, Lexical, or BlockNote), or more general packages like
}
/>
}
/>
@@ -117,9 +117,9 @@ Use these SDKs to add multiplayer editing to rich text editors.
Use these SDKs to add multiplayer editing to whiteboards, forms, tables, or any
custom UI. These SDKs integrate directly with
-[Liveblocks Storage](/docs/ready-made-features/multiplayer/sync-engine/liveblocks-storage)
+[Liveblocks Storage](/docs/collaboration-features/multiplayer/sync-engine/liveblocks-storage)
and
-[Liveblocks Yjs](/docs/ready-made-features/multiplayer/sync-engine/liveblocks-yjs).
+[Liveblocks Yjs](/docs/collaboration-features/multiplayer/sync-engine/liveblocks-yjs).
}
/>
@@ -39,21 +39,21 @@ also automatically trigger collaboration notifications where appropriate.
}
/>
}
/>
}
/>
diff --git a/docs/pages/ready-made-features/notifications/concepts.mdx b/docs/pages/collaboration-features/notifications/concepts.mdx
similarity index 100%
rename from docs/pages/ready-made-features/notifications/concepts.mdx
rename to docs/pages/collaboration-features/notifications/concepts.mdx
diff --git a/docs/pages/ready-made-features/notifications/default-components.mdx b/docs/pages/collaboration-features/notifications/default-components.mdx
similarity index 100%
rename from docs/pages/ready-made-features/notifications/default-components.mdx
rename to docs/pages/collaboration-features/notifications/default-components.mdx
diff --git a/docs/pages/ready-made-features/notifications/email-notifications.mdx b/docs/pages/collaboration-features/notifications/email-notifications.mdx
similarity index 100%
rename from docs/pages/ready-made-features/notifications/email-notifications.mdx
rename to docs/pages/collaboration-features/notifications/email-notifications.mdx
diff --git a/docs/pages/ready-made-features/notifications/hooks.mdx b/docs/pages/collaboration-features/notifications/hooks.mdx
similarity index 100%
rename from docs/pages/ready-made-features/notifications/hooks.mdx
rename to docs/pages/collaboration-features/notifications/hooks.mdx
diff --git a/docs/pages/ready-made-features/notifications/styling-and-customization.mdx b/docs/pages/collaboration-features/notifications/styling-and-customization.mdx
similarity index 100%
rename from docs/pages/ready-made-features/notifications/styling-and-customization.mdx
rename to docs/pages/collaboration-features/notifications/styling-and-customization.mdx
diff --git a/docs/pages/concepts.mdx b/docs/pages/concepts.mdx
index 252de1f0c2a..df0e1bde891 100644
--- a/docs/pages/concepts.mdx
+++ b/docs/pages/concepts.mdx
@@ -7,12 +7,12 @@ meta:
everything fits together."
---
-Liveblocks is the collaboration layer for your product. It provides the
-architecture, realtime backend, and ready-made features that let humans and AI
-collaborate inside your app—both in realtime and asynchronously. Think of
-Liveblocks as the collaboration architecture your product never had. This page
-introduces the core concepts behind Liveblocks so you understand how everything
-fits together.
+Liveblocks is the realtime infrastructure and conflict-free sync layer for your
+product. It provides the stateful WebSocket room-based architecture and
+primitives to let people and AI agents work together inside your app—both in
+realtime and asynchronously. Think of Liveblocks as the collaboration
+architecture your product never had. This page introduces the core concepts
+behind Liveblocks so you understand how everything fits together.
-Rooms typically map to artifacts people and AI can create inside your product,
-such as text documents, workflow diagrams, spreadsheets, whiteboards, forms, 3D
-files, video editors, design files, presentations, and more.
+Rooms typically map to artifacts people and AI agents can create inside your
+product, such as text documents, workflow diagrams, spreadsheets, whiteboards,
+forms, 3D files, video editors, design files, presentations, and more.
-## Ready-made features
+## Primitives
-Liveblocks includes a set of collaboration building blocks you can use
-individually or together. These ready-made features provide pre-built
-components, hooks, and APIs that handle the complexity of realtime
-collaboration, allowing you to focus on building your product’s unique
-experience.
+Primitives are the building blocks available inside rooms that make multiplayer
+possible at scale: Presence, Broadcast, Storage, Feeds, Threads.
+
+
+
+
+
+
+
+
+
+## Collaboration features
+
+With Liveblocks, you can build all sorts of collaboration features. Most of
+these features come with pre-built components, hooks, and APIs that handle the
+complexity of realtime collaboration, allowing you to focus on building your
+product’s unique experience.
+
-## Collaborators
+## Users
-Collaborators are the entities that do work together in your application.
-Liveblocks provides the infrastructure and ready-made features they use to
-collaborate. There are two types of collaborators: users (people) and AI agents.
+Users are the entities that do work together in your application. Liveblocks
+provides the realtime infrastructure and collaboration features they use to
+collaborate. There are two types of users: people and AI agents.
-### Users
+### People
-Users are the authenticated people using your application. Liveblocks only needs
+People are the authenticated user using your application. Liveblocks only needs
a `userId` to identify them. Users can:
- View and edit content.
@@ -157,12 +187,13 @@ a `userId` to identify them. Users can:
### AI Agents
AI agents are AI-driven collaborators that can act inside your product.
-Liveblocks supports two types of agents: Liveblocks AI Copilots and framework
-agents (private beta).
+Liveblocks supports two types of AI agents: singleplayer AI assistants powered
+by Liveblocks AI Copilots and backend agents powered by your own infrastructure.
-#### Liveblocks AI Copilots
+#### Singleplayer AI assistants
-Configured directly in the dashboard. Ideal for chatbot-style assistive
+Singleplayer AI assistants can be built with Liveblocks AI Copilots. They are
+configured directly in the dashboard. Ideal for chatbot-style assistive
behavior.
- Works with any LLM (OpenAI, Anthropic, Gemini, or custom).
@@ -173,12 +204,12 @@ behavior.
- Acts on behalf of a user to take actions inside your app.
- Accessed through chat (not via @ mentions).
-#### Framework agents (private beta)
+#### Backend AI agents
-Use external agents powered by your own infrastructure or tools like
+Backend AI agents are powered by your own infrastructure or tools like
[n8n](https://n8n.io/), [LangChain](https://www.langchain.com/),
-[Crew AI](https://crewai.com/), and more. Framework agents behave like true
-collaborators.
+[Crew AI](https://crewai.com/), and more. Backend AI agents behave like true
+collaborators insde rooms.
- They appear in rooms with presence.
- Users can @mention them in comments or text documents.
@@ -186,14 +217,6 @@ collaborators.
- Your agent returns actions that update UI, create comments, or drive
workflows.
-
-
-Framework agents are currently in private beta. If you would like access to the
-beta, please [contact us](https://liveblocks.io/contact/sales). We’d love to
-hear from you.
-
-
-
## Platform
The Liveblocks Platform powers collaboration at runtime through a realtime back
@@ -206,16 +229,9 @@ logs. The platform also includes a
[DevTools browser extension](/docs/platform/devtools) and a comprehensive set of
SDKs and packages.
-### SDKs and packages
+### API Reference
-
- }
- />
+}
+ title="React Flow"
+ href="/docs/api-reference/liveblocks-react-flow"
+ description="@liveblocks/react-flow"
+ visual={}
/>
}
/>
+ }
+ />
}
/>
+ }
+ />
}
/>
+ }
+ />
+
+ Install Liveblocks
+
+
+ Every package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/node @liveblocks/react
+ ```
+
+
+
+
+
+ Initialize the `liveblocks.config.ts` file
+
+
+ We can use this file later to [define types for our application](/docs/api-reference/liveblocks-react#Typing-your-data).
+
+ ```bash
+ npx create-liveblocks-app@latest --init --framework react
+ ```
+
+
+
+
+
+
+ Define feed message shape
+
+
+ Inside the new `liveblocks.config.ts` file, define the data shape for messages in feeds.
+ Any JSON data is supported, and can be used to render UI in your application. In this
+ this guide, we'll define `role` and `content` properties, like you’d find in an AI chat.
+
+ ```tsx file="liveblocks.config.ts"
+ // liveblocks.config.ts
+ declare global {
+ interface Liveblocks {
+ // Data shape for feed messages
+ // +++
+ FeedMessageData: {
+ role: "user" | "assistant" | "system";
+ content: string;
+ };
+ // +++
+
+ // Add custom metadata to each feed
+ FeedMetadata: {};
+ }
+ }
+
+ export {};
+ ```
+
+
+
+
+
+ Create a feed in your back end
+
+
+ Create a feed in your back end using the [`createFeed`](/docs/api-reference/liveblocks-node#post-rooms-roomId-feeds)
+ method and send messages with the [`createFeedMessage`](/docs/api-reference/liveblocks-node#post-rooms-roomId-feeds-feedId-messages)
+ method. This snippet simualtes a slow running process then adds a second message. Here we’ve put this in a server action.
+
+ Picture this file as the AI back end of your application. It’s responsible for generating AI responses and adding them
+ into the feed.
+
+ ```tsx file="app/actions.ts"
+ "use server";
+
+ import { Liveblocks } from "@liveblocks/node";
+
+ const liveblocks = new Liveblocks({
+ secret: "{{SECRET_KEY}}",
+ });
+
+ export async function newFeed(roomId: string, feedId: string) {
+ // Create a new feed
+ const feed = await liveblocks.createFeed({
+ roomId: roomId,
+ feedId: feedId,
+ metadata: {},
+ });
+
+ // Add a first message
+ await liveblocks.createFeedMessage({
+ roomId: roomId,
+ feedId: feedId,
+ data: {
+ role: "assistant",
+ content: "Hello there",
+ },
+ });
+
+ // Simulate a slow running AI process
+ await new Promise((resolve) => setTimeout(resolve, 3000));
+
+ // Add a second message
+ await liveblocks.createFeedMessage({
+ roomId: roomId,
+ feedId: feedId,
+ data: {
+ role: "user",
+ content: "How can I help you today?",
+ },
+ });
+
+ return { feedId };
+ }
+ ```
+
+
+
+
+ Render the feed messages
+
+
+ Now that we’ve defined the data shape, we can start using it.
+ Add [`useFeedMessages`](/docs/api-reference/liveblocks-react#useFeedMessages) to get
+ a list of feed messages, then loop through them to render their `data`.
+ Import the `newFeed` server action into a button to demo creating a new feed.
+
+ ```tsx file="app/RealtimeFeed.tsx"
+ "use client";
+
+ import { useState } from "react";
+ import { useFeedMessages, useRoom } from "@liveblocks/react/suspense";
+ import { newFeed } from "./actions";
+
+ export function RealtimeFeed() {
+ // +++
+ const { messages } = useFeedMessages(feedId);
+ // +++
+ const [feedId, setFeedId] = useState("my-feed-id");
+ const room = useRoom();
+
+ return (
+
+ // +++
+ {messages.map(({ id, data}) => (
+
{data.role}: {data.content}
+ ))}
+ // +++
+
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Create a Liveblocks room
+
+
+ Liveblocks uses the concept of rooms, separate virtual spaces where people
+ collaborate, and to create a realtime experience, multiple users must
+ be connected to the same room. When using Next.js’ `/app` router,
+ we recommend creating your room in a `Room.tsx` file in the same directory
+ as your current route.
+
+ Set up a Liveblocks client with
+ [`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider),
+ join a room with [`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider),
+ and use [`ClientSideSuspense`](/docs/api-reference/liveblocks-react#ClientSideSuspense)
+ to add a loading spinner to your app.
+
+ ```tsx file="app/Room.tsx" highlight="12-18"
+ "use client";
+
+ import { ReactNode } from "react";
+ import {
+ LiveblocksProvider,
+ RoomProvider,
+ ClientSideSuspense,
+ } from "@liveblocks/react/suspense";
+
+ export function Room({ children }: { children: ReactNode }) {
+ return (
+
+
+ Loading…}>
+ {children}
+
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Add the room and feed to your page
+
+
+ After creating your room file, it’s time to join it. Import
+ your room into your `page.tsx` file, and place
+ your feed component inside it.
+
+ ```tsx file="app/page.tsx" highlight="6-8"
+ import { Room } from "./Room";
+ import { RealtimeFeed } from "./RealtimeFeed";
+
+ export default function Page() {
+ return (
+
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Next: authenticate your users and add presence
+
+
+ Feeds is now set up and working! Each user in your app is still anonymous—the next step is to
+ authenticate each user as they connect, and optionally share their live presence in an avatar
+ stack, cursors, or custom UI.
+
+
+
+
+
+
+
+ Optional: read about creating agentic workflows
+
+
+ Liveblocks can be used to create agentic workflows, where AI agents can
+ collaborate with humans in realtime. This is a powerful way to build
+ collaborative applications with AI, and we’ve detailed various ways to create this.
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You’ve set up the foundation to start building a realtime feeds
+experience for your Next.js application.
+
+- [Overview](/docs/collaboration-features/ai-collaboration)
+- [API Reference](/docs/collaboration-features/ai-collaboration#API-Reference)
+- [Enabling agentic workflows with Liveblocks ](/docs/guides/enabling-agentic-workflows-with-liveblocks#ephemeral-presence)
+
+---
+
+## Examples using Feeds
+
+
+
+
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 8410c6c2281..b492556bf26 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -9,7 +9,7 @@ showTitle: false
-## Ready-made features
+## Collaboration features
+
-## SDKs and packages
+## API Reference
-
- }
- />
+}
+ title="React Flow"
+ href="/docs/api-reference/liveblocks-react-flow"
+ description="@liveblocks/react-flow"
+ visual={}
/>
}
/>
+ }
+ />
}
/>
+ }
+ />
}
/>
+ }
+ />
` React component.
-- Define behavior through simple prompts and settings.
-- No backend required—everything runs via the client SDK.
-
-
-
-### Framework agents (private beta)
-
-Bring your own multi-agent logic or external workflows.
-
-- Connect n8n, LangChain, Crew AI, or your own agent system.
-- Receive room events (mentions, messages, actions) via webhooks.
-- Return actions that update UI, add comments, respond to users, or trigger
- workflows.
-- Ideal for multi-agent orchestration, automation, and complex pipelines.
-- Works with any server-side runtime or architecture.
-
-
-
-Framework agents are currently in private beta. If you would like access to the
-beta, please [contact us](https://liveblocks.io/contact/sales). We’d love to
-hear from you.
-
-
diff --git a/docs/pages/tools/n8n-nodes.mdx b/docs/pages/tools/n8n-nodes.mdx
new file mode 100644
index 00000000000..625af858d22
--- /dev/null
+++ b/docs/pages/tools/n8n-nodes.mdx
@@ -0,0 +1,146 @@
+---
+meta:
+ title: "n8n nodes"
+ parentTitle: "Tools"
+ description:
+ "Use Liveblocks n8n nodes to connect Liveblocks to your n8n workflow."
+---
+
+n8n is a workflow automation platform that allows you to build agents visually,
+and you can install a set of Liveblocks nodes which you can use directly in your
+workflow. Each Liveblocks
+[REST API endpoint](/docs/api-reference/rest-api-endpoints) has a corresponding
+n8n node, allowing you to create rooms, add messages to feeds, update
+multiplayer state, and more.
+
+
+
+
+
+## Install
+
+Install our nodes as a
+[community node](https://docs.n8n.io/integrations/community-nodes/installation/)
+in your n8n instance.
+
+1. Open n8n and go to **Settings** → **Community nodes**.
+2. Select **Install** and enter `n8n-nodes-liveblocks` as the npm package name.
+3. Check **☑︎ I understand…** and click **Install**.
+
+_Liveblocks_ and _Liveblocks Trigger_ will now appear in the node palette.
+
+
+
+
+
+## Operations
+
+The package provides two nodes.
+
+### Liveblocks (action node)
+
+Calls the
+[Liveblocks REST API](https://liveblocks.io/docs/api-reference/rest-api-endpoints).
+Choose a **resource**, then an **operation**. Operations map to the API (rooms,
+storage, Yjs, comments, inbox, webhooks-related server flows, etc.).
+
+| Resource | What you can do (examples) |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Room** | List, create, update, delete, and upsert rooms; change room or organization IDs; prewarm; list active users; **set presence**; **broadcast** custom events to the room. |
+| **Storage** | Get, initialize, patch (JSON Patch), or delete Liveblocks storage documents. |
+| **Yjs** | Read Yjs state, send binary updates, list versions, and create or fetch specific versions. |
+| **Thread** | CRUD threads; edit metadata; resolve/unresolve; subscribe/unsubscribe; list subscriptions and thread inbox notifications. |
+| **Comment** | Create, read, edit, and delete comments; add/remove reactions; edit metadata. |
+| **Attachment** | Download comment attachments (binary response when applicable). |
+| **User** | Identify users for Liveblocks features that require user metadata. |
+| **Inbox** | Inbox notifications, notification settings, room subscription settings, mark-as-read, and related triggers. |
+| **Group** | Manage groups and membership; list a user’s groups. |
+| **AI Copilot** | List, create, read, update, and delete AI copilot configurations. |
+| **AI Knowledge** | Manage web and file knowledge sources, fetch markdown or links, and delete sources. |
+
+The node builds requests from the fields you configure in the UI; some endpoints
+accept raw JSON for advanced bodies (for example JSON Patch or broadcast
+payloads). Refer to the
+[Liveblocks REST API reference](https://liveblocks.io/docs/api-reference/rest-api-endpoints)
+for request and response shapes.
+
+### Liveblocks Trigger (webhook)
+
+Starts a workflow when Liveblocks sends a **webhook** to n8n. Configure the
+webhook URL from the trigger in your
+[Liveblocks dashboard](https://liveblocks.io/dashboard) webhook settings. You
+can filter by **event type** or leave the filter empty to receive all supported
+types.
+
+Supported event filters include: `commentCreated`, `commentDeleted`,
+`commentEdited`, `notification`, `storageUpdated`, `threadCreated`,
+`threadDeleted`, `threadMetadataUpdated`, `userEntered`, `userLeft`,
+`yjsUpdate`. The trigger verifies the request using your **webhook signing
+secret** before running the workflow.
+
+## Credentials
+
+### Liveblocks API (required for the Liveblocks action node)
+
+1. Create or open a project in the
+ [Liveblocks dashboard](https://liveblocks.io/dashboard).
+2. Copy the **secret key** (`sk_…`) from project settings.
+3. In n8n, create a credential of type **Liveblocks API** and paste the secret
+ key.
+
+The credential test calls the REST API (for example listing rooms) to confirm
+the key works.
+
+### Liveblocks Webhook Signing Secret (required for Liveblocks Trigger)
+
+1. In the Liveblocks dashboard, open your project’s **webhook** configuration
+ and copy the **signing secret** (`whsec_…`).
+2. In n8n, create a credential of type **Liveblocks Webhook Signing Secret API**
+ and paste that value.
+
+This secret is only used to verify incoming webhook signatures; it is not
+validated with a live HTTP test in the credentials UI.
+
+## Compatibility
+
+- This package declares **`n8nNodesApiVersion` 1** in `package.json`, in line
+ with current n8n community node conventions.
+- It lists **`n8n-workflow`** as a peer dependency (version resolved by your n8n
+ install).
+
+Use a [current n8n release](https://docs.n8n.io/release-notes/) that supports
+community nodes and API version 1. If you hit a compatibility issue, report it
+with your n8n version and this package version.
+
+## Usage
+
+- **Action node**: Add **Liveblocks**, select **resource** and **operation**,
+ then fill the parameters. Map data from previous nodes into room IDs, user
+ IDs, and bodies as needed. Use **Execute step** while designing to inspect API
+ responses and errors.
+- **Trigger**: Add **Liveblocks Trigger**, set credentials, copy the **webhook
+ URL** into the Liveblocks dashboard, and choose which events to listen for.
+ Use n8n’s test URL while building, then switch to the production URL when the
+ workflow is active.
+- **Errors**: Failed API calls surface as n8n errors with HTTP status and
+ message when the API returns them. If webhooks fail verification, check that
+ the signing secret matches the project and that the request is actually from
+ Liveblocks.
+
+New to n8n? See [Try it out](https://docs.n8n.io/try-it-out/) in the n8n docs.
+
+## Resources
+
+- [n8n community nodes documentation](https://docs.n8n.io/integrations/#community-nodes).
+- [REST API reference](/docs/api-reference/rest-api-endpoints).
+- [Webhooks](/docs/platform/webhooks).
+- [How to test webhooks on localhost](/docs/guides/how-to-test-webhooks-on-localhost).
+
+## Source code
+
+The source code is available in our
+[GitHub repository](https://github.com/liveblocks/n8n-nodes-liveblocks).
diff --git a/docs/routes.json b/docs/routes.json
index 2c5888948d1..672316c0a10 100644
--- a/docs/routes.json
+++ b/docs/routes.json
@@ -36,6 +36,11 @@
"path": "/get-started/nextjs-ai-chat",
"hidden": true
},
+ {
+ "title": "Feeds",
+ "path": "/get-started/nextjs-feeds",
+ "hidden": true
+ },
{
"title": "Comments",
"path": "/get-started/react-comments",
@@ -429,151 +434,149 @@
]
},
{
- "title": "Ready-made features",
+ "title": "Collaboration features",
"routes": [
- {
- "title": "Comments",
- "path": "/ready-made-features/comments",
- "routes": [
- {
- "title": "Concepts",
- "path": "/ready-made-features/comments/concepts"
- },
- {
- "title": "Users and mentions",
- "path": "/ready-made-features/comments/users-and-mentions"
- },
- {
- "title": "Default components",
- "path": "/ready-made-features/comments/default-components"
- },
- {
- "title": "Hooks",
- "path": "/ready-made-features/comments/hooks"
- },
- {
- "title": "Metadata",
- "path": "/ready-made-features/comments/metadata"
- },
- {
- "title": "Primitives",
- "path": "/ready-made-features/comments/primitives"
- },
- {
- "title": "Styling and customization",
- "path": "/ready-made-features/comments/styling-and-customization"
- },
- {
- "title": "Email notifications",
- "path": "/ready-made-features/comments/email-notifications"
- }
- ]
- },
{
"title": "Multiplayer",
- "path": "/ready-made-features/multiplayer",
+ "path": "/collaboration-features/multiplayer",
"routes": [
{
"title": "Text editor",
- "path": "/ready-made-features/multiplayer/text-editor",
+ "path": "/collaboration-features/multiplayer/text-editor",
"routes": [
{
"title": "Tiptap",
- "path": "/ready-made-features/multiplayer/text-editor/tiptap"
+ "path": "/collaboration-features/multiplayer/text-editor/tiptap"
},
{
"title": "BlockNote",
- "path": "/ready-made-features/multiplayer/text-editor/blocknote"
+ "path": "/collaboration-features/multiplayer/text-editor/blocknote"
},
{
"title": "Lexical",
- "path": "/ready-made-features/multiplayer/text-editor/lexical"
+ "path": "/collaboration-features/multiplayer/text-editor/lexical"
}
]
},
{
"title": "Sync engine",
- "path": "/ready-made-features/multiplayer/sync-engine",
+ "path": "/collaboration-features/multiplayer/sync-engine",
"routes": [
{
"title": "Yjs",
- "path": "/ready-made-features/multiplayer/sync-engine/liveblocks-yjs"
+ "path": "/collaboration-features/multiplayer/sync-engine/liveblocks-yjs"
},
{
"title": "Storage",
- "path": "/ready-made-features/multiplayer/sync-engine/liveblocks-storage"
+ "path": "/collaboration-features/multiplayer/sync-engine/liveblocks-storage"
}
]
}
]
},
{
- "title": "AI Agents",
- "path": "/ready-made-features/ai-agents",
+ "title": "Comments",
+ "path": "/collaboration-features/comments",
"routes": [
{
- "title": "Liveblocks AI Copilots",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots",
- "routes": [
- {
- "title": "Features",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/features"
- },
- {
- "title": "Copilots",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/copilots"
- },
- {
- "title": "Default components",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/default-components"
- },
- {
- "title": "Hooks",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/hooks"
- },
- {
- "title": "Knowledge",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/knowledge"
- },
- {
- "title": "Tools",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/tools"
- },
- {
- "title": "Styling and customization",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/styling-and-customization"
- },
- {
- "title": "Troubleshooting",
- "path": "/ready-made-features/ai-agents/liveblocks-ai-copilots/troubleshooting"
- }
- ]
+ "title": "Concepts",
+ "path": "/collaboration-features/comments/concepts"
+ },
+ {
+ "title": "Users and mentions",
+ "path": "/collaboration-features/comments/users-and-mentions"
+ },
+ {
+ "title": "Default components",
+ "path": "/collaboration-features/comments/default-components"
+ },
+ {
+ "title": "Hooks",
+ "path": "/collaboration-features/comments/hooks"
+ },
+ {
+ "title": "Metadata",
+ "path": "/collaboration-features/comments/metadata"
+ },
+ {
+ "title": "Primitives",
+ "path": "/collaboration-features/comments/primitives"
+ },
+ {
+ "title": "Styling and customization",
+ "path": "/collaboration-features/comments/styling-and-customization"
+ },
+ {
+ "title": "Email notifications",
+ "path": "/collaboration-features/comments/email-notifications"
}
]
},
{
"title": "Notifications",
- "path": "/ready-made-features/notifications",
+ "path": "/collaboration-features/notifications",
"routes": [
{
"title": "Concepts",
- "path": "/ready-made-features/notifications/concepts"
+ "path": "/collaboration-features/notifications/concepts"
},
{
"title": "Default components",
- "path": "/ready-made-features/notifications/default-components"
+ "path": "/collaboration-features/notifications/default-components"
},
{
"title": "Hooks",
- "path": "/ready-made-features/notifications/hooks"
+ "path": "/collaboration-features/notifications/hooks"
},
{
"title": "Styling and customization",
- "path": "/ready-made-features/notifications/styling-and-customization"
+ "path": "/collaboration-features/notifications/styling-and-customization"
},
{
"title": "Email notifications",
- "path": "/ready-made-features/notifications/email-notifications"
+ "path": "/collaboration-features/notifications/email-notifications"
+ }
+ ]
+ },
+ {
+ "title": "AI Collaboration",
+ "path": "/collaboration-features/ai-collaboration"
+ },
+ {
+ "title": "AI Copilots",
+ "path": "/collaboration-features/ai-copilots",
+ "routes": [
+ {
+ "title": "Features",
+ "path": "/collaboration-features/ai-copilots/features"
+ },
+ {
+ "title": "Copilots",
+ "path": "/collaboration-features/ai-copilots/copilots"
+ },
+ {
+ "title": "Default components",
+ "path": "/collaboration-features/ai-copilots/default-components"
+ },
+ {
+ "title": "Hooks",
+ "path": "/collaboration-features/ai-copilots/hooks"
+ },
+ {
+ "title": "Knowledge",
+ "path": "/collaboration-features/ai-copilots/knowledge"
+ },
+ {
+ "title": "Tools",
+ "path": "/collaboration-features/ai-copilots/tools"
+ },
+ {
+ "title": "Styling and customization",
+ "path": "/collaboration-features/ai-copilots/styling-and-customization"
+ },
+ {
+ "title": "Troubleshooting",
+ "path": "/collaboration-features/ai-copilots/troubleshooting"
}
]
}
@@ -755,6 +758,10 @@
"title": "Next.js Starter Kit",
"path": "/tools/nextjs-starter-kit"
},
+ {
+ "title": "n8n nodes",
+ "path": "/tools/n8n-nodes"
+ },
{
"title": "Agent skills",
"path": "/tools/agent-skills"
diff --git a/guides/pages/how-to-add-users-to-liveblocks-presence-components.mdx b/guides/pages/how-to-add-users-to-liveblocks-presence-components.mdx
index 9f715a68171..c0aa9ae46b7 100644
--- a/guides/pages/how-to-add-users-to-liveblocks-presence-components.mdx
+++ b/guides/pages/how-to-add-users-to-liveblocks-presence-components.mdx
@@ -161,11 +161,32 @@ to use
+
+
+ Render the presence components
+
+ Import the presence components in your app to see them. `Cursors` wraps
+ around the component where the cursors will appear.
+
+ ```tsx
+ import { AvatarStack, Cursors } from "@liveblocks/react-ui";
+
+ function App() {
+ return (
+
+
+ {/* Rest of your app here */}
+
+ );
+ }
+ ```
+
+
Users are now visible
- After adding this, you should now be able to see your users in threads!
+ After adding this, you should now be able to see your users in presence components!