日程管理应用

一款现代的全栈Web应用,用于管理日常活动,具备美观的时间线界面,并集成了MCP服务器以实现AI助手功能。

  • by Bahadurahmedkhan
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 Bahadurahmedkhan/MCPSERVER

使用说明

基于MCP服务器的日程活动调度器

一个现代化的全栈网页应用,用于管理日常活动,拥有美观的时间线界面,并通过MCP(模型上下文协议)服务器集成增强了AI助手功能。

🎥 演示视频

观看应用程序的实际运行情况:

📹(视频播放按钮) 在Google Drive上观看演示视频

注演示视频也可以在本地查看 Video Demo/ 文件夹。由于GitHub的文件大小限制,视频文件未包含在仓库中。

🚀 特性

核心应用

  • 时间线视图基于持续时间的区块表示日常活动的可视化
  • 实时更新跨会话的实时更新WebSocket集成
  • 活动管理创建、编辑、删除活动,并将活动标记为已完成
  • 日期导航轻松选择日期,支持上一天/下一天导航
  • 响应式设计以移动设备为优先的设计,适用于所有设备
  • 深色主题带有玻璃拟态效果的美观深色界面

MCP服务器集成

  • 人工智能助手工具通过MCP协议与AI助手实现全面集成
  • 活动管理人工智能可以创建、更新和管理您的活动
  • 智能调度人工智能可以帮助你规划和安排一天的事务
  • 自然语言使用自然语言指令与您的日程安排进行交互

🛠️ 技术栈

前端

  • Next.js 15 使用App Router
  • TypeScript 为了类型安全
  • Tailwind CSS 用于造型
  • Lucide React(可译为“Lucide响应式设计”或根据具体上下文调整,若“Lucide”为特定品牌或项目名,则保留原样) 用于图标
  • Axios 用于API调用

后端

  • FastAPI 高性能API
  • SQLAlchemy 用于数据库ORM(对象关系映射)
  • SQLite 用于本地数据库
  • WebSockets(网络套接字) 用于实时更新
  • Pydantic 用于数据验证

MCP服务器

  • 模型上下文协议 用于人工智能集成
  • python MCP服务器实现
  • RESTful API(Representational State Transfer(表述性状态转移)应用程序编程接口) 与FastAPI后端的集成

📦 安装

先决条件

  • Node.js 18及以上版本
  • Python 3.8及以上版本
  • pip(Python包管理器)

后端设置

  1. 导航到后端目录:
cd daily-scheduler/backend
  1. 安装Python依赖项:
pip install -r requirements.txt
  1. 启动 FastAPI 服务器:
python main.py

API 将可用 http://localhost:8000

前端设置

  1. 安装 Node.js 依赖项:
npm install
  1. 启动开发服务器:
npm run dev

该应用程序将在 http://localhost:3000

MCP服务器设置

  1. 安装MCP服务器依赖项:
pip install -r mcp_requirements.txt
  1. 启动MCP服务器:
python mcp_server_gemini.py

🚀 快速入门

选项1:使用批处理文件(Windows)

  1. 跑 start-backend.bat 启动 FastAPI 服务器
  2. 跑 start-frontend.bat 启动 Next.js 开发服务器
  3. 跑 start_mcp_server.bat 启动MCP服务器

选项2:手动启动

  1. 启动后端: cd daily-scheduler/backend && python main.py
  2. 启动前端: npm run dev
  3. 启动MCP服务器: python mcp_server_gemini.py

🤖 人工智能助手集成

MCP服务器为AI助手提供了强大的工具来管理您的日程:

可用工具

  • **获取活动记录(日期字符串)**获取特定日期的所有活动
  • **创建活动(标题, 开始时间, 结束时间, 活动日期)**创建一个新的活动
  • **更新活动(activity_id, ...)**更新现有活动
  • **删除活动(活动ID)**删除一个活动
  • **切换活动完成状态(活动ID)**切换活动完成状态
  • **获取今日活动()**获取今天的所有活动
  • **获取活动概要(日期字符串)**获取带有统计数据的摘要
  • **搜索活动(query, 日期字符串)**按标题搜索活动

示例AI交互

AI: "Create a team meeting from 2:00 PM to 3:00 PM today"
AI: "What activities do I have scheduled for tomorrow?"
AI: "Mark my 10 AM appointment as completed"
AI: "Find all meetings scheduled this week"

📡 API 接口端点

活动

  • GET /activities/{date} - 获取特定日期的活动
  • POST /activities - 创建一个新活动
  • PUT /activities/{id} - 更新一个活动
  • DELETE /activities/{id} - 删除一个活动

WebSocket

  • WS /ws - 实时更新连接

🗄️ 数据库模式

CREATE TABLE activities (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    start_time TEXT NOT NULL,
    end_time TEXT NOT NULL,
    activity_date TEXT NOT NULL,
    completed INTEGER DEFAULT 0,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

🎨 功能概览

时间线界面

  • 带有活动模块的视觉时间线
  • 基于持续时间的高度计算
  • 按颜色编码的完成状态
  • 悬停效果和动画

活动管理

  • 添加具有标题、开始时间和结束时间的新活动
  • 编辑现有活动
  • 将活动标记为已完成/未完成
  • 删除活动并确认

日期导航

  • 日期选择器,便于选择日期
  • 上一天/下一天按钮
  • “今天”快速访问按钮
  • 响应式日期显示

实时更新

  • 用于实时更新的WebSocket集成
  • 活动变化时自动刷新
  • 多会话同步

人工智能集成

  • 自然语言活动创建
  • 智能调度建议
  • 自动化活动管理
  • 语音指令支持(通过AI助手)

🔧 配置

环境变量

  • NEXT_PUBLIC_API_URL后端API URL(默认:http://localhost:8000)

数据库

  • SQLite 数据库文件: daily_scheduler.db
  • 首次运行时自动创建表格
  • 重启后的数据持久性

MCP服务器配置

  • 后端API URL: http://localhost:8000
  • 可通过……进行配置 mcp_server_gemini.py

📱 移动支持

该应用程序完全响应式设计,并针对移动设备进行了优化:

  • 触控友好的界面
  • 响应式网格布局
  • 针对移动设备优化的模态框
  • 滑动手势支持

🎯 使用方法

网络应用

  1. 选择一个日期使用日期选择器或导航按钮
  2. 添加活动点击“添加活动”以创建新的计划项目
  3. 管理活动根据需要编辑、完成或删除活动
  4. 查看时间线以可视化时间线的形式查看您当天的日程安排

AI助手集成

  1. 连接AI助手配置您的AI助手以使用MCP服务器
  2. 自然语言指令用自然语言来管理你的日程
  3. 智能规划让AI帮助您规划和组织活动
  4. 自动化管理人工智能可以处理常规的调度任务

🚀 部署

后端部署

  • 在生产环境中使用 uvicorn 与 gunicorn
  • 配置环境变量
  • 设置数据库迁移

前端部署

  • 为生产构建: npm run build
  • 部署到Vercel、Netlify或任何静态托管服务
  • 为生产环境后端配置API URL

MCP服务器部署

  • 作为独立服务进行部署
  • 配置生产环境后端URL
  • 设置监控和日志记录

🧪 测试

该项目包括全面测试:

后端测试

python -m pytest tests/

前端测试

npm test

集成测试

python test_mcp_final.py

📁 项目结构

├── daily-scheduler/          # Main Next.js application
│   ├── backend/             # FastAPI backend
│   ├── src/                 # Frontend source code
│   └── public/              # Static assets
├── Video Demo/              # Demo video
├── mcp_server_gemini.py     # MCP server implementation
├── tests/                   # Test files
├── *.bat                    # Windows batch files for easy startup
└── requirements.txt         # Python dependencies

🤝 贡献(或“参与贡献”)

  1. 为仓库创建分支(或“克隆仓库”)
  2. 创建一个特性分支
  3. 做出你的更改
  4. 进行彻底测试
  5. 提交一个拉取请求

📄 许可证

这个项目是开源的,并遵循MIT许可证发布。

🔗 链接

  • GitHub 仓库https://github.com/Bahadurahmedkhan/MCPSERVER 的中文翻译可以是:“GitHub 上的 Bahadurahmedkhan 用户的 MCPSERVER 项目”。不过,为了更简洁明了,也可以直接说:“GitHub 地址:Bahadurahmedkhan 的 MCPSERVER 项目”
  • 演示视频: 在Google Drive中查看 或者在当地 Video Demo/ 文件夹
  • 文档请参阅项目目录中的各个README文件

🆘 支持

如需支持或有问题:

  • 在GitHub仓库中创建一个问题
  • 检查项目文件中的文档
  • 查看测试文件中的使用示例

使用Next.js、FastAPI和MCP协议,满怀热爱地打造