Claude 스타일 3단 UI｜Hermes WebUI 셀프호스팅 (2026)
소개
Claude의 웹 앱은 많은 고급 사용자가 포기하지 않는 레이아웃을 구현했습니다. 왼쪽에 기록, 중앙에 대화, 아티팩트/파일이 오른쪽에. 문제는 $20/월 구독 및 세션 속도 제한입니다. 이는 일상적인 채팅에는 괜찮지만 상담원, 도구 루프 및 일일 조사에는 고통스럽습니다.
Hermes WebUI(2026년 기준 GitHub 스타 10,000명 이상)는 Nous Research의 자체 개선 에이전트 런타임인 Hermes Agent의 커뮤니티 웹 프런트엔드입니다. 에이전트 코드를 다시 작성하는 것은 안 합니다. 하나의 Docker 명령(또는 docker compose up)을 실행하고 원시 터미널보다 Claude의 제품 UI에 더 가깝게 느껴지는 라이브 도구 호출 카드 및 작업 공간 파일 브라우저가 포함된 다크 모드, 3개 창 인터페이스를 얻습니다.
이 가이드는 좌석당 SaaS 비용을 지불하지 않고 자체 호스팅 AI 채팅 UI 및 Claude 스타일 오픈 소스 인터페이스를 원하는 독자를 위한 실용적인 Hermes WebUI 튜토리얼입니다. 우리는 아키텍처, 설치, 보안 및 6가지 일반적인 함정을 다룹니다.
이미 다른 곳에서 에이전트를 실행 중이라면 OpenClaw 멀티 에이전트 오케스트레이션 가이드와 비교해 보세요. Hermes는 OpenClaw 사용자를 위해 hermes claw migrate도 제공합니다. 대규모 저장소는 Understand Anything 코드베이스 시각화를 참고하세요.
Hermes WebUI란 (무엇이고 무엇이 아닌가)
| 레이어 | 프로젝트 | 역할 |
|---|---|---|
| UI | nesquena/hermes-webui | React 웹 앱, 포트 8787, 3열 UX |
| 에이전트 | NousResearch/hermes-agent | 도구 실행, 스킬, 게이트웨이(텔레그램/디스코드), 메모리 |
| 구성 | ~/.hermes/config.yaml |
모델, API 키, 도구 허용 목록 |
| 작업 공간 | ~/workspace (기본값) |
에이전트가 읽고 쓰는 파일 — 오른쪽 창에 표시됨 |
Hermes WebUI는 호스팅된 Claude API 복제본이 아니입니다. hermes 모델을 통해 자체 모델 키(Anthropic, OpenRouter, Nous Portal, 로컬 엔드포인트 등)를 가져옵니다. hermes-agent.nousresearch.com/docs.
“Claude 작업 공간” 정신 모델과 일치하는 UI 기능
3열 레이아웃
| 열 | 일반적인 콘텐츠 |
|---|---|
| 왼쪽 | 대화 목록, 세션 기록, 빠른 전환 |
| 센터 | 스트리밍 채팅, 마크다운, 중단 및 리디렉션 |
| 오른쪽 | Workspace — 라이브 파일 트리, 미리보기, 아티팩트 스타일 출력 |
다크 모드 및 도구 투명도
단순한 채팅 풍선과 달리 Hermes WebUI는 실시간으로 도구 호출(쉘 명령, 파일 편집, 검색)을 로그를 파헤치지 않고도 스캔할 수 있는 카드로 확장합니다. 이는 Claude 고급 사용자가 API 전용 스크립트 대신 웹 앱에 머무르는 이유를 반영합니다.
작업공간 파일 브라우저
오른쪽 창은 마운트된 /workspace 디렉터리(호스트 경로 구성 가능)에 매핑됩니다. 차트, 코드 또는 보고서를 작성하는 에이전트는 브라우저에 즉시 표시됩니다. 이는 ChatGPT의 단일 스레드 보기보다 Claude Artifacts + 프로젝트 파일에 더 가깝습니다.
공식 데모 및 스크린샷: GitHub의 Hermes WebUI 및 커뮤니티 데모 사이트.
Claude/ChatGPT 웹과 Hermes WebUI(결정 매트릭스)
| 요소 | 클로드 웹($20/월) | 채팅GPT 플러스 | Hermes WebUI(자체 호스팅) |
|---|---|---|---|
| 레이아웃 | 3열 + 아티팩트 | 단일 스레드 중심 | 3열 + 작업공간 브라우저 |
| 비율 제한 | 세션 캡 | 모델 대문자 | 하드웨어 + API 할당량만 |
| 데이터 상주 | 인류구름 | OpenAI 클라우드 | 기기 / VPS |
| 에이전트 도구 | 제품 한정 | 플러그인/GPT | 40+ Hermes 도구, cron, 하위 에이전트 |
| 설정 노력 | 0 | 0 | Docker + API 키(~15분) |
| 모바일 | 공식 앱 | 공식 앱 | 서버 브라우저(SSH 터널) |
권장 경로:
- 간헐적인 채팅만 필요하고 작업을 전혀 고려하지 않는 경우 → Claude/ChatGPT를 유지하세요.
- 제한에 도달했거나 파일이 많은 에이전트 작업이 필요하거나 동일한 에이전트에서 Telegram + web을 원하는 경우 → Hermes Agent + WebUI.
- OpenClaw에서 마이그레이션하는 경우 →
hermes 클로 마이그레이션을 실행한 다음 WebUI를 연결합니다(Hermes 문서 참조).
전제조건
| 요구사항 | 참고 |
|---|---|
| Docker | Docker 데스크톱(Mac/Windows) 또는 Linux의 엔진 |
| 디스크 | ~2~5GB(이미지용); local | 인 경우 모델 캐시에 대한 추가 정보
| API 키 | Anthropic, OpenRouter 또는 Nous Portal 원키 설정 |
| 선택사항: 헤르메스 CLI | curl -fsSL .../install.sh | bash 올인원 이미지를 사용하지 않는 경우 |
Apple Silicon Mac에서 바인드 마운트는 실제 UID(id -u — 종종 1000이 아닌 501)를 사용합니다. 아래 Docker 예제는 WANTED_UID / WANTED_GID을 명시적으로 설정합니다.
단계별: Docker 설치(빠른 경로)
1단계 — Hermes 에이전트 구성 설치(처음에만)
curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | 강타
소스 ~/.bashrc # 또는 ~/.zshrc
헤르메스 설정 # 마법사: 모델 공급자 + API 키
기존 ~/.hermes.
2단계 — WebUI 이미지 가져오기
docker pull ghcr.io/nesquena/hermes-webui:latest
3단계 — 하나의 컨테이너 실행(공식 단일 라이너)
docker run -d \
-e WANTED_UID=$(id -u) -e WANTED_GID=$(id -g) \
-v ~/.hermes:/home/hermeswebui/.hermes \
-e HERMES_WEBUI_STATE_DIR=/home/hermeswebui/.hermes/webui \
-v ~/작업 공간:/작업 공간 \
-p 127.0.0.1:8787:8787 \
ghcr.io/nesquena/hermes-webui:latest
열기 http://localhost:8787.
4단계 — UI 또는 CLI 내부에 모델 설정
hermes 모델 # 예: anthropic:claude-sonnet-4-6 또는 openrouter 경로
WebUI는 마운트된 볼륨에서 ~/.hermes/config.yaml을 읽습니다.
5단계 — 보안 원격 액세스(선택 사항)
기본 바인딩은 localhost 전용(127.0.0.1:8787)입니다. VPS의 경우:
# 서버에서: compose/.env에서 HERMES_WEBUI_PASSWORD를 설정하고 역방향 프록시 뒤에만 0.0.0.0을 바인딩합니다.
ssh -N -L 8787:127.0.0.1:8787 user@your-server
그런 다음 http://lo를 찾아보세요.calhost:8787 로컬로. 헤드리스 Mac/Linux 상자의 SSH 기본 사항은 Mac mini M4 SSH 가이드.
을 참조하세요.6단계 — Docker Compose(프로덕션)
git 클론 https://github.com/nesquena/hermes-webui
CD hermes-webui
cp .env.docker.example .env
# 필요한 경우 macOS에서 UID/GID를 수정합니다.
docker compose up -d
두 개의 컨테이너 설정(에이전트 + UI) 및 업그레이드 참고 사항은 저장소의 docs/docker.md을 참조하세요.
7단계 — 연기 테스트 에이전트 + UI
가운데 창에서 질문하세요: "작업 공간의 파일을 나열하고 hello.md를 만듭니다." 오른쪽 창 업데이트를 확인하면 도구 카드이 셸/파일 도구에 나타납니다.
아키텍처: WebUI가 에이전트와 통신하는 방법
브라우저(:8787)
│
▼
헤르메스 WebUI(노드/반응)
│ 웹소켓 / HTTP API
▼
Hermes Agent 프로세스(도구, LLM, 메모리)
│
├── ~/.hermes/ (구성, 세션, 기술)
└── ~/workspace/ (프로젝트 파일 → 오른쪽 열)
동일한 ~/.hermes 상태에 대해 CLI(hermes), gateway(hermes Gateway) 및 WebUI을 실행할 수 있습니다. 인터페이스를 선택하세요. 장치당. 세부정보: 아키텍처 문서.
문제 해결
빈 UI 또는 docker run
후 "연결할 수 없음"
증상: 브라우저가 :8787.
에서 회전합니다.Fix: 컨테이너 로그(docker 로그 <id>)를 확인하고, 포트 매핑을 확인하고, 8787을 사용하는 다른 항목이 없는지 확인하세요. Linux에서는 curl -s http://127.0.0.1:8787.
~/.hermes 마운트
에 대한 권한이 거부되었습니다.
증상: 에이전트가 시작되지만 구성이 누락되었습니다. 빈 모델 목록.
수정: WANTED_UID / WANTED_GID 일치하는 호스트 id -u / id -g을 전달합니다. macOS 사용자: Compose에서 .env을 편집합니다. 기본값은 UID 1000.
WebUI에 작업공간이 표시되지만 에이전트가 응답하지 않습니다
증상: 채팅이 중단되고 스트리밍이 되지 않습니다.
Fix: ~/.hermes/config.yaml에서 API 키를 검증하고, 호스트에서 hermes doctor을 실행하고, 공급자 할당량을 확인하세요. CLI 테스트: 터미널에서 먼저 hermes.
비밀번호 없이 노출된 포트
증상: LAN 액세스를 위해 바인딩을 0.0.0.0:8787로 변경했습니다.
Fix: HERMES_WEBUI_PASSWORD를 설정하고 TLS가 있는 nginx/Caddy를 앞에 배치합니다. 절대로 raw :8787을 공개 인터넷에 노출하지 마세요.
FAQ
hermes 클로 마이그레이션, Telegram/Discord에 대한 게이트웨이. 단순한 채팅 래퍼가 아닌 Nous 에이전트 루프를 원한다면 Hermes를 선택하세요.docs/docker.md.을 참조하세요.Hermes WebUI은 상담원 고급 사용자를 위한 Claude 스타일 3열 작업 공간에 가장 가까운 무료, 자체 호스팅 경로입니다. 기록, 채팅, 파일을 한 번에 볼 수 있으며 Docker는 포트에서 몇 분 안에 시작할 수 있는 투명한 도구 카드도 있습니다. 8787.
공식 docker run으로 시작하고, ~/.hermes 및 ~/workspace을 마운트하고, hermes 설정으로 모델을 구성한 다음 실제 파일 작성 작업으로 스트레스 테스트를 수행합니다. 공식 저장소: nesquena/hermes-webui · NousResearch/hermes-agent.
공식 Hermes 리소스로 계속하기
Docker 런북·모델 설정·아키텍처는 업스트림 리포에 있습니다. Hermes WebUI 배포·업그레이드 시 함께 참고하세요.