Build AI Agents with Hot Dev

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 , a reusable Hot package for transports, commands, runtime stores, rendering, streaming, and MCP helpers. Hot Dev itself is 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 , so you can wire a different provider in your own app.

The full walkthrough is at

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.