AI Copilots - Features

Liveblocks AI Copilots provides customizable UI components that let your users interact with AI in a way that feels native to your product. Unlike basic chat widgets, Copilots are context-aware, collaborative, and capable of performing real tasks—such as editing content, navigating your app, or answering product-specific questions. They’re built for React developers, work with your chosen LLM, and integrate directly into your existing UI using flexible APIs and fully themeable components.

Features

• Persistent chats: No database is required, each user’s chats are stored permanently.
• Tools: Easily allow AI to interact with your application and modify its state.
• Knowledge: Feed text and files into the AI so it understands the current context.
• Ready-made UI: Polished, easily customizable React components to add to your app.
• Custom chat components: Register React components that the AI can choose to render in-chat.
• Text editor toolbar: AI suggestions toolbar for your collaborative Tiptap text editor.
• Manage AI copilots: Configure AI providers and system prompts from our dashboard.
• Supported AI providers: Anthropic, OpenAI, Google Gemini, and more.
• Coming soon: One-off prompts, attachments, MCP servers.

Persistent chats

When building a chat interface, it’s important to save the chat history so that the user can continue the conversation from where they left off. All chats and messages are stored automatically by Liveblocks, and each user has their own set of chats. No database is required, and messages are streamed into the chat in realtime using WebSockets.

Each page of your application can have multiple different chats, and it’s easy to switch between them, much like in ChatGPT. Each chat has a unique name, and can be given custom metadata, for example a custom title, description, tags, or anything you like.

Automatic synchronization

When the page refreshes, each user’s previous chats will load for them, and can be continued. If a user has your app open in multiple browser tabs, each tab will correctly display chats, and update in real-time.

Tools

Tools are a way to allow AI to make actions, modify your application state, interact with your front end, or render custom content with your own components. You can use them to extend the capabilities of AI Copilots beyond simple text-based interactions. For example, you may have tools that create new documents in your app, automatically fill in form data, search the web for data, or anything else you like.

Tools are defined in your code, and are executed and/or rendered when the AI requests to use them.

Tools work with our other products

Through tools, you can integrate AI Copilots into our other products, such as Comments, Notifications, and Sync Datastore. For example, you can allow AI to add comments to your application, send notifications to other users, or add shapes to a collaborative drawing app.

Knowledge

It’s simple to add context to your AI, so that is understands the current document or page. You can also submit webpages and files, such as documentation, that the copilot will deeply internalize, allowing it to reply intelligently.

Ready-made UI

Liveblocks AI Copilots includes a set of styled UI components that can be used to add an AI chat interface to your application. Messages are streamed in realtime.

We also provide a number of hooks, such as useChats and useMessages, that allow you to create your own custom chat components.

Custom chat components

Inside your chat, you can register custom React components that the AI can choose to render as a response. For example, if your app contains charts, AI can choose to render a custom chart component instead of a message. If you have multiple components, AI can choose which one to render.

These components can be fully interactive, for example this chart component could have a button that lets you save it, and add it to a project.

Text editor toolbar

Using our Text Editor integration for Tiptap, we provide an AI toolbar that can be added to your collaborative text editor. This toolbar allows you to select text, and ask AI to make changes for you, for example fixing typos, and creating new paragraphs.

Learn more about this React component under AiToolbar

Manage AI copilots

The Liveblocks dashboard allows you to create, configure, and manage your AI copilots, each of which can be used in different parts of your application. You can select your AI provider (e.g. OpenAI, Anthropic), specify a system prompt, and pass in your secret key to get it working.

You can also fine-tune how each copilot interacts with users by adjusting each model’s settings, which are passed through directly to the AI provider. These can influence its creativity, consistency, and the safety of generated content. Each copilot can be configured independently, and tested live in the dashboard.

Supported AI providers

In our dashboard, you can create, configure, and manage copilots powered by different AI providers, each with different settings. The following providers are supported out-of-the-box:

• Anthropic
• OpenAI
• Other OpenAI-compatible APIs
• Google Gemini

Reasoning models

Reasoning models are supported by our built-in components, allowing models to show their thought processes.

---

Coming soon

One-off prompts

One-off prompts are a way to add assorted AI features to your app, specifically features that don’t require a chat, such as an AI button on a page. Tools and context are supported, allowing AI to interact with your application, and understand its state. An example use case for a one-off prompt is a button that uses AI to fill in a form.

Chat attachments

Upload files into the chat, which AI can modify, or use for extra context. These files can be images, PDFs, text documents, or any file type your AI provider can understand. Files are automatically stored by Liveblocks.

MCP server integration

MCP is a protocol for running AI agents on a server, allowing you to make various back ends calls to different services. In future, AI Copilots will support this.

Additional providers

We will be investigating additional providers, such as LangGraph, Crew AI, Bedrock, and Vertex AI. If there is a specific provider you’d like us to support, please book a demo with our team and let us know more information in the text box.