Tutorial Video MCP App

教程视频应用

在ChatGPT中以及通过HTTP API内联显示YouTube教程视频。

🎯 提供三种版本

1. 本地MCP服务器 - 原生ChatGPT集成（本地运行）
2. HTTP API服务器 - 部署到Render，随处（远程）可用
3. 应用程序软件开发工具包（Apps SDK） - 视频在ChatGPT中以自定义小部件形式内联显示⭐ 新

📘 （此符号本身无特定含义，若作为书籍标记，可译为“书籍”或保持原样表示书籍的象征） 指南： 部署 | 应用程序SDK设置 | 应用程序SDK概述

你的教程播放列表

这款应用包含4个教学视频：

1. 人工智能简介 | 第一部分 (Xpg2bnO\_-eU)

- 人工智能基础、历史、应用及职业机会

1. 提示工程 - 简介 (p6Yr-DVao3Y)

- 什么是提示工程，以及它为何对AI工具至关重要

1. 提示工程第一部分 - 关键组件 (PAKfEvJSLWA)

- 有效提示的关键要素（上下文、清晰度、角色、语气）

1. 在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 server

2. 在ChatGPT中进行配置

要在ChatGPT中使用这个MCP服务器，您需要在ChatGPT的设置中进行配置：

1. 打开ChatGPT设置
2. 导航至 测试版功能 或者 集成
3. 添加具有以下配置的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-sdk

2. 连接到ChatGPT

1. 启用 开发者模式 在ChatGPT设置中
2. 在ChatGPT中添加MCP服务器
3. 问：“给我看看教程视频。”

视频内联显示！ 🎉（庆祝、欢呼的符号，无直接对应中文词汇，可表达为“庆祝”或“欢呼”等含义）

看 APPS-SDK-GUIDE.md 以获取完整的设置说明。

______________________________________________________________________

选项3：HTTP API服务器

最适合用于远程部署、自定义GPT、与他人共享

1. 安装依赖项

npm install

2. 本地测试（可选）

npm run start:api
# Visit http://localhost:3000

3. 部署到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视频ID
• title （可选）：为视频设置自定义标题
• 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，国际安全理事会）