Cookbook

Cookbook overview

Complete, runnable recipes for building on Landbot — custom chat UIs, AI-agent apps, channel bridges, and AI-assisted scaffolding. Each one is self-contained and lab-verified.

The cookbook is a set of complete, runnable recipes — not snippets. Each one is self-contained (build it end to end from the page), grounded in behaviour verified against a live bot, and copy-paste friendly. Pick the one that matches what you're building.

Custom front-ends with the Core SDK

Run a Landbot bot headless in the browser and render the conversation in your own UI — from a plain chat to a full application. Start at the top and work down; each builds on the last.

  • Build a custom chat UI — The foundation: load @landbot/core, subscribe, render messages, send replies. No widget, no build step.

  • Build a conversational app — A deterministic flow where the bot signals a custom widget per step via a [[ui:…]] marker — slider, card grid, form.

  • Build an AI-agent app — The prompt is the program: a single AI Agent drives the UI, emitting [[ui:{json}]] widgets your front-end renders.

  • Scaffold with an AI app builder — Hand Lovable / v0 / Bolt a brief + a constraints contract and have it generate a working Landbot front-end.

Integrations

Connect Landbot to surfaces it doesn't natively support, from your own backend.

  • Bridge a channel to Landbot — Relay a Landbot bot onto any channel — Telegram as the worked example — via the APIchat API and a small server.

Shared building blocks

A few patterns recur across the front-end recipes — learn them once:

  • The [[ui:…]] dispatch marker. The bot embeds a marker in a message; your front-end parses it and renders the matching widget. A bare value names a step (conversational app); a JSON object carries a full widget payload (AI-agent app).
  • Fields via custom_data. core.sendMessage({ message, custom_data: { … } }) writes straight to Landbot Fields from the client — real lead capture with no Question blocks.
  • The widget schema is your contract. Landbot doesn't define widget shapes; the prompt and the renderer share a schema you own. Keep them in lockstep.

New to the SDK these build on? Start with the Core SDK overview.

Next
Build a custom chat UI with @landbot/core