AI导哈

教程视频应用

一个在ChatGPT内联显示YouTube教程视频并通过HTTP API提供服务的应用，适用于教育和学习场景。

  • by JaipuriaAI
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 JaipuriaAI/tutorial-video-mcp-app

使用说明

教程视频应用

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

🎯 提供两个版本

  1. 本地MCP服务器 - 原生ChatGPT集成（本地运行）
  2. HTTP API服务器 - 部署到Render，随时随地（远程）使用

📘（书本图标，无具体文字含义，可理解为“书本”或保持原样表示一个书本的图形） 完整部署指南 →

你的教程播放列表

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

  1. 人工智能入门 | 第一部分 (Xpg2bnO_-eU)

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

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

    • 什么是提示工程，以及它为何对人工智能工具至关重要

  3. 提示工程第一部分 - 关键要素 (PAKfEvJSLWA)

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

  4. 在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中进行配置

要使用此MCP服务器与ChatGPT配合，您需要在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：HTTP API服务器

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

1. 安装依赖项

npm install

2. 在本地进行测试（可选）

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

3. 部署到Render

看 DEPLOYMENT.md 翻译为中文是：“部署说明.md” 或 “部署文档.md”，具体取决于上下文，但通常“DEPLOYMENT”指的是与部署相关的说明或文档，“.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（互联网安全中心）

相关 MCP