We've released features across the board recently, including Tiptap 3.0 support, multi-tenancy, group mentions, numerical thread filters, AI chat web search, AI chat status hook, new AI Copilots examples & docs, and Liveblocks AI assistant.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
This September & October, we’ve added a number of features across the board:
@everyone.To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 3.9 or below, make sure to follow our upgrade guides before updating.
Liveblocks now fully supports multi-tenancy with the new Organizations feature, making it easier than ever to build collaborative apps that serve multiple organizations, all within a single project.
A common pattern in SaaS apps is to have an organization switcher in the corner of the app, allowing users to switch between different organizations, or organizations.
Liveblocks now supports this out of the box, with rooms and notifications being scoped to a specific organization. For example, if a user is part of multiple organizations, each organization will have its own inbox, and the user will only receive notifications created by users in the current organization.
To set up Organizations, assign a specific organization ID as you create a room on the server.
When authenticating a user, assign the same organization ID, and they will only be able to access rooms and activity assigned to that organization.
Rooms, comments, storage, mentions, notifications, and virtually all Liveblocks features can be scoped. Learn more in our documentation under organizations.
You can now use Tiptap 3.0 on Liveblocks, allowing you to take advantage of features such as better static rendering, JSX rendering, improved TypeScript support, and more. With this change, Liveblocks now supports the latest versions of BlockNote too.
Each of our Tiptap examples has been updated to use Tiptap 3.0, as well as our Next.js Starter Kit, which allows you to install and test a full collaborative application.
To update your existing application to Tiptap 3.0, follow the instructions in our Liveblocks 3.10 upgrade guide. Future versions of Liveblocks will require Tiptap 3.0.
We’ve added support for group mentions in threads, inbox notifications, and text
editors, meaning you can now tag entire groups of users at once, for example
@everyone or @engineering.
You can set up group mentions in two different ways, either by providing a list
of user IDs on the client, most helpful for tags such as @everyone, or by
creating managed, permanent groups on the server, helpful for creating specific
teams of users, such as @engineering.
Related to the second method, there are a number of new methods allowing you to modify and manage your groups. Learn more about both methods of creating groups under group mentions in our documentation.
When you create a new Comments thread, you can attach custom
metadata properties to it. You can now filter for comments with numeric metadata
values greater or less than a specific value. In this example, you can see how
gt represents “greater than”.
You can combine operators to create ranges, which is particularly powerful in combination with tables. For example, if your app is a spreadsheet, you can filter for threads that are on screen for the user, around their current row and column.
This filter supports 4 operators in total: gt - “greater than”, lt - “less
than”, gte - “greater than or equal to”, lte - “less than or equal to”.
Learn more in our documentation under
useThreads.
Notifications can now be batched, meaning you update existing notifications, replacing their content, or adding new content to them. This is particularly useful for changing statuses in notifications, or adding timelines of events, such as in the video below.
Updating a timeline within a notification—Custom Notifications example.
To set up batching, you need to set your custom notification kind as a batched kind in the dashboard.
Learn more in our documentation under notification batching.
When using Notifications, you can easily display an unread notification count for the current user, typically displayed in a small badge. Previously, this count would sum every unread notification the user had, but you can now filter the count by room ID.
You can also filter the count by notification kind, if you’d only like to count a specific type of notification, such as thread notifications.
Custom notification kinds
work with this filter too. Learn more in our documentation under
useUnreadInboxNotificationsCount.
AI Copilots now has web search, allowing you to ask your AI to search the web for information. After querying, the search term and a list of sources are displayed.
To enable this feature, toggle the “Web search” setting for your AI copilot in the dashboard, or set it from our back-end APIs, learn more. Most OpenAI and Anthropic models support web search.
You can now create status indicators and loading spinners in your UI based on
the status of an AI chat. The new
useAiChatStatus hook
for AI Copilots allows you to render different components based
on whether an AI chat is idle, generating, or loading.
You can also use the hook to check which
AI tool is currently running.
Learn more in our documentation under
useAiChatStatus.
We’ve added two new AI Copilots examples to our collection, exhibiting different ways to use advanced Liveblocks AI features in your app, along with greatly expanded documentation, detailing how to build them.
The first example is our AI app builder, which uses AI tool calls to generate websites, in particular React code. After the code’s generated, a live preview updates with the AI-generated website.
The code is streamed as it’s generated into a Monaco code editor, displaying AI presence as it arrives.
The code, and a live demo, can be found in our examples gallery: AI app builder.
The second example is our AI calendar, which uses AI actions to generate an event, and then add it. Every event is fed into the AI as front-end knowledge, allowing the AI to understand the current state of the calendar, and make context-aware decisions.
The code, and a live demo, can be found in our examples gallery: AI calendar.
We’ve added a wealth of new information to our AI Copilots documentation, including pages and code snippets detailing every way to use our product.
Let us know if you have any feedback on the new documentation, or if there's anything else you’d like to see added.
We’ve added a multi-purpose AI assistant to our docs and dashboard, built with AI Copilots, allowing you to ask questions, create projects, navigate to pages, view your usage, contact support, and much more.
You can interact with the assistant outside the chat too, for example via buttons or inputs. Every page and code snippet in our docs has Ask AI buttons if you get stuck, and we also provide ways to upgrade more easily, by letting AI write install commands for you.
The Liveblocks AiChat
component renders our default chat components, with hooks such as
useAiChats and
useSendAiMessage used
to embed additional functionality.
In total, the assistant has 17 different tools at its disposal, giving it the power to navigate the website, fetch plan information, create projects, and more. Its copilot has a long, detailed prompt for the assistant, filled with example responses, which directs when each tool should be used.
It also understands all the information on our website using back-end knowledge, which allows you to crawl and ingest the contents of a website. Data about the current user, page, and team is passed as contextual front-end knowledge.
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. We’ve included lots of new hints and tooltips throughout.
One page we’ve taken particular care to improve is the notifications page. To send Liveblocks notifications outside of your app (e.g. via email, Slack) you need to use this page to set up each notification channel and webhook. When you set up a channel, a message is now displayed, letting you know whether a webhook is configured, offering a shortcut if none has been.
There’s also a new Edit mode and side panel UI for editing your current notification channels, making it clearer how everything links together. Modify your settings for the current channel, then publish your changes to complete the process.
User experience is important to us at Liveblocks and we’ll continue making improvements in this area.
<AiChat /> component.showSources, showRetrievals and showReasoning props to <AiChat />
component to determine how sources, retrievals and reasoning are displayed
respectively.subscribed on the useThreads hook.useUrlMetadata hook to get metadata for a given URL.disconnected status in useAiChatStatus to indicate when AI service
is not available.subscribed on the room.getThreads method.createAiCopilot and updateAiCopilot to include web search in
provider options for OpenAI and Anthropic.create-liveblocks-app integration.chatId prop to RegisterAiKnowledge to scope knowledge to a specific
chat, similar to RegisterAiTool. This is the same as using the knowledge
prop on AiChat.useAiChat() didn't re-render correctly when chat title gets
updated.organizationId was not being passed to the request when
using Liveblocks.createRoom().comments:write to the list of possible room permissions.LiveMap and LiveObject deletions now report which item got deleted in the
update notifications. LiveList already did this.gt, lt, gte, and lte in room.getThreads
metadata query filters.useAiChatStatus
that offers a convenient way to get the current generation status for an AI
chat, indicating whether the chat is idle, currently generating contents, and,
if so, what type of content is currently generating.useUnreadInboxNotificationsCount wasn't returning the
proper count if there were more than a page of unread notifications.gt, lt, gte, and lte in useThreads
metadata query filters.responseTimeout property to AiChat to allow customization of the
default 30 seconds timeout.title prop on AiTool now accepts ReactNode, not just strings.AiChat would not always scroll in the same way when sending
new messages.Liveblocks.prewarmRoom(roomId, options). This method can
prewarm a room from your back-end, preparing it for connectivity and making
the eventual connection from the frontend faster.roomId and kind on the
useUnreadInboxNotificationsCount hook.roomId and kind on the getInboxNotifications method.roomId and kind on the useInboxNotifications hook.budgetToken to budgetTokens in AnthropicProviderOptions.AiChat when they are 3
seconds or longer.AiTool titles selectable.AiChat now displays how long it took.AiChat now shows when a copilot is searching its knowledge defined on the
dashboard, as a "Searching 'What is RAG?'…" indicator. It also displays how
long it took.Duration primitive to display formatted durations, similar to the
existing Timestamp primitive.useGroupInfo hook to use resolveGroupsInfo in React, same as
useUser for resolveUsers.Thread, Composer, InboxNotification, etc).createGroup,
getUserGroups).tenantId parameters to methods that need it when using tenants.getThreadParticipants as deprecated, use thread subscriptions or
getMentionsFromCommentBody instead.stringifyCommentBody, it now accepts a
resolveGroupsInfo option that passes the results to mentions as group.resolveGroupsInfo option that passes the results to mentions as
group.resolveGroupsInfo resolver to provide information about groups (e.g.
name, avatar, etc) similar to resolveUsers.resolveMentionSuggestions.To use these latest features, update your packages with:
Contributors include:
8 authors