AI代理框架

基于LangGraph和MCP的GENIE-AI代理框架

使用LangGraph.js、LangChain和模型上下文协议（MCP）构建强大的AI代理。

GENIE是一个生产就绪的全栈框架，用于创建智能AI应用程序。它结合了 Next.js 15 和 LangGraph.js 用于前端代理编排，以及 Python FastMCP服务器 和 50+内置工具 包括计算器、转换器、可视化和开发工具。

🎯 为什么是GENIE？

• 多模型支持：与合作 谷歌双子座, OpenAI GPT-4, 安thropic克劳德，以及任何与LangChain兼容的LLM
• 50+MCP工具：用于计算、数据转换、web工具、代码分析和交互式图表的预构建实用程序
• 交互式可视化：饼图、条形图、折线图和二维码直接在聊天中呈现
• 多代理架构：LangGraph的主管模式，用于协调专门的子代理
• 企业认证：NextAuth.js与谷歌OAuth、Azure AD和可定制的提供商
• MongoDB集成：用于查询和存储数据的内置数据库工具
• 可扩展：易于添加自定义MCP工具和新的AI代理

📂 项目结构

该项目分为两个主要部分：

• genie_client/：Next.js 15前端，支持LangGraph.js、LangChain、TanStack查询和Tailwind CSS
• genie_server/：Python后端，带FastMCP、MongoDB集成和50多种实用工具

✨ 主要特点

🔐 认证

使用以下方式实现安全用户身份验证 NextAuth.js，支持多个提供商：

• 谷歌OAuth：使用Google帐户轻松登录。
• Azure AD：企业级认证。
• 可定制的：可以添加其他提供程序 app/api/auth/[...nextauth]/route.ts.

🔌 模型上下文协议（MCP）集成

该项目完全拥抱 模型上下文协议 对于标准化的工具使用：

• FastMCP服务器：The genie_server 运行FastMCP实例(server.py)展示50多种生产就绪工具。
• 工具选择前端（LangGraph代理）动态发现并选择这些MCP工具来满足用户请求，从而实现解耦和可扩展的架构。
• 交互式可视化：图表（饼图、条形图、直线图、甜甜圈图）、美人鱼图、统计仪表板和二维码在聊天响应中内联呈现。

📊 可用的MCP工具

📝 及时管理

• 保存和重复使用：用户可以将当前的聊天上下文或特定指令保存为可重复使用的提示。
• 数据库存储：提示存储在数据库中，便于通过 PromptSaveDialog.

🤖 多代理和自定义代理聊天

• 主管模式：用途 langgraph-supervisor 组建一支由专业子代理组成的团队。
• 海关代理：用户可以使用特定的系统提示、模型和允许的工具定义和配置自定义子代理。
• 智能路由：主管代理分析用户查询，并将其路由到最合适的子代理进行处理。

📄 文档和图像分析

• 文件上传：支持通过上传各种文件类型 api/upload 终点。
• 图像分析：图像经过处理（base64编码）并传递给具有视觉能力的模型进行分析。
• 文档分析：从文档（PDF、DOCX等）中提取文本，为AI代理提供上下文。

� 截图

�🚀 入门指南

按照以下说明在本地设置和运行项目。

先决条件

确保已安装以下内容：

• Node.js （v18+推荐）
• pnpm （包管理器）
• python （v3.10+）
• MongoDB （在默认端口上本地运行 27017)

🐍 后端设置（genie_server）

1. 导航到服务器目录：

   复制

   cd genie_server
   

2. 创建并激活虚拟环境：

   复制

   # Windows
   python -m venv .venv
   .venv\Scripts\activate
   
   # macOS/Linux
   python3 -m venv .venv
   source .venv/bin/activate
   

3. 安装依赖项：

   复制

   pip install -r requirements.txt
   

4. 启动MCP服务器：

   复制

   python server.py
   

   该服务器充当可流式传输的MCP服务器（HTTP/SSE）。

⚛️ 前端设置（genie_client）

1. 导航到客户端目录：

   复制

   cd genie_client
   

2. 安装依赖项：

   复制

   pnpm install
   

3. 设置环境变量：

   • 复制 .env.example 到 .env.
   • 根据需要配置API密钥（Google GenAI、OpenAI等）。

4. 运行开发服务器：

   复制

   pnpm dev
   

5. 打开 http://localhost:3000 在浏览器中查看应用程序。

🔌 MCP配置

要将前端连接到后端MCP服务器，请执行以下操作：

1. 打开应用程序 http://localhost:3000.
2. 点击 设置图标 在标题中点击“配置MCP”以打开MCP服务器列表。
3. 点击 “添加服务器” 并输入以下详细信息：
   • 名字: Genie Server （或您喜欢的任何名称）
   • 类型: http
   • 统一资源定位符: http://localhost:8000/mcp
4. 点击 “保存”。客户端现在将能够发现和使用中定义的工具 genie_server/server.py.

MCP服务器配置示例

Next.js MCP服务器（stdio）

{
  "mcpServers": {
    "next-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

HTTP API服务器（genie_Server）

{
  "mcpServers": {
    "genie-server": {
      "type": "http",
      "url": "http://localhost:8000/mcp"
    }
  }
}

[！注意] MCP工具 genie_server/app/tools/ 提供生产就绪功能，包括计算器、转换器、文本分析、可视化和开发工具。您可以使用自己的业务逻辑或集成来扩展它们。

🛠️ 技术栈

客户端

• 框架: Next.js 15 （应用路由器）
• AI编排: LangGraph.js & LangChain
• 样式: Tailwind CSS & Shadcn用户界面
• 状态管理: TanStack 查询

服务器

• 核心python
• 协议: 模型上下文协议（MCP） 通过 FastMCP
• 数据库: MongoDB （通过 pymongo)

� 致谢

特别感谢以下项目的基础代码和灵感：

• LangChain用户界面
• 全栈LangGraph Next.js代理