MCP+CMS演示文稿
关于MCP(模型上下文协议)如何控制内容管理系统的交互式网络演示。
团队
- 艾哈迈德·穆罕默德
- 艾哈迈德·丁达尔
- 阿卜杜勒马利克·卡兹姆
- 索林·扬斯
快速开始
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
部署到Netlify
拖放(最快)
- 跑
npm run build - 首选https://app.netlify.com/drop
- 拖动
dist 文件夹在那里 - 完成!
来自GitHub
- 推送到GitHub
- 连接到Netlify
- 构建命令:
npm run build - 发布目录:
dist
幻灯片概述
| # | 幻灯片 | 内容 |
|---|
| 1 | 标题 | 团队名称、演示文稿标题、动画流程图 |
| 2 | 什么是MCP? | 带有移动数据包的数据流动画 |
| 3 | 问题 | 旋转展示5个痛点 |
| 4 | 解决方案 | 具有打字效果的AI聊天对话 |
| 5 | 创建帖子 | 实时CMS仪表板动画 |
| 6 | 更新帖子 | 实时内容更新 |
| 7 | 删除帖子 | 通过备份安全删除 |
| 8 | 批量操作 | 100个项目处理动画 |
| 9 | 好处 | 4张动画福利卡 |
| 10 | 非常感谢。 | AI循环演示→ MCP → CMS流程 |
导航
| 关键 | 行动 |
|---|
→ / Space / Enter | 下一张幻灯片 |
← / Backspace | 上一张幻灯片 |
Home | 第一张幻灯片 |
End | 最后一张幻灯片 |
| 滑动 | 触摸导航 |
特性
- 美丽的渐变背景
- 漂浮的动画球体
- 玻璃形态卡
- 自动播放动画
- 无代码块-全可视化
- 最后一张幻灯片上的循环演示
- 响应式设计
- 触摸/滑动支持
技术栈
- 反应18
- 维特
- Framer Motion
- TypeScript