本项目展示了一个使用 React 前端和 LangGraph 驱动的后端代理的全栈应用程序。该代理旨在通过动态生成搜索词、使用多个搜索供应商查询网络、反思结果以识别知识差距,并迭代优化搜索,直到能够提供有充分支持和引用的答案,来对用户的查询进行全面研究。该应用程序是使用 LangGraph 构建研究增强型对话 AI 的示例,支持多个 LLM 供应商和搜索服务。
- 💬 React 前端和 LangGraph 后端的全栈应用程序
- 🧠 由 LangGraph 代理驱动,提供高级研究和对话式 AI
- 🤖 多 LLM 供应商支持:可选择 Google Gemini、OpenAI、Azure OpenAI 或 Anthropic 模型
- 🔍 使用您首选的 LLM 动态生成搜索查询
- 🌐 多搜索供应商支持:通过 Google Search API、Tavily 或 Firecrawl 集成网络研究
- 🤔 反思性推理,识别知识差距并优化搜索
- 📄 生成带有来源引用的答案
- 🔄 开发期间前后端热重载
项目分为两个主要目录:
frontend/:包含使用 Vite 构建的 React 应用程序backend/:包含 LangGraph/FastAPI 应用程序,包括研究代理逻辑
按照以下步骤在本地运行应用程序进行开发和测试。
1. 前置要求:
- Node.js 和 npm(或 yarn/pnpm)
- Python 3.11+
- API 密钥:后端代理需要您要使用的供应商的 API 密钥。
- 导航到
backend/目录 - 通过复制
backend/.env.example文件创建一个名为.env的文件 - 打开
.env文件并添加您的 API 密钥:# 至少需要一个 LLM 供应商: GEMINI_API_KEY="YOUR_GEMINI_API_KEY" # 用于 Google Gemini 模型 OPENAI_API_KEY="YOUR_OPENAI_API_KEY" # 用于 OpenAI 模型 ANTHROPIC_API_KEY="YOUR_ANTHROPIC_API_KEY" # 用于 Anthropic Claude 模型 # 用于 Azure OpenAI: AZURE_OPENAI_API_KEY="YOUR_AZURE_OPENAI_API_KEY" AZURE_OPENAI_ENDPOINT="YOUR_AZURE_OPENAI_ENDPOINT" # 例如:https://your-resource.openai.azure.com/ AZURE_OPENAI_API_VERSION="2024-02-15-preview" # 可选,默认为 2024-02-15-preview # 至少需要一个搜索供应商: # 注意:搜索供应商与 LLM 供应商是独立的。 # 例如,您可以使用 Azure OpenAI 作为 LLM,同时使用 Tavily 进行搜索。 # GEMINI_API_KEY(上面)也提供 Google Search TAVILY_API_KEY="YOUR_TAVILY_API_KEY" # 用于 Tavily 搜索 FIRECRAWL_API_KEY="YOUR_FIRECRAWL_API_KEY" # 用于 Firecrawl 搜索
- 导航到
2. 安装依赖:
后端:
cd backend
pip install .前端:
cd frontend
npm install3. 运行开发服务器:
后端和前端:
make dev这将运行后端和前端开发服务器。打开浏览器并导航到前端开发服务器 URL(例如 http://localhost:5173/app)。
或者,您可以分别运行后端和前端开发服务器。对于后端,在 backend/ 目录中打开终端并运行 langgraph dev。后端 API 将在 http://127.0.0.1:2024 可用。它还会打开一个浏览器窗口到 LangGraph UI。对于前端,在 frontend/ 目录中打开终端并运行 npm run dev。前端将在 http://localhost:5173 可用。
后端的核心是在 backend/src/agent/graph.py 中定义的 LangGraph 代理。它遵循以下步骤:
- 生成初始查询: 根据您的输入,使用 LLM 模型生成一组初始搜索查询
- 网络研究: 对于每个查询,使用搜索供应商查找相关网页
- 反思和知识差距分析: 代理分析搜索结果以确定信息是否充分或是否存在知识差距。它使用 LLM 模型进行此反思过程
- 迭代优化: 如果发现差距或信息不足,它会生成后续查询并重复网络研究和反思步骤(最多配置的最大循环次数)
- 最终答案: 一旦研究被认为足够,代理会使用 LLM 模型将收集的信息综合成连贯的答案,包括来自网络来源的引用
对于快速的一次性问题,您可以从命令行执行代理。脚本 backend/examples/cli_research.py 运行 LangGraph 代理并打印最终答案:
cd backend
python examples/cli_research.py "可再生能源的最新趋势是什么?"从命令行使用不同的 LLM 和搜索供应商:
cd backend
# 使用 OpenAI 和 Tavily 搜索
python examples/multi_provider_example.py \
"What are the latest developments in quantum computing?" \
--llm-provider openai \
--search-provider tavily
# 使用 Anthropic Claude 和 Google Search
python examples/multi_provider_example.py \
"Explain the recent advances in fusion energy" \
--llm-provider anthropic \
--search-provider google \
--model claude-3-5-sonnet-20241022
# 使用默认的 Google Gemini 和 Firecrawl
python examples/multi_provider_example.py \
"What is the state of self-driving car technology?" \
--search-provider firecrawl在生产环境中,后端服务器提供优化的静态前端构建。LangGraph 需要 Redis 实例和 Postgres 数据库。Redis 用作发布-订阅代理,以支持从后台运行中流式传输实时输出。Postgres 用于存储助手、线程、运行、持久化线程状态和长期内存,以及管理具有"恰好一次"语义的后台任务队列的状态。有关如何部署后端服务器的更多详细信息,请查看 LangGraph 文档。以下是如何构建包含优化的前端构建和后端服务器的 Docker 镜像并通过 docker-compose 运行它的示例。
注意:对于 docker-compose.yml 示例,您需要 LangSmith API 密钥,您可以从 LangSmith 获取。
注意:如果您不运行 docker-compose.yml 示例或将后端服务器暴露到公共互联网,您应该更新 frontend/src/App.tsx 文件中的 apiUrl 为您的主机。当前 apiUrl 设置为 docker-compose 的 http://localhost:8123 或开发的 http://localhost:2024。
1. 构建 Docker 镜像:
从项目根目录运行以下命令:
docker build -t gemini-fullstack-langgraph -f Dockerfile .2. 运行生产服务器:
GEMINI_API_KEY=<your_gemini_api_key> LANGSMITH_API_KEY=<your_langsmith_api_key> docker-compose up打开浏览器并导航到 http://localhost:8123/app/ 查看应用程序。API 将在 http://localhost:8123 可用。
应用程序现在支持多个 LLM 供应商,可以从前端选择:
- Google Gemini:模型如
gemini-2.0-flash、gemini-2.5-flash、gemini-2.5-pro - OpenAI:模型如
gpt-4o、gpt-4o-mini、o1 - Azure OpenAI:Azure 托管的 OpenAI 模型如
gpt-4o、gpt-4o-mini、gpt-4、gpt-35-turbo - Anthropic:模型如
claude-3-5-sonnet、claude-3-5-haiku、claude-3-opus
可从多个搜索服务中选择:
- Google Search:与 Gemini 模型集成的原生 Google Search API
- Tavily:具有深度网络研究能力的高级 AI 驱动搜索 API
- Firecrawl:网络爬取和内容提取服务
-
通过前端 UI:只需从界面的下拉菜单中选择您首选的 LLM 供应商和搜索服务。
-
通过配置:您还可以在后端配置中设置默认供应商:
# 在 backend/src/agent/configuration.py 中 llm_provider: str = Field(default="google") # 或 "openai" 或 "azure_openai" 或 "anthropic" search_provider: str = Field(default="google") # 或 "tavily" 或 "firecrawl"
-
通过环境变量:
export LLM_PROVIDER=openai export SEARCH_PROVIDER=tavily
- React(配合 Vite)- 用于前端用户界面
- Tailwind CSS - 用于样式设计
- Shadcn UI - 用于组件
- LangGraph - 用于构建后端研究代理
- 多个 LLM 供应商:
- Google Gemini - 用于查询生成、反思和答案综合
- OpenAI - 用于 GPT-4 和其他 OpenAI 模型
- Azure OpenAI - 用于 Azure 托管的 OpenAI 模型
- Anthropic Claude - 用于 Claude 模型
- 多个搜索服务:
本项目根据 Apache License 2.0 授权。详情请参阅 LICENSE 文件。

