We’ve released an exciting new way to add advanced AI features to your product.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
This June we’ve released a new way to add advanced AI chats to your product.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.24 or below, make sure to follow our upgrade guides before updating.
Book a demo with our team to start building with AI Copilots.
It’s easier than ever to deeply integrate advanced AI into your app with Liveblocks AI Copilots. Start with our pre-built chat components for React, and add knowledge, tools, and custom components.
Our AI Dashboard Reports example highlights many different features.
Our ready-made AiChat
component is all you need to get started. Each chat has a unique ID which you
must set.
Chats are powered by our WebSocket collaboration layer, and update in real-time, even with multiple browser tabs open. If you close the page, the chat will keep streaming in, and you can re-open it to continue the conversation.
Each chat in your app is tied to an authenticated user, and each user can have multiple chats, and their chats are stored permanently. Replies can stream into multiple chats at once, and switching between chats will never cause interruptions.
It’s straightforward to create an interface that lets you switch between chats
with useAiChats.
Additionally you can create and delete new chats with
useCreateAiChat and
useDeleteAiChat.
Knowledge is a way to pass information to your AI, so that it can understand context and provide intelligent answers. There’s two ways to add it, on the front-end and on the back-end.
Front-end knowledge is ideal for passing relatively small amounts of data that’s
relevant to the current user or page. For example, you could pass the user’s
payment plan, the user’s information, or the current document’s text. Here’s how
to add it with
RegisterAiKnowledge.
The AI will have access to this information when it’s generating a response. For example, if you ask “Which plan am I on?” it’ll reply with “You're on the Enterprise plan”.
Back-end knowledge is ideal for passing large amounts of data, for example documentation and manuals. The AI will be able to read your knowledge base, and accurately answer questions using your information. You can import PDF files, images, and web pages, when managing your copilot from the dashboard.
By default, Liveblocks has an AI model set up, but you can also choose to create a copilot with your chosen AI model from the Liveblocks dashboard. You can define AI prompts, back-end knowledge sources (e.g. PDFs, websites), and a number of different settings for your copilot.
OpenAI, Anthropic, and Gemini models are supported. Copy the copilotId from
the dashboard to use it with your chat.
Tools allow you to add complex interactions into your AI chat, for example
allowing AI to autonomously take actions, interact with your front-end, and
render custom components. Tools are implemented with
RegisterAiTool.
Above is an example of a human-in-the-loop action that allows AI to invite members to a project. When confirm is clicked, a member is added to the page and a toast is triggered.
By defining a tool with an execute function, AI can call a function in your
front-end, when it think it’s relevant. A simple example is a tool that shows
toast notification on the screen. Whenever you say “Show me a toast”, AI will
call the execute function, and render it.
You can take this a step further by adding parameters to the tool, in this case
a message, allowing the AI to decide what to write in the toast. You can show
UI in the chat, letting the user know a toast was sent, using render.
The AiTool component renders
pre-built UI that matches the chat.
You can create human-in-the-loop actions, where the AI asks the user to confirm
an action, before it’s executed. This is useful for actions that are destructive
or irreversible, for example deleting a file. To implement this, don’t define
execute, and instead use
AiTool.Confirmation
inside render.
The example above will show a confirm/cancel box in the chat, and the confirm
function will be triggered when the user clicks the button.
You can render fully custom components inside the chat, for example, below I’m adding a button that creates a new project. Whenever AI hears “Create project”, it’ll render the button below its message.
You also can create custom confirm/dialog boxes using render.
We’ve created a number of examples to help you get started with AI Copilots.
Our AI Dashboard Reports example contains an AI pop-up chat that allows you to ask questions about the transactions and invoices represented on the page. Additionally, it can navigate you to different pages, invite new users, send unpaid invoice reminders, and share how many seats are left on your plan.
Our AI Chats example demonstrates how to create a chat switcher and listing page.
Our AI Popup Chat example demonstrates how to create a floating pop-up chat in the corner of your application. It has a panel for switching between different chats, and a button to open a new chat.
Here’s a list of other improvements in our changelog since our last update:
UPDATE_USER_NOTIFICATION_SETTINGS_ERROR to
UPDATE_NOTIFICATION_SETTINGS_ERROR when using useNotificationSettings or
useUpdateNotificationSettings.onMentionClick prop on Thread and Comment now receives a
MentionData object instead of a userId string.Mention component on the Comment.Body and Composer.Editor primitives
now receives a mention prop instead of a userId one.MentionSuggestions component on the Composer.Editor primitive now
receives a mentions prop instead of a userIds one, and the
selectedUserId prop has been renamed to selectedMentionId.LiveblocksUIConfig to LiveblocksUiConfig for consistency with other
Liveblocks APIs.htmlBody/reactBody properties from
prepareThreadNotificationEmailAsHtml /
prepareThreadNotificationEmailAsReact, use body instead.htmlContent/reactContent properties from
prepareTextMentionNotificationEmailAsHtml /
prepareTextMentionNotificationEmailAsReact, use content instead.prepareTextMentionNotificationEmailAsReact and
prepareTextMentionNotificationEmailAsHtml functions’ returned data changed
slightly:
id property is now named textMentionId, it refers to the mention’s
Text Mention ID, not the user ID used for the mentionid property now refers to the mention’s ID, as in the user ID used for
the mentionelement prop received by the Mention component in
prepareTextMentionNotificationEmailAsReact now contains an id property
instead of userId, and a new kind property to indicate the mention’s kind.getMentionedIdsFromCommentBody utility has been replaced by
getMentionsFromCommentBody.InboxNotification.Inspector component to help debugging custom inbox
notifications.z-index of collaboration cursors, and make them inherit their
font family instead of always using Arial.lb-lexical-cursors class to the collaboration cursors’ container.LiveObject.detectLargeObjects, which can be
enabled globally using LiveObject.detectLargeObjects = true (default is
false). With this setting enabled, calls to LiveObject.set() or
LiveObject.update() will throw as soon as you add a value that would make
the total size of the LiveObject exceed the platform limit of 128 kB. The
benefit is that you get an early error instead of a silent failure, but the
downside is that this adds significant runtime overhead if your application
makes many LiveObject mutations.render
methods defined with defineAiTool(). Previously, these errors would only be
shown during development.Find the complete information in our changelog.
To use these latest features, update your packages with:
Contributors include:
11 authors