MCP Ui Fridge Test App

MCP适配器测试

这个项目展示了一个MCP-UI应用程序，它作为模型上下文协议（MCP）和ChatGPT应用程序软件开发工具包（SDK）之间的桥梁。

项目结构

mcp-adapter-test/
├── apps/
│   ├── widget/              # React Widget Application
│   └── server/              # MCP Server Application
├── pnpm-workspace.yaml      # pnpm workspace configuration
├── CLAUDE.md               # Claude Code guidance
└── README.md

组件

小部件（Widgetapps/widget/)

一个React应用程序，用于显示冰箱内容，具备：

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

服务器（apps/server/）

一个MCP服务器，其：

• 将编译后的小部件作为UI资源提供
• 提供冰箱数据可视化的工具
• 包含ChatGPT应用程序SDK兼容层

入门指南

先决条件

• Node.js 18及以上版本
• pnpm 8+

安装

# Install all dependencies
pnpm install

发展

# Run widget in development mode
pnpm widget:dev

# Run server in development mode
pnpm server:dev

# Run both in parallel
pnpm dev

建筑；建筑物

# Build widget only
pnpm widget:build

# Build server only
pnpm server:build

# Build both
pnpm build

预览

# Preview the built widget
pnpm widget:preview

# Start the production server
pnpm server:start

数据格式

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

技术栈

• 包管理器pnpm（带工作区）
• 小部件React 18 + TypeScript + Vite
• 服务器Node.js + TypeScript + MCP SDK（Node.js + 型Script + MCP软件开发工具包）
• 造型CSS 模块

开发工作流程

1. 小部件开发跑 pnpm widget:dev 开发具有热重载功能的React组件
2. 构建小部件跑 pnpm widget:build 生成压缩后的包
3. 嵌入服务器服务器嵌入了小部件包，并将其作为UIResource提供服务
4. 测试服务器跑 pnpm server:dev 测试MCP服务器

许可证

麻省理工学院（MIT）