AI Agent Hub 🤖

一个多 AI Agent 智能助手平台，采用 Next.js 14 构建。目前已上线三大智能助手：

• 🛫 智能旅行助手 - 查询天气、推荐景点，为您的旅行提供智能规划
• 🔬 深度研究助手 - 自动分解研究任务、搜索资料、生成结构化研究报告
• 📰 每日热点助手 - 聚合 Google News 热点新闻，AI 智能筛选生成日报

✨ 功能特性

🏠 首页 - Agent Hub

• Agent 展示平台 - 集中展示所有可用的 AI 助手
• 精美卡片设计 - 渐变动画、响应式布局
• 状态区分 - 可用 Agent 与敬请期待 Agent 分区展示

🛫 智能旅行助手 📖 详细文档

• 🗓️ 智能行程规划 - 根据目的地、日期、偏好自动生成完整行程
• 🗺️ 地图可视化 - 高德地图标注景点位置，直观展示行程
• 💰 预算计算 - 自动计算门票、酒店、餐饮、交通费用
• ✏️ 行程编辑 - 支持添加、删除、调整景点
• 📤 导出功能 - 导出为 PDF 或图片，方便保存分享
• 🤖 多 Agent 协作 - 4 个专业 Agent 并行工作，智能规划

🔬 深度研究助手 📖 详细文档

• 🎯 问题剖析 - 将开放主题拆解为 3-5 个可检索的子任务
• 🔍 多轮信息采集 - 支持 Tavily、DuckDuckGo、Serper、Bing 多种搜索引擎
• 📊 反思与总结 - 对每个子任务的搜索结果进行结构化总结
• 📝 报告生成 - 整合所有子任务的总结，生成完整的研究报告
• 🤖 三 Agent 协作 - TodoPlanner + TaskSummarizer + ReportWriter

🔮 即将推出

• 代码助手 - 智能编程助手，帮您解决开发难题
• 写作助手 - AI 写作伙伴，激发您的创作灵感
• 数据分析助手 - 智能分析数据，洞察业务趋势

---

🛠️ 技术栈

类别	技术
前端框架	Next.js 14 + React 18 + TypeScript
UI 组件	Tailwind CSS + Shadcn UI + Lucide Icons
AI 模型	DeepSeek-V3.2 (通过 ModelScope API)
天气 API	高德 MCP (天气服务)
地图服务	高德地图 JS API
搜索 API	Tavily / DuckDuckGo / Serper / Bing
图片 API	Unsplash / Pexels

---

🗺️ 路由结构

┌─────────────────────────────────────────────────────────────┐
│                        前端路由                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   /                    ──→  首页 (Agent Hub)                │
│   │                         展示所有 Agent 列表              │
│   │                                                         │
│   ├── /travel          ──→  智能旅行助手                     │
│   │                         行程规划 + 地图可视化             │
│   │                                                         │
│   └── /research        ──→  深度研究助手                     │
│                             任务分解 + 报告生成              │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                        后端 API                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   /api/chat            ──→  聊天接口 (POST)                  │
│                             支持 FAQ 匹配 / Agent 模式        │
│                                                             │
│   /api/faq             ──→  FAQ 数据接口 (GET)               │
│                             返回 FAQ 列表                    │
│                                                             │
│   /api/travel/plan     ──→  旅行计划接口 (POST)              │
│                             生成完整旅行计划                  │
│                                                             │
│   /api/travel/images   ──→  景点图片接口 (POST)              │
│                             批量获取景点图片                  │
│                                                             │
│   /api/research/stream ──→  研究流接口 (POST/GET)            │
│                             SSE 流式返回研究进度              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

页面说明

路由	页面	说明
/	首页	Agent Hub - 展示所有 AI 助手卡片
/travel	智能旅行助手	行程规划、地图可视化、预算计算、导出功能
/research	深度研究助手	任务分解、搜索资料、生成研究报告

API 接口

接口	方法	说明
/api/chat	POST	聊天对话接口
/api/faq	GET	获取 FAQ 数据
/api/travel/plan	POST	生成旅行计划
/api/travel/images	POST	批量获取景点图片
/api/research/stream	POST/GET	研究流接口（SSE 流式）

---

🔌 API 详细说明

POST /api/chat

聊天对话接口，支持多种模式。

请求参数：

interface ChatRequestBody {
  question: string; // 用户问题
  model?: string; // 模型类型，默认 "travel-agent"
}

模型类型：

model	说明
travel-agent	智能旅行助手 Agent（默认）
faq-matcher	FAQ 关键词匹配模式

响应格式：

interface ChatResponse {
  model: string; // 使用的模型
  question: string; // 原始问题
  answer: string; // AI 回答
  steps?: AgentStep[]; // Agent 思考步骤（仅 Agent 模式）
  usedTools?: string[]; // 使用的工具列表（仅 Agent 模式）
}

POST /api/travel/plan

生成旅行计划。

请求参数：

interface TravelRequest {
  destination: string; // 目的地
  startDate: string; // 出发日期 "2024-01-15"
  endDate: string; // 返回日期 "2024-01-18"
  travelers: number; // 出行人数
  preferences: string[]; // 偏好列表
  budget: "economy" | "moderate" | "luxury"; // 预算级别
}

POST /api/research/stream

开始研究并通过 SSE 流式返回进度和结果。

请求参数：

interface ResearchRequest {
  topic: string; // 研究主题
  searchBackend?: string; // 搜索引擎 (tavily/duckduckgo/serper/bing)
}

SSE 事件类型：

事件	说明	数据
plan	规划完成	{ todoList: TodoItem[] }
progress	进度更新	{ stage, percentage, text }
task_searching	任务搜索中	{ taskId }
task_summarizing	任务总结中	{ taskId, sources }
task_complete	任务完成	{ taskId, summary, sources }
report	报告生成完成	{ report }
error	发生错误	{ message, taskId? }
done	研究完成	null

GET /api/research/stream

获取可用的搜索引擎列表。

响应格式：

interface SearchBackendsResponse {
  availableBackends: string[]; // ["tavily", "duckduckgo", "serper", "bing"]
  defaultBackend: string; // "tavily"
}

---

🚀 快速开始

1. 安装依赖

npm install

2. 配置环境变量

复制环境变量模板并填入您的 API Key：

cp .env.example .env.local

编辑 .env.local 文件：

# ===== LLM 配置 =====
LLM_API_KEY=your-api-key-here
LLM_BASE_URL=https://api-inference.modelscope.cn/v1
LLM_MODEL=deepseek-ai/DeepSeek-V3.2

# ===== 搜索 API 配置（研究助手使用，至少配置一个）=====
TAVILY_API_KEY=your-tavily-api-key-here
SERPER_API_KEY=your-serper-key          # 可选
BING_SEARCH_KEY=your-bing-key           # 可选
DEFAULT_SEARCH_BACKEND=tavily

# ===== 高德地图配置（旅行助手使用）=====
NEXT_PUBLIC_AMAP_API_KEY=你的高德JS_API_Key
NEXT_PUBLIC_AMAP_SECURITY_KEY=你的安全密钥
AMAP_API_KEY=你的Web服务Key

# ===== 图片 API 配置（旅行助手使用，任选其一）=====
UNSPLASH_ACCESS_KEY=你的Unsplash_Key
PEXELS_API_KEY=你的Pexels_Key

3. 启动开发服务器

npm run dev

访问 http://localhost:3000 开始使用。

---

📖 使用示例

智能旅行助手

1. 进入旅行助手页面
2. 输入目的地、日期、人数和偏好
3. 点击「生成智能行程」
4. 查看行程列表、地图和预算
5. 可导出为 PDF 或图片

深度研究助手

1. 进入研究助手页面
2. 输入研究主题（如「多模态大模型的最新进展」）
3. 选择搜索引擎（可选）
4. 点击「开始研究」
5. 查看实时进度和任务状态
6. 研究完成后查看/复制/下载报告

---

🏗️ 项目结构

src/
├── app/                          # Next.js App Router
│   ├── api/
│   │   ├── chat/route.ts         # 聊天 API
│   │   ├── faq/route.ts          # FAQ 数据 API
│   │   ├── travel/               # 🛫 旅行助手 API
│   │   │   ├── plan/route.ts     # 生成旅行计划
│   │   │   └── images/route.ts   # 获取景点图片
│   │   └── research/             # 🔬 研究助手 API
│   │       └── stream/route.ts   # SSE 流式研究
│   ├── travel/
│   │   └── page.tsx              # 智能旅行助手页面
│   ├── research/
│   │   └── page.tsx              # 深度研究助手页面
│   ├── layout.tsx                # 根布局
│   ├── page.tsx                  # 首页 (Agent Hub)
│   └── globals.css               # 全局样式
│
├── components/
│   ├── chat/                     # 聊天相关组件
│   │   └── ...
│   ├── travel/                   # 🛫 旅行助手组件
│   │   ├── TravelPlanner.tsx     # 主页面容器
│   │   ├── PlanForm.tsx          # 计划表单
│   │   ├── ItineraryList.tsx     # 行程列表
│   │   ├── AMapContainer.tsx     # 高德地图
│   │   ├── BudgetPanel.tsx       # 预算面板
│   │   └── ExportPanel.tsx       # 导出面板
│   ├── research/                 # 🔬 研究助手组件
│   │   ├── ResearchForm.tsx      # 输入表单
│   │   ├── TodoListPanel.tsx     # 任务列表
│   │   ├── ProgressBar.tsx       # 进度条
│   │   └── ReportPanel.tsx       # 报告面板
│   ├── home/                     # 首页组件
│   │   └── ...
│   ├── layout/                   # 布局组件
│   │   └── ...
│   └── ui/                       # 基础 UI 组件
│       └── ...
│
├── hooks/                        # React Hooks
│   ├── useChat.ts                # 聊天状态管理
│   ├── useTravelPlan.ts          # 🛫 旅行计划状态
│   ├── useAMap.ts                # 🛫 高德地图控制
│   ├── useResearch.ts            # 🔬 研究状态管理
│   └── ...
│
├── services/                     # 服务层
│   ├── agents/                   # Agent 系统
│   │   ├── baseAgent.ts          # Agent 基类
│   │   ├── attractionAgent.ts    # 🛫 景点搜索 Agent
│   │   ├── weatherAgent.ts       # 🛫 天气查询 Agent
│   │   ├── hotelAgent.ts         # 🛫 酒店推荐 Agent
│   │   ├── plannerAgent.ts       # 🛫 行程规划 Agent
│   │   └── research/             # 🔬 研究助手 Agents
│   │       ├── todoPlannerAgent.ts    # 任务规划 Agent
│   │       ├── taskSummarizerAgent.ts # 任务总结 Agent
│   │       ├── reportWriterAgent.ts   # 报告生成 Agent
│   │       └── prompts.ts             # Prompt 模板
│   ├── research/                 # 🔬 研究服务
│   │   ├── searchService.ts      # 搜索调度服务
│   │   └── researchCoordinator.ts # 研究协调器
│   ├── mcp/                      # 🛫 MCP 服务
│   │   └── amapClient.ts         #    高德 MCP 客户端
│   ├── unsplashService.ts        # 🛫 图片服务
│   ├── llmService.ts             # LLM 调用服务
│   └── ...
│
├── types/                        # TypeScript 类型定义
│   ├── travel.ts                 # 🛫 旅行相关类型
│   ├── research.ts               # 🔬 研究相关类型
│   └── ...
│
docs/                             # 📖 文档目录
├── TRAVEL_ASSISTANT.md           # 🛫 旅行助手详细文档
└── RESEARCH_ASSISTANT.md         # 🔬 研究助手详细文档

---

🔧 架构说明

整体架构

┌─────────────────────────────────────────────────────────────┐
│                         用户界面                             │
│  ┌─────────────┐  ┌─────────────────┐  ┌─────────────────┐ │
│  │   首页      │  │  智能旅行助手    │  │  深度研究助手    │ │
│  │  Agent Hub  │  │  TravelPlanner  │  │  ResearchForm   │ │
│  └─────────────┘  └─────────────────┘  └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                        Hooks 层                              │
│     useChat / useTravelPlan / useAMap / useResearch         │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                       Services 层                            │
│    chatService │ agentService │ researchCoordinator         │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                       API 路由层                             │
│  /api/chat │ /api/travel/* │ /api/research/stream           │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                        外部服务                              │
│  DeepSeek LLM │ 高德MCP │ Tavily/DuckDuckGo/Serper/Bing    │
└─────────────────────────────────────────────────────────────┘

旅行助手 Agent 协作 (多 Agent 并行)

用户输入 → PlannerAgent (协调者)
                │
    ┌───────────┼───────────┐
    ▼           ▼           ▼
景点Agent   天气Agent   酒店Agent
    │           │           │
    └───────────┼───────────┘
                ▼
         LLM 生成行程
                ▼
         返回 TravelPlan

研究助手 Agent 协作 (流水线模式)

用户输入研究主题
       ↓
┌─────────────────────────────────────────┐
│  阶段1: 规划 (TodoPlanner Agent)         │
│  将主题分解为 3-5 个子任务                 │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│  阶段2: 执行 (循环每个子任务)              │
│  ├─ SearchService: 搜索资料              │
│  └─ TaskSummarizer Agent: 总结结果       │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│  阶段3: 报告 (ReportWriter Agent)        │
│  整合所有总结，生成结构化报告              │
└─────────────────────────────────────────┘
       ↓
    输出研究报告

---

🔍 搜索引擎对比（研究助手）

搜索引擎	特点	需要 API Key
Tavily	专为 AI 设计，结果质量高	✅
DuckDuckGo	免费，隐私友好	❌
Serper	Google 搜索结果	✅
Bing	微软搜索引擎	✅

---

🎨 UI 组件

首页组件

组件	说明
HeroSection	Hero 区域 - 标题、副标题、品牌展示
AgentCard	Agent 卡片 - 支持 featured 和 coming-soon 两种状态
AgentGrid	Agent 网格布局 - 响应式排列

聊天组件

组件	说明
ChatContainer	聊天容器 - 整合消息列表和输入框
MessageList	消息列表 - 展示对话历史
MessageItem	单条消息 - 区分用户/AI 消息样式
ChatInput	输入框 - 发送消息
AgentSteps	Agent 步骤 - 展示思考过程
TypingIndicator	输入中指示器

旅行助手组件

组件	说明
TravelPlanner	主页面容器
PlanForm	旅行计划表单
ItineraryList	行程列表展示
AMapContainer	高德地图容器
BudgetPanel	预算明细面板
ExportPanel	导出功能面板

研究助手组件

组件	说明
ResearchForm	研究输入表单
TodoListPanel	任务列表面板
ProgressBar	进度条组件
ReportPanel	报告展示面板

---

📚 文档索引

文档	说明
README.md	项目主文档
智能旅行助手文档	旅行助手完整文档（架构、API、组件、配置）
深度研究助手文档	研究助手完整文档（Agent、搜索引擎、API）

---

📝 License

MIT