返回市场
数字代理mcp带链路

数字代理mcp带链路

作者:tsuka002 星标更新:2025-10-28

项目介绍

J补助金搜索 with Strands Agents

数字厅的J补助金API与MCP服务器、AWS Strands Agents框架结合的补助金搜索AI代理应用程序。

概述

本项目整合了以下技术:

  • J补助金 MCP Server: 数字厅运营的补助金电子申请系统API
  • Strands Agents: AWS的开源AI代理SDK
  • Claude 3.5 Sonnet: 可通过Anthropic API或AWS Bedrock访问

功能

🎯 核心功能

  • 补助金的自然语言搜索
  • 获取补助金详细信息
  • 代理进行对话式的补助金建议
  • 基于条件的补助金筛选

✨ Web UI(新!)

  • 实时流式传输: 通过WebSocket逐段显示代理响应
  • 工具调用可视化: 显示search_subsidiesget_subsidy_detail等执行情况
    • 🔵 蓝色工具显示: 即时显示“Tool #1: search_subsidies”等
    • ⚡ 工具运行中的动画(脉冲+旋转器)
    • ⏱️ 计算并显示执行时间
    • 📋 展开显示输入参数
  • 标准输出的实时捕获: 直接可视化代理的执行状态
  • 平滑打字效果: 字符级平滑显示
  • 增强错误处理: 自动重试功能(指数退避)
  • Next.js + React: 现代前端框架
  • FastAPI + WebSocket: 高性能后端

设置

前提条件

  • Python 3.10及以上
  • 以下任一:
    • Anthropic API 密钥
    • AWS认证信息(使用AWS Bedrock时)

安装

# 安装依赖包
pip install -r requirements.txt

# 设置环境变量
cp .env.example .env
# 编辑.env文件以设置API密钥

环境变量

选项1: 使用Anthropic API

ANTHROPIC_API_KEY=your_api_key_here
USE_BEDROCK=false
JGRANTS_API_URL=https://api.jgrants.go.jp/exp/v1

选项2: 使用AWS Bedrock

USE_BEDROCK=true
AWS_REGION=us-east-1
AWS_PROFILE=default
JGRANTS_API_URL=https://api.jgrants.go.jp/exp/v1

详细的设置步骤请参阅 SETUP.md

使用方法

选项1: Next.js Web UI(推荐)🌟

支持实时流式传输的交互式Web界面,可视化工具调用:

简单启动(推荐):

# 一键启动后端 + 前端
./start-dev.sh

或者手动启动:

后端:

# 启动FastAPI + WebSocket服务器
python3 -m uvicorn app.main:app --reload

前端(在另一个终端):

cd frontend
npm install  # 首次安装
npm run dev

请在浏览器中访问 http://localhost:3000

Web UI 特点:

  • 💬 会话形式的直观界面
  • ⚡ WebSocket 实时流式传输
  • 🔵 详细的工具调用可视化
    • 从标准输出自动检测 "Tool #1: search_subsidies"
    • 蓝色背景突出显示工具执行
    • 执行中: 脉冲动画 + 旋转器
    • 完成: 对勾 + 显示执行时间
    • 详细: 展开显示输入参数
  • 📊 错误处理及自动重新连接
  • 🎨 美丽的渐变设计
  • 📝 支持Markdown渲染

选项2: CLI模式

python cli_main.py

可以通过对话式菜单在命令行中操作。

项目结构

.
├── README.md                   # 项目概述
├── SETUP.md                    # 详细设置指南
├── BEDROCK_SETUP.md            # AWS Bedrock设置
├── requirements.txt            # Python依赖包
├── .env.example                # 环境变量模板
├── cli_main.py                 # CLI应用程序
├── app/
│   └── main.py                # 🌟 FastAPI + WebSocket后端
├── frontend/                   # 🌟 Next.js 前端
│   ├── package.json           # Node.js依赖包
│   ├── app/
│   │   ├── page.tsx          # 主聊天UI(支持流式传输)
│   │   └── layout.tsx        # 应用布局
│   └── ...
├── agents/
│   ├── __init__.py
│   └── subsidy_agent.py       # Strands代理(兼容AWS Bedrock)
├── tools/
│   ├── __init__.py
│   └── jgrants_tools.py       # J补助金 API工具(@tool 装饰器)
├── mcp/                        # MCP Server(模型上下文协议)
└── tests/
    └── test_*.py              # 测试文件

技术栈

后端

  • FastAPI: 高性能异步Web框架
  • WebSocket: 实时双向通信
  • Strands Agents: AWS的AI代理SDK
  • Claude 3.5 Sonnet: Anthropic API / AWS Bedrock

前端

  • Next.js 16: React框架
  • TypeScript: 类型安全开发
  • Tailwind CSS: 工具类优先CSS
  • React Markdown: Markdown渲染
  • Lucide React: 图标库

提升用户体验的实现细节

1. 实时流式传输

  • 通过WebSocket进行双向通信
  • 从后端到前端的事件流式传输:
    • processing: 处理开始通知
    • tool_call_start: 工具调用开始(从标准输出自动检测)
    • tool_call_result: 工具执行结果
    • response_delta: 响应差异(按单词单位)
    • response_complete: 响应完成

2. 工具执行可视化(蓝色主题)

  • 标准输出捕获: 通过ToolCaptureStream类实时监控stdout
  • 正则表达式匹配: 自动检测Tool #(\d+): (\w+)模式
  • 执行中显示:
    • 蓝色背景(bg-blue-50) + 蓝色边框(border-blue-300)
    • ⚡ 图标 + "Tool #1: search_subsidies"
    • 脉冲动画 + 旋转器
  • 完成显示: 对勾 + 显示执行时间
  • 详细显示: 可展开显示输入参数(蓝色背景)

3. 性能优化

  • 消息缓冲: 在50毫秒或20个字符后刷新缓冲区
  • 平滑动画: 通过防抖实现平滑显示
  • React优化: 使用useCallback、useMemo减少重新渲染

4. 错误处理

  • 指数退避: 在连接失败时逐渐延长重试间隔
  • 最大30秒: 重试间隔上限
  • 详细错误信息: 显示错误类型和堆栈跟踪

许可证

MIT License

参考链接