MCP客户端应用

MCP客户端应用

这是一个为AI大模型服务的MCP（model context protocol）客户端程序-MCPHOLDER，在手机上也能实现类似于claude desktop的功能。它可以将cloudflare上的云端服务汇集到一起，为AI大模型提供外部的支持。

功能

• AI对话页面：用户可以选择不同的大模型进行对话，默认使用Claude-3 Sonnet 3.7
• MCP服务页面：显示当前可用的MCP服务及其状态，并提供添加新服务的入口
• MCP服务测试页面：测试新的MCP服务连接，输入服务名称、URL、端口等信息

技术栈

• Flutter 3.x
• Dart 3.x
• font_awesome_flutter：用于图标展示
• google_fonts：用于字体样式

快速开始

1、请修改lib/config目录下的openRouterApiKey，当前程序只支持openrouter的claude sonnet 3.7 2、由于网络环境问题，我只能上传flutter的lib库，因此以下安装方式不一定可用：

1. 确保已安装Flutter环境
2. 克隆此仓库
3. 运行以下命令安装依赖：

flutter pub get

4. 运行应用：

flutter run

项目结构

lib/
  ├── main.dart              # 应用入口
  ├── screens/               # 页面
  │   ├── chat_screen.dart   # AI对话页面
  │   ├── services_screen.dart  # MCP服务页面
  │   └── test_service_screen.dart  # MCP服务测试页面
  ├── widgets/               # 可复用组件
  ├── models/                # 数据模型
  └── utils/                 # 工具函数

MCP协议

Model Context Protocol (MCP) 是一种协议，允许AI模型通过外部工具和API执行操作。这使得AI助手能够执行实际任务，如发送电子邮件、查询数据或控制应用程序。

更多关于MCP协议的信息，请访问 Cloudflare的MCP文档。

演示

https://youtube.com/shorts/npAoVR9HOHM?feature=share

在测试服务页面，我们先: 填入服务名称：add， 再填入cloudflare的服务URL：https://remote-mcp.yunhaisui.workers.dev/sse 端口不用填写 API秘钥随便输入，但不能为空

下面点击注册客户端获取ID 成功后点击测试连接 然后会弹出一个认证的OAUTH授权按钮，点击启动oauth授权 在新弹出的webview页面点击approve 然后App会自动识别MCP中有几个tools

这时点击MCP服务，就可以看到新增了一个加法工具

在AI对话页面中输入一个简单的加法问题，claude sonnet会自动调用mcp服务，我使用的是openrouter服务，似乎有点慢，但最终也能得到正确的结果。下周我再到cloudflare上做几个好玩的MCP服务测试一下。