diff --git a/demo/agent-dock.tsx b/demo/agent-dock.tsx
new file mode 100644
index 0000000..85d2d58
--- /dev/null
+++ b/demo/agent-dock.tsx
@@ -0,0 +1,38 @@
+// Demo: the assistant dock driven by a mock transport. No network — the
+// mock returns a canned reply with a rich table block so the card/table/
+// tile/chart rendering (via @crema/agent-ui) is visible. Also the design-
+// review surface for the dock.
+
+import { AgentDock, type AgentDockTransport } from "../src"
+
+const mockTransport: AgentDockTransport = {
+  async chat(_agentId, req) {
+    await new Promise((r) => setTimeout(r, 700))
+    return {
+      conversation_id: "demo-conversation",
+      message:
+        `You asked: **${req.user_message}**\n\n` +
+        "Here's a rich block rendered inline:\n\n" +
+        '```table { "id": "cities", "columns": [{"key":"city","label":"City"},{"key":"time","label":"Local time"}], "rows": [{"city":"Sydney","time":"09:00"},{"city":"London","time":"23:00"}] }\n```\n\n' +
+        "Buttons inside cards/tiles send their value as your next message.",
+    }
+  },
+}
+
+export default function AgentDockDemo() {
+  return (
+    <div className="p-8">
+      <h1 className="text-xl font-semibold">Assistant Dock</h1>
+      <p className="mt-2 text-sm text-[var(--muted-foreground)]">
+        The Sparkles button is fixed bottom-right. Open it and send a
+        message — the mock transport replies with a rich table block.
+      </p>
+      <AgentDock
+        transport={mockTransport}
+        resolveAgents={async () => [{ id: "demo", name: "Demo Assistant" }]}
+        getPageContext={() => ({ route: "/demo/agent-dock" })}
+        onExpand={() => alert("onExpand — the host app decides what this does")}
+      />
+    </div>
+  )
+}