ChatGPT日历应用程序-概念验证
一个工作的ChatGPT应用程序，使用OpenAI Apps SDK和模型上下文协议（MCP）与家庭日历数据集成。
🎯 特性
- 日历搜索：按关键字、日期范围搜索即将举行的家庭活动，或查看所有活动
- 交互式用户界面：带有日期/时间、地点和描述的精美活动卡片
- 全屏体验：具有列表和网格视图的沉浸式全屏日历
- 实时数据：通过5分钟缓存从ICS提要中获取实时日历数据
- 主题支持：适应ChatGPT的亮/暗主题
- 响应式设计：适用于台式机和移动设备
🚀 快速开始
先决条件
- Node.js 18+
- npm或pnpm
- ngrok帐户和身份验证令牌
设置
- 克隆和安装依赖关系：
git clone
cd chatgpt-app-poc
npm install
cd server && npm install
cd ../web && npm install- 配置环境：
cp .env.example .env
# Edit .env and add your ngrok auth token- 构建React组件：
npm run build- 启动MCP服务器：
npm run dev- 通过ngrok曝光：
npm run setup-ngrok- 连接到ChatGPT：
- 复制ngrok HTTPS URL - 转到ChatGPT设置→ 测试版功能→ 开发者模式 - 使用您的ngrok URL添加连接器+ /mcp
用法
在ChatGPT中尝试以下查询：
- “显示即将发生的事件”
- “搜索生日活动”
- “下周有什么活动？”
- “查找标题中带有“练习”的活动”
🏗️ 建筑
MCP服务器(server/)
- 框架：Node.js+Express
- 协议：模型上下文协议（MCP）
- 工具:
calendar_search-搜索家庭日历事件 - 资源：用于UI渲染的HTML组件
- 数据源：ICS日历源
https://paulsnider.net/family/family-calendar-combined.ics
React组件(web/)
- 框架：React 18与TypeScript
- 打包工具：esb构建
- 样式：具有系统颜色的主题感知CSS
- 整合:
window.openai用于ChatGPT通信的API
关键文件
├── server/server.js # MCP server implementation
├── web/src/component.tsx # React calendar component
├── spec/calendar-search/ # Requirements and specifications
├── scripts/ # Development utilities
└── .env # Environment configuration (gitignored)🔧 发展
可用脚本
npm run dev-以开发模式启动MCP服务器npm run build-构建React组件包npm run setup-ngrok-配置并启动ngrok隧道npm run start-启动生产服务器
测试
- 使用MCP检查器：
http://localhost:2091/mcp - 测试日历解析：
node server/test-calendar.js - 检查组件构建：
cd web && npm run build
📋 API 参考
工具
calendar_search
使用可选过滤功能搜索家庭日历事件。
参数：
query（字符串，可选）：搜索标题、描述或位置的关键字days（数字，可选）：提前搜索的天数（默认值：30）
退货：
events：日历事件数组query：原始搜索查询daysAhead：搜索天数
组件道具
React组件接收 toolOutput 与：
{
events: Array;
query?: string;
daysAhead?: number;
}🔒 安全
- 日历数据是公开的（不需要身份验证）
- ChatGPT集成需要HTTPS
- 通过以下方式将敏感数据排除在版本控制之外
.gitignore - 用于配置的环境变量
📚 文档
该项目包括ChatGPT Apps SDK的全面文档：
01-core-concepts.md-MCP协议及设计原则02-mcp-server-guide.md-服务器实施指南03-component-building-guide.md-React组件开发08-quick-start.md-入门指南
🤝 贡献
- 遵循规范驱动的开发方法
spec/ - 在ChatGPT集成之前使用MCP检查器进行测试
- 确保组件在所有显示模式下工作
- 添加新功能的测试
📄 许可证
MIT许可证-有关详细信息，请参阅许可证文件。
🙏 致谢
- 内置 OpenAI应用软件开发工具包
- 用途 模型上下文协议
- 家庭日历系统提供的日历数据
- 图标和样式遵循ChatGPT设计准则
______________________________________________________________________
状态：具有日历搜索和全屏功能的工作概念验证 后续步骤：添加事件筛选、状态持久性和其他日历视图 \现在让我将所有文件添加到git并创建初始提交。我将排除.env文件，因为它已经在.gitignore中。
\
git添加。