Chat SDK Liveblocks Bot

Build a bot that you can engage with inside Liveblocks.

Chat SDK + Liveblocks adapter bot

This example shows how to build a bot on Liveblocks comment threads using the Chat SDK: @liveblocks/chat-sdk-adapter is Liveblocks’ platform adapter for the Chat SDK, and @chat-adapter/state-memory provides the Chat SDK state adapter. The UI runs on Liveblocks and Next.js.

When someone @-mentions the bot in a thread, it replies in the thread; adding a reaction to a message triggers a short reply as well.

Getting started

Run the following command to try this example locally:

npx create-liveblocks-app@latest --example liveblocks-chat-sdk-bot --api-key

This will download the example and ask permission to open your browser, enabling you to automatically get your API key from your liveblocks.io account.

Setting up webhooks

The Liveblocks adapter (@liveblocks/chat-sdk-adapter) needs Liveblocks webhooks to receive new comments and reactions.

Follow our guide on testing webhooks locally. When creating the webhook endpoint, enable the commentCreated, commentReactionAdded, and commentReactionRemoved events (see webhook events)
Copy your webhook secret (whsec_…) from the webhooks dashboard
Add it to .env.local as the LIVEBLOCKS_WEBHOOK_SECRET environment variable

Manual setup

Alternatively, you can set up your project manually:

Install all dependencies with npm install
Create an account on liveblocks.io
Copy your secret key from the dashboard
Create an .env.local file and add your secret key as the LIVEBLOCKS_SECRET_KEY environment variable
Run npm run dev and go to http://localhost:3000
Follow the “Setting up webhooks” section above

Deploy on Vercel

To both deploy on Vercel, and run the example locally, use the following command:

npx create-liveblocks-app@latest --example liveblocks-chat-sdk-bot --vercel

This will download the example and ask permission to open your browser, enabling you to deploy to Vercel.

Next, follow the “Setting up webhooks” section above (use your production webhook URL).

Develop on CodeSandbox

After forking this example on CodeSandbox, add the LIVEBLOCKS_SECRET_KEY and LIVEBLOCKS_WEBHOOK_SECRET environment variables as secrets.

Webhook delivery to a sandbox URL may require a tunnel (see testing webhooks locally).

GitHub Repoliveblocks/liveblocks

LicenseView License

Use Cases

Realtime Apps

Multi-Tenant Apps

Stack

Next.js

Related Templates

Chat SDK Community Agent

Open source AI-powered Slack community management bot with a built-in Next.js admin panel. Uses Chat SDK, AI SDK, and Vercel Workflow.

Chat SDK Knowledge Agent

Open source file-system and knowledge based agent template. Build AI agents that stay up to date with your knowledge base.