Hot Dev로 AI 에이전트 만들기

출처: Dev.to

두 가지 메모리 방식을 사용해 AI 채팅 에이전트를 만드는 방법을 알아보세요. 하나는 사용자를 기기 간에 따라다니게 하는 메모리이고, 다른 하나는 채널에 있는 모든 사람과 공유되는 메모리입니다.
Hot Chat은 웹 채팅 데모로, 복제 후 약 15분이면 두 개의 AI 에이전트를 나란히 실행할 수 있습니다. 개인 모드(Personal Mode) 에이전트는 메모리가 사용자에 연결되고, 팀 모드(Team Mode) 에이전트는 메모리가 채널에 연결됩니다.
UI는 Next.js + TypeScript 앱이며, @hot-dev/sdk를 통해 Hot과 통신합니다. 에이전트 레이어는 hot.dev/hot-ai-agent 위에 구축된 재사용 가능한 Hot 패키지로, 전송, 명령, 런타임 스토어, 렌더링, 스트리밍, MCP 헬퍼 등을 제공합니다. Hot Dev 자체는 Apache 2.0 라이선스로 오픈 소스이며, 이 글에 나오는 모든 코드는 직접 확인할 수 있습니다.

Try It

데모를 실행하기 전에 Hot CLI가 설치돼 있지 않다면 먼저 설치하세요.

git clone https://github.com/hot-dev/hot-demos
cd hot-demos/hot-chat
hot dev --open                  # 터미널 1: 두 에이전트 모두 실행
cp .env.example .env            # 터미널 2: UI 실행
# Hot App -> Service Keys -> New Key; 붙여넣기 → HOT_API_KEY
# 그리고 .env 파일에 ANTHROPIC_API_KEY(https://console.anthropic.com/)를 추가하세요.
npm install && npm run dev

http://localhost:3000을 열면 툴바에서 두 에이전트를 실시간으로 전환할 수 있으며, 재시작이 필요 없습니다.
.env에 ANTHROPIC_API_KEY를 설정하면 데모가 기반으로 하는 실제 스트리밍·메모리 기반 응답을 받을 수 있습니다. 키가 없으면 UI는 로드되지만, 어시스턴트 응답은 LLM이 비활성화됐다는 스텁(stub)으로 대체됩니다. 이 하네스는 hot-ai 위에 있기 때문에, 여러분의 앱에서는 다른 제공자를 연결할 수 있습니다.
전체 가이드는 hot.dev/docs/demos/hot-chat에서 확인하세요.

Hot Chat은 하나의 Hot 프로젝트에 두 에이전트를 포함합니다. 겉보기엔 거의 동일해 보이지만, 메모리를 스코프하는 방식이 다릅니다.

• Personal Mode는 identity‑first 방식입니다. 에이전트에게 알려준 내용은 세션, 탭, 기기를 넘어 여러분을 따라다닙니다. 예를 들어 /remember 나는 차단 요소가 포함된 출시 업데이트를 선호해 라고 입력하고 탭을 닫았다가 다른 기기에서 다시 열어 /recall을 실행하면 같은 메모리가 그대로 남아 있습니다.
  이는 개인 비서, 일기 앱, 사용자별 코파일럿 등 메모리가 사람에게 귀속되는 경우에 적합합니다.

• Team Mode는 session‑first 방식입니다. 메모리가 채널에 귀속되므로 같은 방에 있는 두 사람은 동일한 뷰를 공유하고, 서로 다른 채널은 독립됩니다. 예를 들어 "우리는 출시 전에 문서를 배포하기로 했어" → "CI가 유일한 차단 요소야" → /ask 무엇이 출시를 방해하고 있나요? 라고 하면, 에이전트는 해당 기록을 인용하며 답변합니다.
  이는 팀 챗봇, 지원 인박스, 공유 워크스페이스 등에 적합합니다.

Concept

• Team Mode
• Personal Mode

Hot Chat, 대화 중 화면. 툴바에서 Personal과 Team 모드를 실시간으로 전환합니다.

UI 특징

• 일반적인 채팅 UI: 프레임워크 데모가 아니라 실제 채팅 제품처럼 보이도록 설계되었습니다. 경험 자체가 핵심입니다.
• 빠른 프롬프트 칩: 별도 문법을 배우지 않아도 각 모드를 탐색할 수 있습니다. Recall preferences, Daily brief, Decisions, Ask the team 등을 시도해 보세요.
• 스트리밍 응답: 에이전트가 생성하는 대로 바로 렌더링됩니다. 슬래시 커맨드 응답도 동일하게 스트리밍되므로 UI가 어떤 경로에서 메시지가 왔는지 알 필요가 없습니다.
• 파일 첨부: 작은 notes.md 파일이나 스크린샷을 끌어다 놓을 수 있습니다. 에이전트는 파일 이름과 타입을 메타데이터로 저장하며, 필요에 따라 내용 파싱도 확장할 수 있습니다.
• Identity Controls: 에이전트가 받는 session_id와 user_id를 정확히 표시합니다. Slack이나 Telegram 어댑터가 생성하는 형식과 동일합니다.
• Agent Graph: Hot Dev 앱에서 각 슬래시 커맨드를 타입이 지정된 이벤트 핸들러로 보여줍니다. 중앙 디스패치 함수를 파고들 필요 없이 에이전트 구조를 한눈에 파악할 수 있습니다.

One event handler per command, no central dispatch.
각 커맨드당 하나의 이벤트 핸들러, 중앙 디스패치 없음.

hot‑ai‑agent가 제공하는 것

AI 채팅 에이전트를 직접 만든 경험이 있다면 다음과 같은 스택을 직접 구현했을 가능성이 높습니다.

• 슬래시 커맨드 파서
• 검색‑증강 메모리를 통한 LLM 호출 흐름
• 스트리밍 응답 메커니즘
• 상태·통계용 에이전트 별 스토어
• 툴이 “누구와 대화 중인지” 알 수 있게 하는 요청‑세션·아이덴티티 바인딩

대부분의 채팅 에이전트는 이 조각들을 새로 구현하게 됩니다. hot-ai-agent는 그 레이어를 추출해 제공합니다. 구체적으로 다음을 제공합니다.

Hot에서 전체 채팅 이벤트 핸들러 예시

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)
}

위가 전체 핸들러입니다. 누가 말했는지 파악하고, 입력을 패키징한 뒤 run-chat-turn에 넘깁니다.
RAG, 영속성, 순서, 스트리밍, 요청 바인딩, 툴 디스패치, 오류 처리가 모두 그 한 번의 호출 뒤에 숨겨져 있습니다.

새 슬래시 커맨드를 추가할 때도 동일한 패턴을 따릅니다: 함수 하나와 on-event 어노테이션 하나만 추가하면 됩니다.

Hot Chat을 복제하고 LLM 제공자를 교체하거나, 슬래시 커맨드를 추가하거나, 같은 에이전트 위에 두 번째 어댑터를 연결해 보세요. 아래 모든 리소스는 오픈 소스이며 자유롭게 읽을 수 있습니다.

• Run Hot Chat: https://hot.dev/docs/demos/hot-chat
• Hot Chat source: https://github.com/h