支付代理聊天界面

一个简单的聊天界面,展示与dat1预部署的gpt-oss-120b模型和Stripe MCP(模型上下文协议)服务器的集成,AI代理可以通过自然语言对话执行Stripe操作。

  • by ArthurDevel
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 ArthurDevel/stripe-agentic-payments-hackathon-mcp-demo

使用说明

Stripe代理支付黑客马拉松-MCP演示

一个简单的聊天界面,演示了与dat1预部署的gpt-oss-120b模型和Stripe MCP(模型上下文协议)服务器的集成。AI代理可以通过自然语言对话执行Stripe操作,如检索余额、创建客户、管理产品等。

重要提示:

  • 在以下网址查找入门指南 .docs/stripe_getting_started.pdf
  • 在上查找LLM友好型API文档 .docs

示例

环境变量

后端

创建 后端/.env:

STRIPE_SECRET_KEY="sk_test_..."      # Stripe secret key
DAT1_API_KEY="..."                   # DAT1 API key for LLM
PORT=3000                            # Port for backend server (optional, defaults to 3000)

快速开始

一次启动所有服务

使用VS代码/游标任务

  1. 按 Cmd+Shift+P (macOS)或 Ctrl+Shift+P (Windows/Linux)
  2. 类型“任务:运行任务”
  3. 选择“启动所有服务”
  4. 这将在单独的专用终端选项卡中启动后端和前端服务器

手动启动

1.后端

cd backend
npm install
npm start

2.前端

cd frontend
python3 -m http.server 8000

然后打开 http://localhost:8000 在浏览器中

项目结构

stripe-agentic-payments-hackathon-mcp-demo/
├── frontend/
│   ├── index.html          # Simple HTML frontend
│   ├── app.js              # Vanilla JavaScript chat interface
│   └── styles.css          # Simple CSS styles
├── backend/
│   ├── server.js           # Express backend with streaming API
│   ├── package.json
│   └── lib/
│       └── mcp/
│           ├── stripe-mcp.js  # Stripe MCP HTTP client
│           └── tools.js        # Tool definitions and conversion
└── README.md

它做什么

  • 简单的聊天界面,实时流式响应
  • 与Stripe MCP集成以执行Stripe操作
  • 显示性能指标,包括提示时间、生成速度和令牌计数
  • 无需构建步骤-只需运行服务器并打开HTML文件

运作原理

  1. 用户通过聊天界面发送消息
  2. 前端向发送请求 /api/chat-stream 端点
  3. 后端获取可用的Stripe MCP工具并将其包含在请求中
  4. 后端将响应从dat1 API流式传输到前端
  5. 如果AI请求Stripe工具,后端将通过MCP执行它
  6. 工具结果被发送回AI进行最终响应
  7. 前端实时显示流媒体响应

模型

此应用程序在以下位置使用dat1预部署的gpt-oss-120b模型: https://api.dat1.co/api/v1/collection/gpt-120-oss/invoke-chat

查询示例

  • “检查我的条纹平衡”
  • “通过电子邮件创建一个名为John Doe的客户john@example.com"
  • “列出我的产品”
  • “我的帐户状态如何?”