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

1. 构建两个小部件：

   pnpm build:widget

1. 启动本地开发服务器：

   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/源策略并审查网络绑定和部署设置。