Analyze Liveblocks comment attachments with Anthropic Claude AI

Analyzing uploaded Liveblocks comments attachments with AI

This example uses Liveblocks Comments, collaborative commenting components for React. When an AI assistant is mentioned in a thread (e.g. "@AI Assistant"), it will automatically leave a response. Additionally, it will analyze any PDf or image attachments in the comments, and use them to help it respond.

Using webhooks, this workflow is triggered when a comment is created in a thread. If the agent's ID ("__AI_AGENT") it will create a response. If a PDF or image file is uploaded, these will be analyzed by Anthropic and used as context. This response is then added, and users will see it appear in their apps in real time.

Set up

This workflow requires a Comments app installed and webhooks set up in the Liveblocks dashboard. You can try it with a demo application:

1. Download the Next.js comments example, and run it with a secret key.
2. Find database.ts inside the example and uncomment the AI assistant user.
3. Insert the secret key from the project into n8n nodes: "Get a comment", "Get a thread", "Create a comment".
4. Go to the Liveblocks dashboard, open your project and go to "Webhooks". Create a new webhook in your project using a placeholder URL, and selecting "commentCreated" events.
5. Copy your webhook secret from this page and paste it into the "Liveblocks Trigger" node.
6. Expose the webhook URL from the trigger, for example with localtunnel or ngrok. Copy the production URL from the "Liveblocks Trigger" and replace localhost:5678 with the new URL.
7. Your workflow is now set up! Tag @AI Assistant in the application and add attachments to trigger it.

Localtunnel

The easiest way to expose your webhook URL:

npx localtunnel --port 5678 --subdomain your-name-here

This creates a URL like:

https://honest-months-fix.loca.lt

The URL you need for the dashboard looks like this:

https://honest-months-fix.loca.lt/webhook/9cc66974-aaaf-4720-b557-1267105ca78b/webhook