🌸 Herta Agent Chat 🌸

A Cute & Anime-Style Fullstack LangChain Agent Chat App

二次元风格的 LangChain Agent 全栈聊天应用

---

📖 Introduction / 简介

Herta Agent Chat is a modern, full-stack chat application powered by Bun and LangChain. It features an adorable, glassmorphism-based anime aesthetic and demonstrates the real-time thought process of an AI Agent (including tool calls and results).

Herta Agent Chat 是一个基于 Bun 和 LangChain 构建的现代化全栈聊天应用。它拥有极致可爱的玻璃拟物化（Glassmorphism）二次元风格界面，并且能够实时可视化展示 AI Agent 的思考过程与工具调用。

---

✨ Features / 核心特性

• 🎨 Anime Aesthetic & Glassmorphism UI: Beautiful, translucent interface with smooth micro-animations.
• 🎨 极致的二次元美学：采用玻璃拟物化设计，辅以流畅的微动画和马卡龙配色。
• 🧠 Agent Visibility: Real-time rendering of the AI's internal thoughts and tool invocations via SSE (Server-Sent Events).
• 🧠 思维过程可视化：通过 SSE 流式传输，实时在屏幕上直观渲染 AI 调用工具（如天气查询、计算器）的详细步骤及参数。
• 🗂️ Thread History Management: Support for multiple chat sessions, history loading, and session deletion.
• 🗂️ 多会话历史记录：支持新建对话、侧边栏无缝加载历史记录以及悬停删除对话。
• ⚡ Blazing Fast: Powered entirely by Bun (both frontend tooling and backend server).
• ⚡ 极致性能：前后端均由超快的 Bun 驱动，使用原生 bun:sqlite 实现零依赖的持久化记忆（Checkpoint）存储。

---

🛠️ Tech Stack / 技术栈

Backend (后端)

• Runtime: Bun
• AI Framework: langchain (createAgent) + @langchain/openai
• Memory/Checkpointer: langgraph-checkpoint-sqlite-native (Using bun:sqlite directly)
• Server: Native Bun.serve (SSE support for streaming)

Frontend (前端)

• Framework: React + Vite + TypeScript
• Styling: Vanilla CSS (Glassmorphism design, no Tailwind needed)
• Icons: lucide-react

---

🚀 Getting Started / 快速开始

1. Requirements / 环境要求

• Bun >= 1.0.0

2. Configuration / 配置

Create a .env file in the backend directory (在 backend 目录下创建 .env 文件):

OPENAI_API_KEY=your_api_key_here
OPENAI_BASE_URL=https://api.openai.com/v1 # Optional: Custom endpoint / 可选：自定义模型接口地址
OPENAI_MODEL=gpt-4o # Optional: Model choice / 可选：自定义模型名称

3. Run the Backend / 运行后端

cd backend
bun install
bun server.ts

The server will start at http://localhost:3000. (后端服务将运行在该地址)

4. Run the Frontend / 运行前端

cd frontend
bun install
bun run dev

The application will be available at http://localhost:5173. (前端应用将运行在该地址)

---

🔧 Built-in Tools / 内置演示工具

The Agent comes with the following pre-configured tools (which you can ask it to use!): 该 Agent 默认搭载了以下虚拟工具（你可以直接在对话中让它使用！）：

1. get_weather: Get current weather for a specified city. (查询指定城市的天气)
2. calculator: Calculate basic math expressions (+, -, *, /). (进行基础的加减乘除数学计算，如：“帮我算一下 125 乘以 33 的结果”)

---

Made with ❤️ & ✨