使用说明
基于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包管理器)
后端设置
- 导航到后端目录:
cd daily-scheduler/backend
- 安装Python依赖项:
pip install -r requirements.txt
- 启动 FastAPI 服务器:
python main.py
API 将可用 http://localhost:8000
前端设置
- 安装 Node.js 依赖项:
npm install
- 启动开发服务器:
npm run dev
该应用程序将在 http://localhost:3000
MCP服务器设置
- 安装MCP服务器依赖项:
pip install -r mcp_requirements.txt
- 启动MCP服务器:
python mcp_server_gemini.py
🚀 快速入门
选项1:使用批处理文件(Windows)
- 跑
start-backend.bat启动 FastAPI 服务器 - 跑
start-frontend.bat启动 Next.js 开发服务器 - 跑
start_mcp_server.bat启动MCP服务器
选项2:手动启动
- 启动后端:
cd daily-scheduler/backend && python main.py - 启动前端:
npm run dev - 启动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
📱 移动支持
该应用程序完全响应式设计,并针对移动设备进行了优化:
- 触控友好的界面
- 响应式网格布局
- 针对移动设备优化的模态框
- 滑动手势支持
🎯 使用方法
网络应用
- 选择一个日期使用日期选择器或导航按钮
- 添加活动点击“添加活动”以创建新的计划项目
- 管理活动根据需要编辑、完成或删除活动
- 查看时间线以可视化时间线的形式查看您当天的日程安排
AI助手集成
- 连接AI助手配置您的AI助手以使用MCP服务器
- 自然语言指令用自然语言来管理你的日程
- 智能规划让AI帮助您规划和组织活动
- 自动化管理人工智能可以处理常规的调度任务
🚀 部署
后端部署
- 在生产环境中使用 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
🤝 贡献(或“参与贡献”)
- 为仓库创建分支(或“克隆仓库”)
- 创建一个特性分支
- 做出你的更改
- 进行彻底测试
- 提交一个拉取请求
📄 许可证
这个项目是开源的,并遵循MIT许可证发布。
🔗 链接
- GitHub 仓库https://github.com/Bahadurahmedkhan/MCPSERVER 的中文翻译可以是:“GitHub 上的 Bahadurahmedkhan 用户的 MCPSERVER 项目”。不过,为了更简洁明了,也可以直接说:“GitHub 地址:Bahadurahmedkhan 的 MCPSERVER 项目”
- 演示视频: 在Google Drive中查看 或者在当地
Video Demo/文件夹 - 文档请参阅项目目录中的各个README文件
🆘 支持
如需支持或有问题:
- 在GitHub仓库中创建一个问题
- 检查项目文件中的文档
- 查看测试文件中的使用示例
使用Next.js、FastAPI和MCP协议,满怀热爱地打造