教程视频应用
在ChatGPT中以及通过HTTP API内联显示YouTube教程视频。
🎯 提供三种版本
- 本地MCP服务器 - 原生ChatGPT集成（本地运行）
- HTTP API服务器 - 部署到Render，随处（远程）可用
- 应用程序软件开发工具包（Apps SDK） - 视频在ChatGPT中以自定义小部件形式内联显示⭐ 新
📘 （此符号本身无特定含义，若作为书籍标记，可译为“书籍”或保持原样表示书籍的象征） 指南： 部署 | 应用程序SDK设置 | 应用程序SDK概述
你的教程播放列表
这款应用包含4个教学视频：
- 人工智能简介 | 第一部分 (Xpg2bnO\_-eU)
- 人工智能基础、历史、应用及职业机会
- 提示工程 - 简介 (p6Yr-DVao3Y)
- 什么是提示工程，以及它为何对AI工具至关重要
- 提示工程第一部分 - 关键组件 (PAKfEvJSLWA)
- 有效提示的关键要素（上下文、清晰度、角色、语气）
- 在Google Gemini上测试提示（或指令） (ng5lAQay4qI)
- 在Gemini上进行实时测试和提示词实验
快速入门
选项1：本地MCP服务器
最适合于原生ChatGPT MCP集成
1. 启动MCP服务器
npm run start或者单独运行：
npm run build:web # Build web component first
npm run dev # Then start the server2. 在ChatGPT中进行配置
要在ChatGPT中使用这个MCP服务器，您需要在ChatGPT的设置中进行配置：
- 打开ChatGPT设置
- 导航至 测试版功能 或者 集成
- 添加具有以下配置的MCP服务器：
{
"mcpServers": {
"tutorial-videos": {
"command": "node",
"args": ["C:/Users/igour/Downloads/test/server/index.js"],
"cwd": "C:/Users/igour/Downloads/test"
}
}
}注： 根据您的实际安装目录调整路径。
3. 在ChatGPT中使用工具
一旦配置完成，您就可以在ChatGPT中使用这些工具：
列出可用视频
Use the list_tutorial_videos tool to show me available tutorials播放视频
Show me the AI introduction video using show_tutorial_video或者通过ID指定任何视频：
Display video Xpg2bnO_-eU with show_tutorial_video______________________________________________________________________
选项2：应用程序SDK（在ChatGPT中嵌入小部件）⭐ 新
最适合于在ChatGPT中以自定义用户界面形式内嵌显示视频
1. 构建并启动
npm run start:apps-sdk2. 连接到ChatGPT
- 启用 开发者模式 在ChatGPT设置中
- 在ChatGPT中添加MCP服务器
- 问：“给我看看教程视频。”
视频内联显示！ 🎉（庆祝、欢呼的符号，无直接对应中文词汇，可表达为“庆祝”或“欢呼”等含义）
看 APPS-SDK-GUIDE.md 以获取完整的设置说明。
______________________________________________________________________
选项3：HTTP API服务器
最适合用于远程部署、自定义GPT、与他人共享
1. 安装依赖项
npm install2. 本地测试（可选）
npm run start:api
# Visit http://localhost:30003. 部署到Render
见 DEPLOYMENT.md 翻译为中文是：“部署说明.md” 或 “部署文档.md”（具体翻译可能根据上下文调整，但基本意思是指一个关于部署的Markdown文件） 完整的部署说明包括：
- 推送到GitHub
- 部署到 Render（免费版）
- 使用您的API创建自定义GPT
- API端点和用法
快速API端点 （部署后）：
GET /api/videos- 列出所有视频GET /api/videos/:id- 获取视频详情GET /api/player/:id- 查看视频播放器
______________________________________________________________________
可用工具（MCP版本）
list_tutorial_videos
列出所有4个教程视频及其ID和描述。
示例：
list_tutorial_videos()show_tutorial_video
在聊天中以内联方式显示YouTube视频。
参数：
videoId（必填）：YouTube视频IDtitle（可选）：为视频设置自定义标题description（可选）：自定义描述
示例：
show_tutorial_video({
videoId: "Xpg2bnO_-eU",
title: "AI Introduction",
description: "Learn the basics of AI"
})项目结构
.
├── server/
│ └── index.js # MCP server (local)
├── api/
│ └── server.js # HTTP API server (for deployment)
├── web/
│ ├── src/
│ │ └── index.js # Web component source
│ ├── dist/
│ │ └── tutorial-video-player.js # Built web component
│ └── build.js # Build script
├── package.json
├── render.yaml # Render deployment config
├── README.md # This file
└── DEPLOYMENT.md # Full deployment guide发展
重建Web组件
如果你修改了网页组件：
npm run build:web添加更多视频
编辑 server/index.js 并更新 TUTORIAL_VIDEOS 数组：
const TUTORIAL_VIDEOS = [
{
id: 'YOUR_VIDEO_ID',
title: 'Your Video Title',
description: 'Your video description',
},
// ... more videos
];然后重新构建：
npm run build:web
npm run dev故障排除
服务器无法启动
- 确保你已经跑了
npm install首先 - 检查是否已安装 Node.js：
node --version
视频无法显示
- 验证构建是否成功：检查
web/dist/tutorial-video-player.js存在 - 确保视频ID正确（来自YouTube URL的11个字符）
ChatGPT无法连接
- 验证MCP服务器是否正在运行
- 检查ChatGPT MCP配置中的路径是否与您的安装路径一致
- 添加MCP服务器后重启ChatGPT
许可证
ISC（International Security Council，国际安全理事会）