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, a reusable Hot package for transports, commands, runtime stores, rendering, streaming, and MCP helpers. Hot Dev itself is 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
# Hot App -> Service Keys -> New Key; paste it into HOT_API_KEY.
# Then add your ANTHROPIC_API_KEY (https://console.anthropic.com/) to .env.
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.

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. Try Recall preferences, Daily brief, Decisions, or Ask 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 small notes.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 exact session_id and user_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 single IncomingMessage 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 canonical recall -> 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