Hermes WebChat Integration 🚀

這是一個為 Hermes AI Agent 打造的現代化、響應式 Web 對話介面。採用 Next.js 14 技術棧，並透過 OpenAI 相容格式與 Hermes Gateway 進行深度整合。

🌟 特色功能

• 💎 極致設計：採用玻璃擬態 (Glassmorphism) 與現代化配色，提供如 ChatGPT 般的流暢體驗。
• ⚡ 即時對話：串接 Hermes Gateway，實現高效的 AI 對話回應。
• 📱 響應式佈局：完美支援桌面端與行動端瀏覽。
• 🐳 Docker 化部署：一鍵啟動，內建環境隔離與優化。

🛠️ 技術棧

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Icons: Lucide React
• Backend: Next.js API Routes (BFF)
• Runtime: Docker / Node.js

---

🚀 快速開始

請依照以下步驟完成 Hermes Agent 與 Web UI 的串接。

1. 配置 Hermes Agent (宿主機)

在啟動網頁介面前，請確保您的 Hermes Agent 已開啟 API 伺服器功能。

1. 開啟 Hermes 設定檔 ~/.hermes/.env。
2. 加入或修改以下設定：

   API_SERVER_ENABLED=true
   API_SERVER_KEY=your_secret_key_here

3. 在終端機啟動 Gateway 服務：

   hermes gateway

2. 啟動 Web UI (Docker)

1. 複製專案並進入目錄。
2. 使用 docker-compose 啟動服務，並傳入您設定的 API Key：

   HERMES_API_KEY=your_secret_key_here docker-compose up --build

3. 開啟瀏覽器訪問 http://localhost:3000。

---

📂 專案結構

.
├── src/
│   ├── app/            # App Router 核心邏輯
│   │   ├── api/chat/   # Hermes 串接 API Route
│   │   └── page.tsx    # 聊天首頁
│   └── components/     # UI 元件 (Chat, MessageBubble 等)
├── docker-compose.yml  # Docker 容器定義
└── Dockerfile          # Next.js Standalone 構建檔

---

🔧 環境變數說明

變數名稱	說明	範例
HERMES_API_KEY	與 Hermes API_SERVER_KEY 一致的驗證碼	sk-xxxx
NODE_ENV	執行環境模式	production

---

📝 授權條款

本專案採用 Apache License 2.0 授權。