Chris Nicholas

This July, adding advanced AI to your app got even easier.

• Submit whole websites to your AI knowledge base
• Polished scroll behavior, improving readability
• AI can use custom markdown components

Learn more ↓

Liveblocks AI Copilots | Enable your users to collaborate with AI directly inside your product Liveblocks gives you the React frontend to embed collaborative AI agents. No AI expertise or backend required.

If you're interested in adding advanced AI chats to your app, book a demo to try our new developer tool. Above you're seeing our pre-built <AiChat /> component!

lblcks.io/HsG5n9p

Because of all this, AI chats should ideally you should scroll the user's message to the top of the window, staying static, and leaving space for the generated text.

You can see we've implemented this in @liveblocks.io AI Copilots, it feels far better than other behaviours.

Additionally, Human ↔ Human is often different to Human ↔ AI.

When you chat to AI, you're often writing a short amount of text, and getting a much longer response—this means you need to make space for a large formatted reply.

AI streams messages in word-by-word, which means that if you pin messages to the bottom, the text moves upwards as it arrives.

Messages have to stick-to-top, otherwise they're too hard to read.

Streaming AI chat messages have introduced a new UX challenge.

In apps like Whatsapp, messages are short and arrive all at once. Pinning messages to the bottom of the chat makes sense—it's expected, and works well for human interactions.

But AI chats are a new paradigm ↓

Calendar The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.

The calendar component is part of Kibo UI, a fantastic set of polished components.

www.kibo-ui.com/components/...

Liveblocks AI Copilots | Enable your users to collaborate with AI directly inside your product Liveblocks gives you the React frontend to embed collaborative AI agents. No AI expertise or backend required.

Book a demo to try AI Copilots.

lblcks.io/HsG5n9p

Human-in-the-loop just means a confirmation dialog in this case. There are some actions that you don't want AI taking autonomously without a check first.

Liveblocks AI Copilots has a built-in component for this, making it extra easy to add.

Book calendar events with natural language!

I've built an AI chat that can book calendar events with front-end tool calling. It can modify events, with a human-in-the-loop confirmation step.

Powered by @haydenbleasel.com's calendar & @liveblocks.io AI Copilots.

Mock up AI chat experiences in @figma.com.

We've updated our Figma kit, adding new AI components, meaning you can quickly design, prototype, and iterate on conversational UIs.

Get it ↓

lblcks.io/P4aJNq4

The @liveblocks.io design kit for Figma now has AI components!

You can now mock up your app with our AI Copilots product inside it—the designs match 1:1 with our React package. Design your product, then put it production with full functionality.

Still working on this, will share the template soon 👌

There's lots more I'd like to add—multiple files, package installations, document switcher, multiplayer editor, live avatars.

Component toolkit for creating live-running code editing experiences | Sandpack Sandpack is a component toolkit for creating live-running code editing experiences powered by CodeSandbox.

3️⃣ Sandpack by @codesandbox.io let's you set up a sandbox environment in the browser. I've set up a React environment here, and when the editor updates, it sends the code to Sandpack's preview window.

sandpack.codesandbox.io/

npm: @monaco-editor/react Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins. Latest version: 4.7.0, last published: 5 months ago. Start using @monaco-editor/react in your project by running `npm i @monaco-editor/react`. There are 1167 other projects in the npm registry using @monaco-editor/react.

2️⃣ The editor is Monaco, built and used by @vscode.dev‬. Import the React component and you have an advanced editor set up already. There's so much customisation you can add, it's excellent.

www.npmjs.com/package/@mo...

Liveblocks AI Copilots | Enable your users to collaborate with AI directly inside your product Liveblocks gives you the React frontend to embed collaborative AI agents. No AI expertise or backend required.

Here's how it works!

1️⃣ The AI is using @liveblocks.io AI Copilots which provides a ready-made React AI chat for your app. I've added a tool that lets the AI generate React/Tailwind code and then updates the editor when it's done.

lblcks.io/HsG5n9p

I've built my own v0 in just a couple hours!

• Monaco for the editor
• Sandpack for the preview
• Liveblocks for the <AiChat />

A wildly productive @nextjs.org stack.

Liveblocks AI Copilots | Enable your users to collaborate with AI directly inside your product Liveblocks gives you the React frontend to embed collaborative AI agents. No AI expertise or backend required.

Book a demo to add AI Copilots to your app.

lblcks.io/HsG5n9p

AI Reports Dashboard | Liveblocks Example How to build a pop-up AI chat inside a dashboard with Liveblocks, Tremor, and Next.js

Check out a live demo!

lblcks.io/pvuCi7R

<RegisterAiTool name="query-transaction" tool={defineAiTool()({ description: `Query the transaction details.`, parameters: { type: "object", properties: { dateFrom: { type: ["string", "null"] }, dateTo: { type: ["string", "null"] }, currency: { type: ["string", "null"] }, continent: { type: ["string", "null"] }, country: { type: ["string", "null"] }, minAmount: { type: ["number", "null"] }, maxAmount: { type: ["number", "null"] }, expenseStatus: { type: ["string", "null"] }, paymentStatus: { type: ["string", "null"] }, limit: { type: ["number", "null"] }, merchant: { type: ["string", "null"] }, }, }, execute: async (args) => { const { transactions } = await fetchTransactions(args); return { data: { transactions }}; }, render: ({ args }) => <AiTool title="Transaction query" />, })} />

In the video above, I'm using a tool added to the AI React components built by @liveblocks.io. The code looks like this, it lets the AI fill in a number of params, passes it to a search function, and returns the result.

The JSON results are saved in the chat, and the AI uses it to respond.

When your AI's permissions are scoped to the user, you don't need to worry about prompt injection leaking other users' data. The AI never has access to more data than it should.

And this is where front-end tool calling wins—users are already authenticated.

In real AI apps, front-end tool calling is often far more practical than back-end.

Let's say a user can search on the front-end. If you pass the same search function to a tool call, it'll have the same authenticated access.

It's easier to add to existing apps & already secure.

What's new in Liveblocks → June 2025

• Integrate ready-made AI chats into your React app with AI Copilots.
• Add contextual knowledge to your AI from front-end & back-end.
• Define tools, enabling AI to take actions & render custom UI.

lblcks.io/pv4dX5L

Liveblocks AI Copilots | Enable your users to collaborate with AI directly inside your product Liveblocks gives you the React frontend to embed collaborative AI agents. No AI expertise or backend required.

While we're here, if you're looking at add advanced AI chats to your product, check out Liveblocks AI Copilots.

liveblocks.io/ai-copilots

I love Cursor as an editor, but right now, Devin feels like the right choice for an AI Slack helper.

Before I started using these tools, I imagined they were pretty similar.

In reality, they're quite different—Cursor Background Agents are like the simple chats you use inside Cursor's editor, whereas Devin is much more like a real junior engineer, handling tasks end-to-end.

When it comes to speed and cost, it varies depending on the task.

With small tasks I've found, they're both around the same speed at creating a PR, though Devin can run additional tests after.

For the tasks I tried, Devin was over twice as expensive, but it does a lot more.

Devin writes detailed PRs with lots of info, a review checklist for humans, screenshots, very nice.

Cursor just links to the Slack thread below the default PR message. If you triggered the AI from a private chat or DM, no one else gets any context—room for improvement here!

Here's the messages each sends in Slack.

Devin is fairly verbose, sending messages and confidence scores as it goes. It's good to know, but all the notifications take me out of flow state.

I prefer Cursor's fire-and-forget approach, only messaging you on completion.