信用卡提供商演示应用

信用卡提供商演示

这是一个演示应用程序，旨在通过模型上下文协议（MCP）展示Flutter web应用程序与ChatGPT的集成。

概述

该项目由一个Flutter web应用程序组成，该应用程序充当产品提要接口，ChatGPT可以通过MCP服务器访问和控制该接口。这展示了会话式AI如何通过结构化协议与web应用程序进行交互。

先决条件

• Flutter SDK已安装并配置
• Node.js和npm
• Cloudflared命令行界面工具
• 启用开发人员模式的ChatGPT

设置和执行

按照以下步骤运行应用程序并将其连接到ChatGPT：

1.构建Flutter Web应用程序

首先，在调试模式下编译Flutter应用程序：

flutter build web --debug

这将在 build/web 目录。

2.使用Cloudflared暴露本地服务器

使用Cloudflared创建安全隧道并将您的本地主机暴露到互联网：

cloudflared tunnel --url http://localhost:8080

Cloudflared将生成一个公共URL（例如。， https://xxx.trycloudflare.com).请将此URL放在手边，以便下一步使用。

3.配置环境变量

导航到 mcp_example 目录并更新环境变量：

cd mcp_example

编辑您的环境配置文件（例如。， .env 或环境配置）并设置以下变量：

• CDN_URL：将其设置为步骤2中生成的Cloudflared URL
• PORT：将其设置为 8000

例子：

CDN_URL=https://xxx.trycloudflare.com
PORT=8000

4.启动MCP服务器

从 mcp_example 目录，启动开发服务器：

npm run dev

这将启动MCP服务器，该服务器连接ChatGPT和Flutter应用程序之间的通信。

5.将MCP连接到ChatGPT

关注官方 OpenAI Apps SDK文档 将您的MCP服务器连接到ChatGPT。这通常涉及：

• 在ChatGPT设置中配置MCP端点
• 正在验证连接
• 验证集成是否正常工作

建筑

该应用程序演示了一个三层架构：

• 前端：Flutter web应用程序为UI提供服务
• MCP服务器：实现模型上下文协议的Node.js服务器
• 集成层：ChatGPT和MCP服务器之间的连接

故障排除

• 确保所有端口可用且未被防火墙阻止
• 验证Cloudflared隧道在整个会话期间是否保持活动状态
• 启动MCP服务器之前，请检查环境变量是否设置正确
• 在中查看服务器日志 mcp_example 任何连接问题的目录

许可证

这是一个用于教育目的的示范项目。