Learn how to build AI chat agents with two kinds of memory: one that follows a user across devices, and one shared by everyone in a channel.
Hot Chat is a web chat demo you can clone and start in about 15 minutes, with two AI agents side by side: a Personal Mode agent whose memory is keyed to the user, and a Team Mode agent whose memory is keyed to the channel.
The UI is a Next.js + TypeScript app that talks to Hot through @hot-dev/sdk. The agent layer is built on
hot.dev/hot-ai-agent
open source under Apache 2.0, so everything you see in this post runs on code you can read.
Try It #
Before running the demo, install Hot if you don't already have the hot
CLI.
git clone https://github.com/hot-dev/hot-demos
cd hot-demos/hot-chat
hot dev --open # terminal 1: both agents
cp .env.example .env # terminal 2: the UI
npm install && npm run dev
Open http://localhost:3000. The toolbar switches between the two agents live, no restart needed.
Set ANTHROPIC_API_KEY
in .env
to get the real, streamed, memory-grounded replies the demo is built around. Without it the UI still loads, but assistant replies fall back to a stub that just says the LLM is disabled. The harness sits on hot-ai, so you can wire a different provider in your own app.
The full walkthrough is at hot.dev/docs/demos/hot-chat.
Two Agents, One Project #
Hot Chat ships two agents in one Hot project. They look nearly identical on the surface: same chat UI, same slash commands, same streaming replies.
The difference is how each one scopes memory.
Personal Mode is identity-first. Whatever you tell the agent follows you across sessions, tabs, and devices. Type /remember I prefer launch updates that start with blockers
, close the tab, come back tomorrow on a different device, ask /recall
, and the same notes are still there.
This is the pattern for assistants, journaling apps, per-user copilots, and anything where memory belongs to the person rather than the conversation.
Team Mode is session-first. Memory is keyed to the channel, so two people chatting in the same room share one view, and two channels stay independent. Type "we decided to ship docs before launch", then "CI is the only blocker", then /ask what is blocking launch?
, and the reply cites the matching records with attribution.
This is the pattern for team chat bots, support inboxes, and shared workspaces.
| Concept | Team Mode | Personal Mode |
|---|---|---|
| Session | the channel or thread | a scratch context per person |
| Identity | the person who posted | the durable memory owner |
| Memory | scoped to the session | scoped to the user |
Hot Chat, mid-conversation. The toolbar switches between Personal and Team mode live.
Inside the UI #
The Hot Chat UI is intentionally generic. It looks like a chat product, not a framework demo. That's because the experience is the point:
Quick-prompt chips help you explore each mode without learning a syntax first. TryRecall preferences,Daily brief,Decisions, orAsk the team. -
Streaming replies render as the agent generates them. Slash-command replies stream too, identically to LLM responses, so the UI doesn't have to know which path produced the message. -
File attachments let you drag in a smallnotes.md
file or screenshot. The agent stores the file name and type as metadata and could be extended to parse contents. -
Identity controls show the exactsession_id
anduser_id
the agent receives, in the same format a Slack or Telegram adapter would generate. - Agent Graph in the Hot Dev App shows each slash command as its own typed event handler, so you can see the agent structure without digging through a central dispatch function.
One event handler per command, no central dispatch.
What hot-ai-agent #
Brings
If you've built an AI chat agent before, you've probably written some version of this stack:
- a slash-command parser
- a way to thread LLM calls through retrieval-augmented memory
- a streaming reply mechanism
- per-agent stores for state and stats
- per-request session and identity bindings so tools know who's talking
Most chat agents end up reinventing these pieces.
hot-ai-agent
extracts that layer. Concretely, it gives you:
Typed transport messages: a singleIncomingMessage
shape that adapters for web, Slack, Telegram, or anything else can translate into. The agent never branches on transport. -
Slash-command parsing:/ask@MyBot what's up?
becomes{name: "ask", arg: "what's up?"}
, with the Telegram-style@MyBot
suffix stripped. -
The memory-grounded chat turn: the canonicalrecall -> persist user -> bind request -> stream -> persist assistant
lifecycle in one function call. The order matters; getting it wrong can cause the user's fresh message to contaminate their own retrieval. -
Stable streaming events: every agent emits<agent>:reply:start
,:delta
, and:end
events at a stable, agent-scoped label. - Per-request session binding: when an LLM tool runs mid-turn, the resolved session and identity are bound to the current agent request. - Per-agent stores and a session registry: each agent gets state, stats, errors, and a notification ledger. Scheduled jobs can fan out per session with error isolation. - MCP plumbing: expose any agent function as an MCP tool with one annotation, so Claude Desktop, Cursor, and other MCP clients can call into the agent directly.
What it deliberately doesn't include: transport vendor packages. No Slack, Telegram, or Discord packages are baked in. Those live in the application and translate to the neutral types, which keeps the harness portable and the dependency tree small.
Under the Hood, in One Snippet #
When all the harness pieces are in place, an entire chat-style event handler in Hot looks like this:
remember-message
meta {
agent: PersonalAgent,
on-event: "personal-agent:remember",
}
fn (event) {
d event.data
sender identity-from-data(d)
session session-from-data(d, sender)
input base-input(d, session, sender, Str(or(d.text, "")))
::chat-turn/run-chat-turn(turn-cfg, input)
}
That's the whole handler. Resolve who's talking, package up the input, and hand off to run-chat-turn
.
RAG, persistence, ordering, streaming, request binding, tool dispatch, and error handling sit behind that one call.
Adding a new slash command in your own agent follows the same pattern: one more function, one more on-event
annotation.
Where to Go Next #
Clone Hot Chat and try swapping the LLM provider, adding a slash command, or wiring a second adapter on top of the same agent. Everything below is open source and free to read.
Run Hot Chat:hot.dev/docs/demos/hot-chat -
Hot Chat source:github.com/hot-dev/hot-demos/tree/main/hot-chat -
hot-ai-agent
package:hot.dev/pkg/hot.dev/hot-ai-agent -
hot-ai
package:hot.dev/pkg/hot.dev/hot-ai -
@hot-dev/sdk
for JS/TS:npmjs.com/package/@hot-dev/sdk - Hot Dev on GitHub (Apache 2.0):github.com/hot-dev/hot - Follow Hot Dev:@hotdotdev on X