MCP Adapter 测试

该项目演示了一个MCP-UI应用程序，该程序在Model Context Protocol（MCP）和ChatGPT Apps SDK之间架起了一座桥梁。

项目结构

mcp-adapter-test/
├── apps/
│   ├── widget/              # React部件应用
│   └── server/              # MCP服务器应用
├── pnpm-workspace.yaml      # pnpm工作区配置
├── CLAUDE.md               # Claude代码指南
└── README.md

组件

部件 (apps/widget/)

一个React应用，用于显示冰箱内容，具有以下特点：

• 基于区域的组织（架子、抽屉、门隔间）
• 带有状态指示器的物品卡片（新鲜、即将过期、已过期）
• 响应式设计
• 使用Vite进行快速开发

服务器 (apps/server/)

一个MCP服务器，具有以下功能：

• 提供编译后的部件作为UI资源
• 提供冰箱数据可视化的工具
• 包含与ChatGPT Apps SDK兼容的层

开始使用

先决条件

• Node.js 18+
• pnpm 8+

安装

# 安装所有依赖
pnpm install

开发

# 在开发模式下运行部件
pnpm widget:dev

# 在开发模式下运行服务器
pnpm server:dev

# 并行运行两者
pnpm dev

构建

# 只构建部件
pnpm widget:build

# 只构建服务器
pnpm server:build

# 同时构建两者
pnpm build

预览

# 预览构建好的部件
pnpm widget:preview

# 启动生产服务器
pnpm server:start

数据格式

参见apps/widget/FRIDGE_DATA_FORMAT.md以获取完整的JSON模式文档。

技术栈

• 包管理器：pnpm（带工作区）
• 部件：React 18 + TypeScript + Vite
• 服务器：Node.js + TypeScript + MCP SDK
• 样式：CSS Modules

开发流程

1. 部件开发：运行pnpm widget:dev以使用热重载开发React部件
2. 构建部件：运行pnpm widget:build以创建最小化捆绑包
3. 嵌入到服务器：服务器嵌入部件捆绑包并将其作为UI资源提供
4. 测试服务器：运行pnpm server:dev以测试MCP服务器

许可证

MIT