Build AI Agents with Hot Dev Here is a factual summary of the article: The article explains how to build AI chat agents with two distinct memory scopes using Hot Dev: a Personal Mode that remembers user-specific information across devices, and a Team Mode that shares memory among all users within a specific channel. The provided demo, Hot Chat, is a Next.js and TypeScript application that runs two agents side-by-side, with the agent layer built on the open-source `hot-ai-agent` package, which handles transports, commands, and streaming. The walkthrough details how to clone and run the demo locally, configure API keys for Anthropic, and switch between the two memory modes live without restarting the server. 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 https://www.npmjs.com/package/@hot-dev/sdk . The agent layer is built on , a reusable Hot package for transports, commands, runtime stores, rendering, streaming, and MCP helpers. Hot Dev itself is https://hot.dev/pkg/hot.dev/hot-ai-agent hot.dev/hot-ai-agent open source under Apache 2.0 https://github.com/hot-dev/hot , so everything you see in this post runs on code you can read. Try It Before running the demo, install Hot https://hot.dev/docs/getting-started 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 - API 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 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 https://hot.dev/pkg/hot.dev/hot-ai , so you can wire a different provider in your own app. The full walkthrough is at hot.dev/docs/demos/hot-chat https://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. 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