Scaffold a custom experience with an AI app builder

Build an engaging lead-generation experience for a real-estate company — a polished
React + Tailwind single-page app powered by the Landbot Core SDK (@landbot/core). It
should feel like a product, not a chat widget: a calm two-pane layout with a slim
conversation transcript on the left and a large "canvas" on the right that renders a
purpose-built UI for each step. Warm, trustworthy real-estate aesthetic; generous
whitespace; smooth transitions between steps; fully responsive.

A bot I built in Landbot drives the flow and puts a `[[ui:VALUE]]` marker at the start
of each step's message. Render this widget per value, and make each one feel alive:

  location      → search input for a city or neighbourhood (with a subtle map vibe)
  property-type → large tappable image cards: Apartment, House, Studio
  bedrooms      → a segmented control: Studio, 1, 2, 3+
  budget        → a dual-handle € range slider with live min–max labels
  timeline      → choice chips: ASAP, 1–3 months, Just browsing
  results       → a responsive grid of property cards (photo, price, beds, location)
  contact       → a form: name, email, phone, with light validation
  goodbye       → a warm confirmation that recaps the choices they made

Bot config URL (fetch it for the config): <PASTE YOUR …/index.json URL HERE>
Read first: https://dev.landbot.io/guides/cookbook/conversational-app.md
and https://dev.landbot.io/llms-full.txt
Visual target to match in polish: https://landbot-realtor-demo.netlify.app

Honor these constraints EXACTLY — they are non-obvious and the usual cause of broken
Landbot integrations:
1. Named import only: `import { Core } from "@landbot/core"`. A default import fails.
2. Subscribe to `core.pipelines.$readableSequence` BEFORE calling `core.init()`.
3. The stream carries BOTH bot and user messages — discriminate on `msg.author_type`
   ("bot" | "user" | "agent" | "sys").
4. Dedupe on `msg.key`; the stream can replay a message.
5. There is NO structured customer field on the stream. The per-step signal is the
   `[[ui:VALUE]]` marker at the START of the bot message body — read it with a regex
   and strip it before displaying the text.
6. Render a step's input widget ONLY when the bot is waiting for input:
   `msg.type === "dialog" || msg.type === "multi_question" || msg.extra?.textarea`.
   Every other message is informational — show it in the transcript, the bot keeps going.
7. Send replies with `core.sendMessage({ message })` for text, or
   `core.sendMessage({ type: "button", message, payload })` for a choice
   (payload comes from the matching entry in `msg.payloads`).
8. NEVER eval message content. Ignore `type:"hidden"` messages; a `hidden` message with
   `action:"finish"` means the conversation ended — render the goodbye step.

Each widget collects its answer and calls send(...) to advance the flow. Keep the
transcript and the canvas in sync.

Finally, also output a BOT FLOW SPEC I can build in Landbot so the bot emits exactly the
markers this UI expects. For each step give: the block type (Ask a Question / Buttons /
Multi-Question / Send a Message), the exact message text INCLUDING the `[[ui:VALUE]]`
marker at the start, the field to save the answer to, and any button labels. Use the same
`ui` values and field names as the widgets above — the UI and the bot must agree.

import { useEffect, useRef, useState } from "react";
import { Core } from "@landbot/core";

const CONFIG_URL = "PASTE_YOUR_BOT_CONFIG_URL"; // the …/index.json from Share → Embed

const UI = /^\s*\[\[ui:([^\]]+)\]\]\s*/;
const readUi  = (t) => (("" + (t || "")).match(UI) || [])[1] || null;
const stripUi = (t) => ("" + (t || "")).replace(UI, "");
const isWaiting = (m) => m.type === "dialog" || m.type === "multi_question" || !!m.extra?.textarea;

// Every Landbot-specific rule lives in this hook. The components below are just React.
function useLandbot(configUrl) {
  const [log, setLog] = useState([]);
  const [step, setStep] = useState({ ui: "default", msg: null });
  const core = useRef(null);
  const seen = useRef(new Set());

  useEffect(() => {
    let instance;
    (async () => {
      const config = await fetch(configUrl).then((r) => r.json());
      instance = new Core(config);
      core.current = instance;
      // SUBSCRIBE before init() — the welcome messages fire during init().
      instance.pipelines.$readableSequence.subscribe((m) => {
        if (seen.current.has(m.key)) return;
        seen.current.add(m.key);
        if (m.author_type === "user") return setLog((l) => [...l, { who: "user", text: m.message }]);
        if (m.author_type === "sys") return;
        if (m.type === "hidden") { if (m.action === "finish") setStep({ ui: "finish", msg: null }); return; }
        setLog((l) => [...l, { who: "bot", text: stripUi(m.message) }]);
        if (isWaiting(m)) setStep({ ui: readUi(m.message) || "default", msg: m });
      });
      await instance.init();
    })();
    return () => instance?.destroy?.();
  }, [configUrl]);

  const send = (m) => core.current?.sendMessage(typeof m === "string" ? { message: m } : m);
  return { log, step, send };
}

export default function App() {
  const { log, step, send } = useLandbot(CONFIG_URL);
  return (
    <div className="flex h-screen">
      <aside className="w-1/3 overflow-y-auto p-4 space-y-2">
        {log.map((m, i) => <div key={i} className={m.who === "user" ? "text-right" : ""}>{m.text}</div>)}
      </aside>
      <main className="flex-1 grid place-items-center p-8">
        <Canvas step={step} send={send} />
      </main>
    </div>
  );
}

function Canvas({ step, send }) {
  if (step.ui === "finish") return <p>All done 🎉</p>;
  if (step.ui === "budget") return <BudgetSlider onSubmit={(v) => send(String(v))} />;
  const m = step.msg;
  if (m?.type === "dialog")
    return (
      <div className="flex gap-2">
        {m.buttons.map((b, i) => (
          <button key={i} onClick={() => send({ type: "button", message: b, payload: m.payloads?.[i] ?? `$${i}` })}>{b}</button>
        ))}
      </div>
    );
  return <TextReply onSubmit={send} />;
}

function BudgetSlider({ onSubmit }) {
  const [v, setV] = useState(1500);
  return (
    <div className="grid gap-3 w-72">
      <input type="range" min={500} max={5000} step={100} value={v} onChange={(e) => setV(+e.target.value)} />
      <output>€{v}</output>
      <button onClick={() => onSubmit(v)}>Set budget</button>
    </div>
  );
}

function TextReply({ onSubmit }) {
  const [v, setV] = useState("");
  return (
    <input
      value={v}
      placeholder="Type a reply…"
      onChange={(e) => setV(e.target.value)}
      onKeyDown={(e) => e.key === "Enter" && v.trim() && onSubmit(v.trim())}
    />
  );
}