AI导哈

日历搜索应用

一个与家庭日历数据整合的ChatGPT应用，提供日历搜索、交互式UI和实时数据功能。

  • by pauljsnider
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 pauljsnider/chatgpt-app-poc

使用说明

ChatGPT日历应用程序-概念验证

一个工作的ChatGPT应用程序，使用OpenAI Apps SDK和模型上下文协议（MCP）与家庭日历数据集成。

🎯 特性

  • 日历搜索：按关键字、日期范围搜索即将举行的家庭活动，或查看所有活动
  • 交互式用户界面：带有日期/时间、地点和描述的精美活动卡片
  • 全屏体验：具有列表和网格视图的沉浸式全屏日历
  • 实时数据：通过5分钟缓存从ICS提要中获取实时日历数据
  • 主题支持：适应ChatGPT的亮/暗主题
  • 响应式设计：适用于台式机和移动设备

🚀 快速开始

先决条件

  • Node.js 18+
  • npm或pnpm
  • ngrok帐户和身份验证令牌

设置

  1. 克隆和安装依赖关系：

    git clone <your-repo-url>
cd chatgpt-app-poc
npm install
cd server && npm install
cd ../web && npm install

  2. 配置环境：

    cp .env.example .env
# Edit .env and add your ngrok auth token

  3. 构建React组件：

    npm run build

  4. 启动MCP服务器：

    npm run dev

  5. 通过ngrok曝光：

    npm run setup-ngrok

  6. 连接到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<{
    summary: string;
    start: string;
    end: string;
    location: string;
    description: string;
  }>;
  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 -入门指南

🤝 贡献

  1. 遵循规范驱动的开发方法 spec/
  2. 在ChatGPT集成之前使用MCP检查器进行测试
  3. 确保组件在所有显示模式下工作
  4. 添加新功能的测试

📄 许可证

MIT许可证-有关详细信息，请参阅许可证文件。

🙏 致谢

状态：具有日历搜索和全屏功能的工作概念验证 后续步骤：添加事件筛选、状态持久性和其他日历视图 </xai:function_call“>现在让我将所有文件添加到git并创建初始提交。我将排除.env文件，因为它已经在.gitignore中。

<xai:function_call name=“bash”> git添加。

相关 MCP