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:

1
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:

1
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).