AI工具站拆解系列05：零基础复刻月访问 360 万的 Youtube 视频分析工具（含项目代码）
这是一期喂饭教程，我将带大家一起来复刻并上线一个视频分析工具，让零基础的新手也能30分钟发布一个视频分析工具，最后我还提供了源码给大家参考学习。 这次我们“从 0 到 1”的实战，就是拿它最能帮助视频创作者的工具下手——把一个 YouTube 链接丢进来，立刻得到结构化的内容分析与可执行的改进建议。
这是一期喂饭教程，我将带大家一起来复刻并上线一个视频分析工具，让零基础的新手也能30分钟发布一个视频分析工具，最后我还提供了源码给大家参考学习。
vidiq.com，一个全面的 YouTube 视频分析工具，其插件也是 YouTuber 们家喻户晓了，上个月访问量360万。
这次我们“从 0 到 1”的实战，就是拿它最能帮助视频创作者的工具下手——把一个 YouTube 链接丢进来，立刻得到结构化的内容分析与可执行的改进建议。
全程用 v0 做口喷开发（通过对话），不折腾本地环境，并给出最小可用的 API 请求样例和部署方法，非常适合零基础的新手。
这次的目标仅是功能上实现内容，我们不会在界面上复刻，暂时不介入用户登录和支付，后期想要打磨效果需要持续迭代提示词。
先来看看最终实现的效果和能力吧：①可以获得视频详细信息；②分析结果和改进建议；③可以保存分析历史；④字幕的展示和下载。
一、MVP打造
对于我们的老朋友v0，在之前的复刻文章《AI工具站拆解系列01：AI图片网站 Flux1.ai 拆解及复刻》flux和《AI工具站拆解系列02：排名第一的 Nano Banana 网站流量全面拆解及复刻》都有用到，这里就不做介绍，基本上注册按照提示即可对话使用。
1.1 前端界面
第一步我们先设计一个工具界面，并制作一个模拟的结果页面，此时我们不加入任何 API，仅仅纯前端界面。
输入提示词：
创建一个简洁的工具网站 Demo：用户输入一个 YouTube 视频链接后，系统会获取该视频的基本信息（标题、时长、播放量等）。
1. 如果视频有字幕，则提取字幕内容进行语义分析；如果没有字幕，则进行通用内容分析，并标注“无字幕”。
2. 给出多个维度的分析结果（例如：内容清晰度、信息价值、观众吸引力、表达风格），并生成评分和改进建议。
3. 页面结构要简单直观：输入框 + 分析结果展示卡片。
4. 关于 youtube api 和 AI 大模型的 API 我稍后给你，你先帮我实现前端界面，可以模拟效果，要有设计感！
此时输入任意内容点分析，即可看到结果页：
前端页面最开始不用花太多精力，因为具体的分析框架，我们需要通过实际内容和 prompt 输出后再进行优化。
1.2 后端与 API
此时我们需要去注册两个 API 服务，一个用来获取 youtube 视频的详细内容，一个用来分析 youtube 视频内容。
Google 对于 YouTube 视频有提供免费的 API 供我们获取数据：YouTube Data API v3
先来到 console.cloud.google.com，点击左上角的菜单弹出后，选择“API和服务”选择“库”（或 library）：
搜索 youtube 后，我们选择第一个结果，这个API不需要用户登录授权，可以分析 YouTube 上所有视频数据。而下面的分析API则需要频道所有者授权访问自己的数据，但获得的数据会更加丰富，包括视频的所有播放数据等。
进入后点击“启用”，进入页面后从左侧选择“凭证”，进入后从上方点击创建凭据→API密钥：
创建的内容按需选择即可得到 API key
接下来我们去创建一个大模型的API key，这里就不做介绍了，你可以选择 deekseek r1 等国产模型，也可以选择海外模型，为了获得更好效果，当然是建议用 Google 自家的 API 来分析，所以我去 Openrouter 上注册了 google/gemini-2.5-flash-lite。
然后我们可以把 API Key 和相关的API示例以及文档都发给 v0 对话框（prompt中的示例换成你自己模型的示例）：
youtube 数据获取的 API KEY：xxxxxxxx
参考文档：https://developers.google.com/youtube/v3/getting-started
openrouter API KEY:sk-or-v1-xxxxxxxxx
使用模型：google/gemini-2.5-flash-lite
API示例：
curl https://openrouter.ai/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $OPENROUTER_API_KEY" \ -d '{ "model": "google/gemini-2.5-flash-lite", "messages": [ { "role": "user", "content": [ { "type": "text", "text": "What is in this image?" }, { "type": "image_url", "image_url": { "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg" } } ] } ] }'
P.S. 这里最稳妥的做法，应该先去 postman 测试 API 的输入和返回，再一起给到AI。
开发完后测试链接分析功能，可能会遇到报错，这时候直接让 v0 修复即可，也可以根据结果展示效果进行一些结构、界面的小修改：
这个版本如果要做极简 MVP 已经可以使用，我这边会继续进行优化，再加上字幕下载、首页、历史分析的本地缓存，下面给大家增加亿点点细节。
二、优化细节
2.1 字幕下载
如果你想要下载字幕，但是发现 Google 不允许，你可以使用第三方 API，比如我这里使用了 Rapid 平台的 Youtube Transcript，这上面的 API 一般都有一些免费额度，付费的大家根据需要使用：
为了不浪费 API，我设置了需要点击才请求字幕的要求：
现在我给你提供一个第三方的字幕下载服务，用户查看字幕查看和下载时，提醒用户可以点击查看字幕，点击后使用第三方API请求字幕内容，最终展示并能提供下载。
API示例输入：
curl --request GET \ --url 'https://youtube-transcript3.p.rapidapi.com/api/transcript?videoId=khv0xWIHXEo' \ --header 'x-rapidapi-host: youtube-transcript3.p.rapidapi.com' \ --header 'x-rapidapi-key: xxxxxxxxxxxxx'
示例输出：
{ "success": true, "transcript": [ { "text": "I can almost hear the gears turning in", "duration": 3.24, "offset": 0.04, "lang": "en" } ] }
效果如下：
2.2 增加动画进度条
使用的时候发现分析过程还是很慢，让用户等待会产生焦虑，不知道何时才能完成，但其实我们知道整个流程，于是我们可以让流程直观展示，给用户明确的进度信息，减少焦虑提升体验。
分析等待的时间有点过长了，尽量把真实处理流程暴露出来，特别是获取视频信息-分析字幕这些步骤细化，让用户焦虑减少
2.3 补充 Landing Page
如果直接展示一个输入框，用户进入网页也不知道能做什么，最好有一些详细的介绍，方便用户快速了解我们的产品。
现在帮我给网站增加标准的 header 和 footer，并增加部分 Landing Page 内容，首页包含当前的输入框，但是用户点击分析后进入 app 路由页面。
效果：
2.4 增加分析历史
因为还没有做登录，那么为了方便使用，可以让应用把历史分析数据缓存到本地，提供一个分析历史的列表进行切换：
在app路由页面的左侧提供分析历史，分析过的视频内容呈现在列表中，可以点击切换，并且用户输入新地址解析后生成一条新的记录，将历史数据缓存到浏览器本地
效果：
三、发布产品
在 v0 上发布非常简单方便，甚至你可以没有 github 账号，点击右上角的 Publish 即可。当然你也可以点击 Github 按钮链接到你的仓库中，也可以选择直接将代码下载到本地。
该工具已经发布，大家可以访问下面地址免费测试使用：
ameng-youtube-video.vercel.app
P.S. 如果大家对 YouTube 赛道感兴趣或正在尝试，我还做过一个免费工具可以分析不同 YouTube 频道的数据，并测算他们的盈利情况，感兴趣的可以去尝试：youtubewise.com
这次的复刻演示内容，最开始来自生财有术内部航海的直播教学，我把原本直播内容改成了文章方便更多人参考学习，项目的源代码我也会开源放在 Github 仓库，如果感兴趣可以联系我获取。
好啦今天的实战复刻就到这里，如果大家对这类工具感兴趣，可以继续深入挖掘，复刻更多 VidIQ 的功能，打造另一个视频分析利器！
