AI导哈

双主机图像上传测试工具

用于测试MCP主机处理图像相关模型上下文更新的工具，支持ChatGPT和MCP Apps SDK两种主机特定的小部件体验。

  • by mikechao
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 mikechao/upload-mcp

使用说明

上传MCP服务器（双主机映像上传测试台）

此存储库是一个模型上下文协议服务器，用于测试MCP主机如何处理与映像相关的模型上下文更新。 它只提供一个工具， upload_to_model，具有两种特定于主机的小部件体验：

  • ChatGPT开发者模式小部件
  • MCP应用程序SDK小部件

该实现有意专注于主机行为验证（上传桥、模型上下文更新、图像有效载荷处理），而不是生产强化。

工具合同

  • 工具名称： upload_to_model
  • 输入架构：空对象({})
  • 工具输出：指令文本加上用于图像上传/模型上下文处理的主机特定小部件行为

该工具通过元数据注册两个UI资源：

  • ChatGPT小部件通过 _meta['openai/outputTemplate']
  • MCP应用程序小部件 _meta.ui.resourceUri

架构概述

  • 共享UI组件： src/web/FileUpload.tsx
    • 包括一个标记为的可编辑文本区域 Additional Text to Send To Model
    • 默认文本： User uploaded an image from the file upload widget.
    • 重要提示：编辑此文本 上传前 图像；有效载荷是在上传时创建的
  • ChatGPT适配器： src/web/file-upload-chatgpt.tsx
    • 上传与 window.openai.uploadFile(file)
    • 可选择使用以下方式解析预览 window.openai.getFileDownloadUrl({ fileId })
    • 使用设置小部件状态 modelContent （来自文本区）和 imageIds: [fileId]
  • MCP应用适配器： src/web/file-upload-mcp.tsx
    • 用途 useApp() 从 @modelcontextprotocol/ext-apps/react
    • 发送 updateModelContext({ content }) 带有文本区域文本+图像块
    • 当主机拒绝图像有效负载时，回退到纯文本上下文

支持的图像类型和标准化

  • 文件选择器接受： image/png, image/jpeg, image/webp
  • 对于MCP模型有效载荷，支持的模型mime类型为PNG和JPEG。
  • 如果上传的文件不直接支持模型上下文（例如WebP），客户端会在发送之前将其标准化为PNG。

设置

  1. 安装依赖项：
    pnpm install
  2. 构建两个小部件：
    pnpm build:widget
  3. 启动本地开发服务器：
    pnpm dev

本地MCP端点：

http://127.0.0.1:3000/mcp

脚本

  • pnpm build:widget：构建两种小部件变体（ChatGPT+MCP应用程序）
  • pnpm build:widget:chatgpt：仅构建ChatGPT小部件
  • pnpm build:widget:mcp：仅构建MCP应用程序小部件
  • pnpm build：构建小部件，然后使用编译服务器 tsc
  • pnpm dev：构建小部件，然后使用以下命令运行服务器 tsx
  • pnpm start：构建所有内容，然后从运行编译后的服务器 dist/server.js

手动烟雾测试

  1. 跑 pnpm dev
  2. 将您的主机/客户端连接到 http://127.0.0.1:3000/mcp
  3. 调用 upload_to_model
  4. 编辑 Additional Text to Send To Model 首先（如果需要），然后上传PNG、JPEG或WebP
  5. 确认预期行为：
    • 在小部件中上传成功反馈
    • 可用时预览渲染
    • 发送到模型的文本与上传时的textarea值匹配
    • 如果图像内容被拒绝，MCP应用程序模式将回退到纯文本上下文

项目结构

upload-mcp/
├── src/
│   ├── server.ts                    # MCP server, tool/resource registration
│   └── web/
│       ├── FileUpload.tsx           # Shared upload UI
│       ├── file-upload-chatgpt.tsx  # ChatGPT adapter
│       ├── file-upload-mcp.tsx      # MCP App adapter
│       ├── chatgpt-app.html         # ChatGPT widget entry HTML
│       ├── mcp-app.html             # MCP widget entry HTML
│       └── vite.config.ts           # Widget bundling config
├── dist/
│   ├── server.js
│   └── ui/web/src/web/*.html        # Built single-file widget artifacts
├── package.json
└── tsconfig.json

故障排除

  • 工具/资源响应中缺少UI包错误：
    • 跑 pnpm build:widget 再生 dist/ui/web/src/web/*.html
  • MCP应用桥未就绪(MCP App bridge is not ready yet. Please try again.):
    • 主机桥初始化完成后重试
  • ChatGPT文件ID可能包括 sediment:// 前缀：
    • 保留并传递生食 fileId 在 imageIds; getFileDownloadUrl 正确解决它

安全和运行时注意事项

  • 该项目主要针对围绕图像模型上下文更新的MCP主机能力测试。
  • CORS当前是允许的(origin: '*')以便在测试期间更容易进行主机集成。
  • 对于生产使用，在公开之前，收紧CORS/源策略并审查网络绑定和部署设置。

相关 MCP