Chris Nicholas
@chrisnicholas.dev
Developer experience @liveblocks.io • Interactive articles on chrisnicholas.dev
10. Tiptap 3.0 support
You can now use a collaborative Tiptap 3.0 editor, enabling features such as better static rendering, JSX extensions, improved TypeScript support, and more. This means we also support the latest versions of BlockNote now too.
You can now use a collaborative Tiptap 3.0 editor, enabling features such as better static rendering, JSX extensions, improved TypeScript support, and more. This means we also support the latest versions of BlockNote now too.
November 13, 2025 at 4:48 PM
10. Tiptap 3.0 support
You can now use a collaborative Tiptap 3.0 editor, enabling features such as better static rendering, JSX extensions, improved TypeScript support, and more. This means we also support the latest versions of BlockNote now too.
You can now use a collaborative Tiptap 3.0 editor, enabling features such as better static rendering, JSX extensions, improved TypeScript support, and more. This means we also support the latest versions of BlockNote now too.
9. Dashboard improvements
We’ve worked hard to improve the overall user experience of our dashboard, making it simpler and clearer how to manage your projects, rooms, and more. There's new hints and tooltips throughout.
We’ve worked hard to improve the overall user experience of our dashboard, making it simpler and clearer how to manage your projects, rooms, and more. There's new hints and tooltips throughout.
November 13, 2025 at 4:48 PM
9. Dashboard improvements
We’ve worked hard to improve the overall user experience of our dashboard, making it simpler and clearer how to manage your projects, rooms, and more. There's new hints and tooltips throughout.
We’ve worked hard to improve the overall user experience of our dashboard, making it simpler and clearer how to manage your projects, rooms, and more. There's new hints and tooltips throughout.
8. Liveblocks AI assistant
We’ve added a multi-purpose AI assistant to our docs and dashboard, built with AI Copilots. Ask questions, create projects, navigate to pages, view your usage, contact support, and much more.
We’ve added a multi-purpose AI assistant to our docs and dashboard, built with AI Copilots. Ask questions, create projects, navigate to pages, view your usage, contact support, and much more.
November 13, 2025 at 4:48 PM
8. Liveblocks AI assistant
We’ve added a multi-purpose AI assistant to our docs and dashboard, built with AI Copilots. Ask questions, create projects, navigate to pages, view your usage, contact support, and much more.
We’ve added a multi-purpose AI assistant to our docs and dashboard, built with AI Copilots. Ask questions, create projects, navigate to pages, view your usage, contact support, and much more.
7. New AI Copilots examples and docs
I've spent a very long time writing detailed docs for AI Copilots, showing how to complex AI apps. We also have two new AI examples, the AI App builder, and the AI Calendar.
I've spent a very long time writing detailed docs for AI Copilots, showing how to complex AI apps. We also have two new AI examples, the AI App builder, and the AI Calendar.
November 13, 2025 at 4:48 PM
7. New AI Copilots examples and docs
I've spent a very long time writing detailed docs for AI Copilots, showing how to complex AI apps. We also have two new AI examples, the AI App builder, and the AI Calendar.
I've spent a very long time writing detailed docs for AI Copilots, showing how to complex AI apps. We also have two new AI examples, the AI App builder, and the AI Calendar.
6. AI chat status hook
Create status indicators for your <AiChat />, showing what it's currently doing. If your chat is currently using a tool, you can find which tool.
Create status indicators for your <AiChat />, showing what it's currently doing. If your chat is currently using a tool, you can find which tool.
November 13, 2025 at 4:48 PM
6. AI chat status hook
Create status indicators for your <AiChat />, showing what it's currently doing. If your chat is currently using a tool, you can find which tool.
Create status indicators for your <AiChat />, showing what it's currently doing. If your chat is currently using a tool, you can find which tool.
5. AI chat web search.
Your <AiChat /> can now search the web! Enable it when you create a copilot in the dashboard, or through our back end APIs.
Your <AiChat /> can now search the web! Enable it when you create a copilot in the dashboard, or through our back end APIs.
November 13, 2025 at 4:48 PM
5. AI chat web search.
Your <AiChat /> can now search the web! Enable it when you create a copilot in the dashboard, or through our back end APIs.
Your <AiChat /> can now search the web! Enable it when you create a copilot in the dashboard, or through our back end APIs.
4. Filter notification counts
Your unread notification indicator can now load the count of notifications in a certain room, or of a certain type.
Your unread notification indicator can now load the count of notifications in a certain room, or of a certain type.
November 13, 2025 at 4:47 PM
4. Filter notification counts
Your unread notification indicator can now load the count of notifications in a certain room, or of a certain type.
Your unread notification indicator can now load the count of notifications in a certain room, or of a certain type.
3. Batched notifications.
You can now update existing notifications with new data. For example, sending status updates as a document is put in review or given a new assignee.
You can now update existing notifications with new data. For example, sending status updates as a document is put in review or given a new assignee.
November 13, 2025 at 4:47 PM
3. Batched notifications.
You can now update existing notifications with new data. For example, sending status updates as a document is put in review or given a new assignee.
You can now update existing notifications with new data. For example, sending status updates as a document is put in review or given a new assignee.
2. Numerical thread filters
Filter threads by using greater than/less than on metadata values. This is especially helpful for adding comments to large tables, as you can filter the threads by row and column, loading only visible comments.
Filter threads by using greater than/less than on metadata values. This is especially helpful for adding comments to large tables, as you can filter the threads by row and column, loading only visible comments.
November 13, 2025 at 4:47 PM
2. Numerical thread filters
Filter threads by using greater than/less than on metadata values. This is especially helpful for adding comments to large tables, as you can filter the threads by row and column, loading only visible comments.
Filter threads by using greater than/less than on metadata values. This is especially helpful for adding comments to large tables, as you can filter the threads by row and column, loading only visible comments.
1. Group mentions.
You can now create group mentions in comments, for example "@everyone" and "@engineering".
There's two ways to enable it, either by passing a list of user IDs on the front end, or by using new managed groups on the back end.
You can now create group mentions in comments, for example "@everyone" and "@engineering".
There's two ways to enable it, either by passing a list of user IDs on the front end, or by using new managed groups on the back end.
November 13, 2025 at 4:47 PM
1. Group mentions.
You can now create group mentions in comments, for example "@everyone" and "@engineering".
There's two ways to enable it, either by passing a list of user IDs on the front end, or by using new managed groups on the back end.
You can now create group mentions in comments, for example "@everyone" and "@engineering".
There's two ways to enable it, either by passing a list of user IDs on the front end, or by using new managed groups on the back end.
A huge amount of @liveblocks.io updates have been released, including full multi-tenancy!
Partition your app into different workspaces, each with their own documents, inboxes, more. Set a `tenantId` when you create a resource, and it just works.
There's 10 more new features too…
Partition your app into different workspaces, each with their own documents, inboxes, more. Set a `tenantId` when you create a resource, and it just works.
There's 10 more new features too…
November 13, 2025 at 4:47 PM
A huge amount of @liveblocks.io updates have been released, including full multi-tenancy!
Partition your app into different workspaces, each with their own documents, inboxes, more. Set a `tenantId` when you create a resource, and it just works.
There's 10 more new features too…
Partition your app into different workspaces, each with their own documents, inboxes, more. Set a `tenantId` when you create a resource, and it just works.
There's 10 more new features too…
Liveblocks now supports Tiptap 3.0! Check out our upgrade guide to get started.
November 7, 2025 at 3:58 PM
Liveblocks now supports Tiptap 3.0! Check out our upgrade guide to get started.
Modals have descriptions, which explain how to build the feature, and you can scroll down to read them. Each product that's used in the demo is linked as a tag with its icon.
November 3, 2025 at 4:11 PM
Modals have descriptions, which explain how to build the feature, and you can scroll down to read them. Each product that's used in the demo is linked as a tag with its icon.
When you click on a card, @nextjs intercepted routes show a dynamic modal. However, when you refresh or load the page directly, an SEO optimised page is loaded, with its own title, schema, headings, etc.
Essentially, each modal is individually indexed by search engines.
Essentially, each modal is individually indexed by search engines.
November 3, 2025 at 4:11 PM
When you click on a card, @nextjs intercepted routes show a dynamic modal. However, when you refresh or load the page directly, an SEO optimised page is loaded, with its own title, schema, headings, etc.
Essentially, each modal is individually indexed by search engines.
Essentially, each modal is individually indexed by search engines.
Filter by product name or use the search for immediate results.
November 3, 2025 at 4:11 PM
Filter by product name or use the search for immediate results.
Each card displays a screenshot of the first video frame, and hovering over the card plays the video as soon as it's loaded. Mousing over also preloads a higher quality clip that's shown inside the larger pop-up.
They're all demos of @liveblocks.io, mostly built/recorded by me!
They're all demos of @liveblocks.io, mostly built/recorded by me!
November 3, 2025 at 4:11 PM
Each card displays a screenshot of the first video frame, and hovering over the card plays the video as soon as it's loaded. Mousing over also preloads a higher quality clip that's shown inside the larger pop-up.
They're all demos of @liveblocks.io, mostly built/recorded by me!
They're all demos of @liveblocks.io, mostly built/recorded by me!
November 3, 2025 at 4:11 PM
Speed up @liveblocks.io rooms with our new API.
The `prewarmRoom` methods speeds up connecting to a room for the next 10 seconds. Trigger it when a user hovers over a room link and it'll load quicker!
The `prewarmRoom` methods speeds up connecting to a room for the next 10 seconds. Trigger it when a user hovers over a room link and it'll load quicker!
October 3, 2025 at 4:32 PM
Speed up @liveblocks.io rooms with our new API.
The `prewarmRoom` methods speeds up connecting to a room for the next 10 seconds. Trigger it when a user hovers over a room link and it'll load quicker!
The `prewarmRoom` methods speeds up connecting to a room for the next 10 seconds. Trigger it when a user hovers over a room link and it'll load quicker!
Liveblocks uses WebSockets to power our AI instead of HTTP, enabling multi-tab streaming, real-time updates, and more. You can see below how everything keeps streaming in, no matter if you change page, tab, or even reload.
Our team have written up why they chose WebSockets ↓
Our team have written up why they chose WebSockets ↓
September 29, 2025 at 4:18 PM
Liveblocks uses WebSockets to power our AI instead of HTTP, enabling multi-tab streaming, real-time updates, and more. You can see below how everything keeps streaming in, no matter if you change page, tab, or even reload.
Our team have written up why they chose WebSockets ↓
Our team have written up why they chose WebSockets ↓
Spent a couple hours setting up AI that can edit sheets!
This combination feels really powerful when you give your AI other abilities, as demo'ed by this "Fetch weather" tool. Cells stream in one at a time, and are edited as they're completed.
Powered by @liveblocks.io
This combination feels really powerful when you give your AI other abilities, as demo'ed by this "Fetch weather" tool. Cells stream in one at a time, and are edited as they're completed.
Powered by @liveblocks.io
September 26, 2025 at 2:09 PM
Spent a couple hours setting up AI that can edit sheets!
This combination feels really powerful when you give your AI other abilities, as demo'ed by this "Fetch weather" tool. Cells stream in one at a time, and are edited as they're completed.
Powered by @liveblocks.io
This combination feels really powerful when you give your AI other abilities, as demo'ed by this "Fetch weather" tool. Cells stream in one at a time, and are edited as they're completed.
Powered by @liveblocks.io
Here's an unedited video—I'm using GPT-4.1 mini.
Liveblocks provides pre-built AI components for React, and to trigger to the streaming, I've added an `edit-code` tool with <RegisterAiTool />. In here, tell the tool it generates a string called `code` and it knows what to do!
Liveblocks provides pre-built AI components for React, and to trigger to the streaming, I've added an `edit-code` tool with <RegisterAiTool />. In here, tell the tool it generates a string called `code` and it knows what to do!
September 17, 2025 at 3:35 PM
Here's an unedited video—I'm using GPT-4.1 mini.
Liveblocks provides pre-built AI components for React, and to trigger to the streaming, I've added an `edit-code` tool with <RegisterAiTool />. In here, tell the tool it generates a string called `code` and it knows what to do!
Liveblocks provides pre-built AI components for React, and to trigger to the streaming, I've added an `edit-code` tool with <RegisterAiTool />. In here, tell the tool it generates a string called `code` and it knows what to do!
Streaming AI generated code into an editor ✨
To make this work I'm calculating the line/character at the end of each chunk, and adding highlights in the editor. Then I'm merging the stream into the previous code so it doesn't start empty!
Uses
To make this work I'm calculating the line/character at the end of each chunk, and adding highlights in the editor. Then I'm merging the stream into the previous code so it doesn't start empty!
Uses
September 17, 2025 at 3:35 PM
Streaming AI generated code into an editor ✨
To make this work I'm calculating the line/character at the end of each chunk, and adding highlights in the editor. Then I'm merging the stream into the previous code so it doesn't start empty!
Uses
To make this work I'm calculating the line/character at the end of each chunk, and adding highlights in the editor. Then I'm merging the stream into the previous code so it doesn't start empty!
Uses
Picking the right vector database for your AI app isn't an easy task.
@jrowny has written an excellent comparison of 11 major vector databases currently available, based on months on testing.
↓ Read it
@jrowny has written an excellent comparison of 11 major vector databases currently available, based on months on testing.
↓ Read it
September 15, 2025 at 2:26 PM
Picking the right vector database for your AI app isn't an easy task.
@jrowny has written an excellent comparison of 11 major vector databases currently available, based on months on testing.
↓ Read it
@jrowny has written an excellent comparison of 11 major vector databases currently available, based on months on testing.
↓ Read it
This is all you need to set it up, but there's also a bunch of other Node.js functions and REST APIs allowing you to add/remove users, fetch a user's groups, delete groups, and more.
![// Fetch a paginated list of all groups const { data: groups, nextCursor } = await liveblocks.getGroups(); // Get all groups a user is part of const { data: userGroups, nextCursor } = await liveblocks.getUserGroups({ userId: "alice@example.com", }); // Remove a group's members const updatedGroup = await liveblocks.removeGroupMembers({ groupId: "engineering-team", memberIds: ["david@example.com"], });](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:i3yxxcbu3dzxj7dpb2mfriag/bafkreiebty7j3muftalvicdyewwba75t5l23jkixp2sg2zc4ohn3vnmqpe@jpeg)
September 12, 2025 at 3:06 PM
This is all you need to set it up, but there's also a bunch of other Node.js functions and REST APIs allowing you to add/remove users, fetch a user's groups, delete groups, and more.
On the client, you can resolve the `groupId` into a name, avatar, description, which is then rendered inside your app.
September 12, 2025 at 3:06 PM
On the client, you can resolve the `groupId` into a name, avatar, description, which is then rendered inside your app.