Liveblocks 1.9: Comments improvements that enable AI agents, chat moderation, thread filtering, and more

With Liveblocks 1.9, we’re updating Comments, introducing a way to programmatically create and modify threads, comments, and reactions. This enables a number of different use cases such as AI agents, moderation, and two-way synchronization with messaging apps. We’re also adding a way to filter threads by metadata.

• Modifying comments programmatically
• AI agents, moderation, and more
• Thread filtering

Upgrade now

Start using the new features now by updating each Liveblocks package in your project to the @latest version.

$npm install @liveblocks/client@latest @liveblocks/react@latest @liveblocks/react-comments@latest liveblocks/node@latest

Note that there’s a small breaking change—all dates returned from Comments are now Date objects instead of strings.

// ❌ Before - "2023-12-15T14:15:22Z"console.log(comment.createdAt);
// ✅ After - Date <Fri Dec 15 2023 14:15:22 GMT+0000 (Greenwich Mean Time)>console.log(comment.createdAt);

Learn more in our upgrade guide.

Modifying comments programmatically

It’s now possible to create and modify comments, threads, and reactions, programmatically using the typed REST API functions in @liveblocks/node. There are seven new functions—here’s a few examples.

// Create a new threadconst thread = await liveblocks.createThread({  roomId: "my-room-id",  data: {    /* ... */  },});
// Edit a thread's metadataconst editedMetadata = await liveblocks.editThreadMetadata({  roomId: "my-room-id",  threadId: "th_d75sF3...",  data: {    /* ... */  },});
// Delete a commentawait liveblocks.deleteComment({  roomId: "my-room-id",  threadId: "th_d75sF3...",  commentId: "cm_agH76a...",});

If you’re not using JavaScript, you can also call our REST API directly to modify comments.

$curl -X DELETE "https://api.liveblocks.io/v2/rooms/my-room-id/threads/th_d75sF3.../comments/cm_agH76a..."

You can find more information in the API reference for each new function.

• createThread
• editThreadMetadata
• createComment
• editComment
• deleteComment
• addCommentReaction
• removeCommentReaction

AI agents, moderation, and more

The ability to programmatically modify comments enables a host of new possibilities, such as AI agents, comment moderation, and two-way chat synchronization.

AI agents

Using webhooks, you can now create an AI agent that responds to comments, such as in our example using GPT4.

This example uses the CommentCreated webhook event in combination with liveblocks.createComment.

Comment moderation

If we take programmatically modifying comments to the next level, we can implement various types of comment moderation, such as banned word filtering, or creating moderator users.

When using Comments React hooks, such as useDeleteComment, you can only delete your own comments. However, because the new APIs runs server side, requiring your secret key, you can use them to delete any user’s comments. Here’s an example of a server action that does exactly this.

// A button that can delete a comment written by any userfunction DeleteButton({ roomId, threadId, commentId }) {  async function deleteComment() {    "use server";    await liveblocks.deleteComment({ roomId, threadId, commentId });  }
  return (    <form action={deleteComment}>      <button type="submit">Delete comment</button>    </form>  );}

This code snippet is using liveblocks.deleteComment.

Two-way messaging synchronization

Another use for our new APIs is bi-directional synchronization, the ability to send and receive updates between Comments and another service. This means it’s now possible to mirror a chat application, and have messages automatically synchronize.

Here’s an example of an endpoint that receives a new thread from a messaging application, then copies it to Comments—the first direction necessary in two-way synchronization.

// Endpoint that receives a new thread from a chat applicationexport async function POST(request: Request) {  const { message, userId, roomId, threadId } = await request.json();  const commentBody = __formatComment__(message);
  // Create the chat thread in Comments  await liveblocks.createThread({    roomId,    data: {      comment: {        userId,        body: commentBody,      },    },  });}

Then in the other direction, you can listen for threads posted to Comments with webhook events, and copy the thread into your messaging app.

// Endpoint that receives `threadCreated` webhook eventsexport async function POST(request: Request) {  // Verify your webhook request and get `event`  // ...
  const { roomId, threadId } = event.data;  const thread = await liveblocks.getThread({ roomId, threadId });  const message = await stringifyCommentBody(thread.comments[0].body);
  // Send new thread to messaging app  await __sendThread__({ roomId, threadId, message });}

This uses the CommentCreated webhook event in combination with liveblocks.createComment.

Thread filtering

In Liveblocks 1.9 useThreads now has a query option, allowing you to filter threads by metadata.

// Fetch threads with `metadata.resolved === true`const threads = useThreads({  query: {    metadata: {      resolved: true,    },  },});

When multiple metadata fields are passed, the logical AND operator is used, returning a list of threads with every property.

// Threads with `metadata.resolved === true` AND `metadata.color === "red"`const threads = useThreads({  query: {    metadata: {      resolved: true,      color: "red",    },  },});

Upgrade guide

Remember there’s a change to the way dates are handled in this update, so make sure to check the upgrade guide to learn more.

// ❌ Before - "2023-12-15T14:15:22Z"console.log(comment.createdAt);
// ✅ After - Date <Fri Dec 15 2023 14:15:22 GMT+0000 (Greenwich Mean Time)>console.log(comment.createdAt);

Get started with Comments

If you’d like to add Comments to your application, make sure to check out our guides and examples.

• Get started with Comments
• Comments examples
• Comments guides

Contributors

Huge thanks to everyone who contributed and specifically to Florent Lefebvre, Nimesh Nayaju, Olivier Foucherot, Guillaume Salles, for all their work on this update. Keep checking out the changelog for the full release notes–see you next time!