Skip to main content

⚡ Add this skill

One command

Add the Autoplay Landbot skill for an existing Landbot AI support agent setup.
View the docs →

Agent onboarding

Fetch this skill when a customer already uses Landbot and wants its AI support agent to consume Autoplay live user activity.
View the skill →
This guide has three parts:
  1. Setup Landbot Workflow — Build the bot flow with a Webhook node and AI Agent.
  2. Setup Backend Server — Run a small FastAPI route that pulls a user’s live activity from Autoplay on demand, the moment Landbot’s webhook fires.
  3. Add support AI agent to Frontend — Embed the Landbot widget in your app.

🤖 Part 1 — Setup Landbot Workflow

Plan requirements: This tutorial uses two features that require a paid Landbot plan:
  • Webhook block — requires the Pro plan (approx. €80–105/month). Not available on the free Sandbox or Starter plans.
  • AI Agent block — requires at minimum the Starter plan (includes 100 AI chats/month).
If you are on the free Sandbox plan, upgrade before building this flow or you will hit a feature lock during testing.
The Landbot flow has five nodes wired together:
Landbot workflow with Starting Point, Ask a Question, Webhook, AI Agent, and End of Conversation nodes
1. Starting Point — This is where the bot wakes up. Every conversation begins here — think of it as the entry door. 2. Ask a Question — The bot presents a question to the user and waits for their input. Whatever the user types is passed along to the next blocks. This is how the bot collects the user’s actual message or query. 3. Webhook — This runs in parallel with the “Ask a Question” block. (Note: ‘https requests’ is the subtitle Landbot automatically assigns to this block type — it is not something you configure.) It makes an HTTP request to your external server — this is where your FastAPI endpoint gets called. That route, in turn, pulls the user’s live activity from the Autoplay connector on demand, at the moment the request comes in — there’s no background process feeding it. The response (your real-time context) gets stored in a variable like @context. The red arrow indicates an error/fallback path in case the request fails. You must connect this output to a fallback block — for example, a message block that says “Sorry, I couldn’t load your activity right now.” If the red output is left unconnected, the flow will break silently when the webhook fails. 4. AI Agent — This is the brain of the bot. It receives both the user’s question (from the Ask a Question block) and the live context fetched by the Webhook block, then generates an intelligent response. You configure its system prompt here to reference @context so it answers based on your real-time data. 5. End of Conversation — Once the AI Agent has responded, the flow terminates here. The conversation is closed and marked as complete in Landbot’s dashboard.

Webhook Node Setup

Webhook URL format:
[@user_id] is a Landbot variable you set earlier in the flow — see Identity below for how to capture it before this block fires.
Timeout limit: Landbot’s webhook block will time out after 60 seconds. If your server is slow to start, the request will fail silently. Make sure your FastAPI server is fully running and your Ngrok tunnel is active before testing the flow.
HTTPS required: Landbot’s webhook block only accepts https:// URLs. Plain http:// URLs will return an error. Always use your Ngrok HTTPS URL (e.g. https://xxxx.ngrok-free.app), never the local http://localhost:5000 address.

🔐 Identity — capture the user’s id

The live-activity read is keyed by product_id and user_id — there’s no session or stream to subscribe to, so every Webhook call must carry a stable user id, not just the shared WEBHOOK_SECRET. Capture it in the flow before the Webhook block fires and store it as a Landbot variable (e.g. @user_id). A few ways to do that, depending on how your bot is deployed:
  • Add an Ask a Question block earlier in the flow that asks for an email or account id, and save the answer as @user_id.
  • If your bot only ever appears behind a login, use an existing Landbot system variable that already carries the logged-in identity (e.g. @customer_id or @email), if your integration sets one.
  • If the widget is embedded in a logged-in app, pass the id in via Landbot’s URL params when you initialize the widget, and reference it the same way in the flow.
Then interpolate that variable into the Webhook URL exactly like Landbot already does for [YOUR_WEBHOOK_SECRET]:
The value you capture in @user_id must exactly equal the id your activity source uses:
How the pieces fit: your app identifies the user in PostHog/Amplitude → Autoplay stores activity under that id → your Landbot flow captures the same id into @user_id → the Webhook block sends it as a query param → your server’s /context route passes it straight through to the live-activity read → the buckets match.
If @user_id is empty or doesn’t match the id your activity source uses, the live-activity read comes back with an empty actions array — @context will read “no recent activity” even for an active user.

Map the Webhook Response to a Variable

After configuring your webhook URL and method, you must explicitly map the API response to a Landbot variable — otherwise @context will be empty when the AI Agent tries to use it. This step is required.
  1. Click Test the request inside the Webhook block to fire a live request to your server. You should see a 200 response with a context field in the response panel on the right.
  2. Click on the context value in the response panel. A tooltip will appear saying “Save this as a Field”.
  3. In the “Save Responses as Fields” section that appears, create a new variable named @context (type: Text).
  4. Confirm the mapping. The @context variable is now populated with the live data from your server each time a user sends a message.
Do not skip this step. Without the field mapping, @context will always be empty and the AI Agent will have no real-time data to work with.

Agent Setup

Agent Instructions
To configure the agent instructions in Landbot:
  1. Select the agent — open the AI Agent node in your flow.
Selecting the AI Agent node in Landbot
  1. Edit the Agent AI Instructions — paste the prompt above into the instructions field.
Editing the AI Agent instructions in Landbot
  1. Review the @context variable — confirm it is injected where @context appears in the prompt.
Reviewing the @context variable injection in the agent prompt
  1. Publish the flow — click the Publish button (top right of the flow builder) to make your changes live. Note that Save only saves a draft — you must click Publish for the bot to update. After publishing, confirm that your bot is assigned to a web channel so the embed snippet will work.
Publishing the Landbot agent — step 1
Publishing the Landbot agent — step 2

🐍 Part 2 — Setup Backend Server

There’s no background process to run anymore — the connector is pull-based. Your server calls the Autoplay live-activity endpoint synchronously, the moment Landbot’s webhook fires, and returns the formatted result straight back in the response.

Prerequisites

Install dependencies:

Project Structure

Setup your secrets in a .env file

  • CONNECTOR_URL — host that serves the live-activity read API, https://mcp.autoplay.ai (the origin of your mcp_url, without the /mcp path)
  • MCP_KEY — Bearer token for the live-activity API, the mcp_key printed by onboard_product in the Quickstart
  • PRODUCT_ID — your Autoplay product id, scopes the read to your product
WEBHOOK_SECRET is your own secret value — it can be any string, e.g. "DKFGEO293KDDA92". Use the same value in the webhook URL query param. It’s unrelated to MCP_KEY — this one only authenticates Landbot’s calls to your server.

Setup the Webhook Server (server.py)

On every incoming Landbot webhook request, this route calls the Autoplay live-activity endpoint for the given user_id and formats the result for the AI Agent’s @context variable — no local file, no cache, no background listener.
user_id comes straight from the [@user_id] query param wired up in Identity above — the route passes it through unchanged to the live-activity read, so whatever Landbot sends is exactly what scopes the lookup.

Run the server and expose it to the internet

Start the webhook server:
Expose it publicly with Ngrok:
Copy the Ngrok HTTPS URL and use it as [YOUR_SERVER_URL] in the Landbot webhook URL.

🌐 Part 3 — Add support AI agent to your Frontend App

In Landbot, click Share on your bot, then click the body button to copy the HTML embed code.
Landbot Share panel showing the HTML embed code copy button
Paste the HTML snippet inside the <body> of your frontend app’s index.html:
The exact snippet — including your real configUrl — is generated by Landbot in the Share panel. Always copy it directly from there rather than using the example above. The loader <script src="...landbot-3.0.0.mjs"> line is required; without it the widget will not initialise.

✨ Final result

After everything is running, you should see your server pulling live activity on each webhook call, and the Landbot support AI agent responding with real-time context.

Server

Terminal showing the FastAPI server responding to Landbot webhook requests

Support AI agent

Landbot support AI agent responding with real-time user context
Final Landbot support AI agent in action with context-aware responses

Next: Step 2 — Define proactive triggers