AI导哈

冰箱内容管理工具

一个基于MCP协议和ChatGPT Apps SDK的冰箱内容管理工具，提供区域化组织和状态指示功能。

  • by yannj-fr
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 yannj-fr/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）

相关 MCP