35.7k Star开源项目实战：用Claude Code驱动Remotion自动生成视频-北京尧图网络

1. 为什么我要用 Claude Code 驱动 Remotion 做视频自动化Remotion 是一个用 React 代码生成视频的开源项目GitHub 上已经拿到 35.7k Star。它的核心思路很直接把视频当成一个 React 组件树每一帧就是一个 React 渲染结果你用 CSS、SVG、Canvas、WebGL 写什么最终就渲染成什么画面。对于熟悉 React 的开发者来说这意味着不用打开剪辑软件直接用代码控制视频的每一帧内容。Claude Code 在这里扮演的角色是“代码生成与工程编排层”。你不需要手写全部 Remotion 组件而是用自然语言描述分镜、字幕、动画节奏让 Claude Code 生成对应的 React 代码和渲染脚本。两者结合后整个流程变成描述需求 → Claude Code 生成 Remotion 工程代码 → 本地预览 → 渲染导出 MP4。这套方案适合三类人一是会 React 但不想学 Premiere/After Effects 的开发者二是需要批量生成统一风格讲解视频的内容团队三是想把视频生成接入 CI/CD 或自动化流水线的工程团队。我实测下来从零到跑通第一条 30 秒视频大约 40 分钟其中大部分时间花在调整字幕样式和音频对齐上。Remotion 官方已经集成了 Claude Code、Cursor、Gemini 等 AI 工具的调用入口你可以在项目初始化后直接让 Claude Code 读取工程结构并生成新场景。下面我从环境准备开始把整条链路拆成可复制的步骤。2. TaoToken 前置准备给 Claude Code 配置可用的 API 通道Claude Code 本身是一个命令行工具它需要连接一个兼容 Anthropic API 协议的服务端才能工作。TaoToken 提供了这个通道你需要在本地配置 Base URL 和 API Key让 Claude Code 把请求发到正确的地址。先拿到 API Key。打开 TaoToken 控制台进入 API Keys 页面创建一个新 Key复制保存。这个 Key 只显示一次丢了就得重新生成。然后配置 Claude Code 的接入信息。Claude Code 读取的是环境变量或本地配置文件推荐用环境变量方式避免把 Key 写进代码仓库。在终端执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的TaoTokenKey如果你用的是 Windows PowerShell换成$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_API_KEYsk-你的TaoTokenKey配置完成后Claude Code 发出的请求会走 TaoToken 的 API 地址。这里注意一点Base URL 末尾不要加/v1或/chat/completionsClaude Code 会自己拼接路径。我试过加多余后缀结果直接 404。如果你同时用多个模型或工具建议把配置写进~/.claude/settings.json这样每次启动 Claude Code 都会自动读取。文件内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoTokenKey } }保存后重启终端运行claude --version确认工具能正常启动。如果报 401说明 Key 无效或没读到环境变量如果报连接超时检查 Base URL 是否写错。这一步是整个链路的前置条件Key 不通后面全白搭。3. 可复制配置Remotion 工程初始化与 Claude Code 调用脚本Remotion 的工程初始化用一条命令完成npx create-videolatest my-video-project执行后会提示你选择模板选“Blank”或“Hello World”都行我选的是 Blank方便后面让 Claude Code 从零生成组件。进入目录后安装依赖cd my-video-project npm install此时项目结构大致是src/放 React 组件remotion.config.ts是渲染配置package.json里有start和render脚本。你可以先运行npm start打开预览界面确认基础工程能跑起来。接下来让 Claude Code 生成视频组件。在项目根目录启动 Claude Codeclaude然后输入提示词例如在当前 Remotion 项目中创建一个新场景包含 1. 一个 1920x1080 的 Composition时长 30 秒帧率 30 2. 画面中央显示标题文字从透明渐入 3. 底部有字幕条按时间切换三句话 4. 背景用 CSS 渐变颜色从深蓝到紫色。请直接修改 src 目录下的文件并告诉我需要注册到 Root.tsx 的组件名。Claude Code 会读取现有工程结构生成类似src/MyScene.tsx的文件并提示你在src/Root.tsx里注册Composition。注册片段大致如下import { Composition } from remotion; import { MyScene } from ./MyScene; export const RemotionRoot () { return ( Composition idMyScene component{MyScene} durationInFrames{900} fps{30} width{1920} height{1080} / ); };如果你需要音频Remotion 支持Audio组件。让 Claude Code 生成音频调用脚本时可以指定用 edge-tts 生成 MP3再在组件里引用edge-tts --text 欢迎来到自动生成视频教程 --write-media public/audio/intro.mp3然后在 React 组件里import { Audio, staticFile } from remotion; Audio src{staticFile(audio/intro.mp3)} /这里有个细节staticFile的路径是相对于public/目录的不要写成绝对路径。我踩过的坑是把 MP3 放在src/assets下结果渲染时报找不到文件移到public/audio/后正常。4. 验证请求与成功结果从预览到渲染出 MP4配置完成后先做本地预览验证。运行npm start浏览器会打开 Remotion Studio界面类似视频编辑器左侧是 Composition 列表右侧是预览窗口。点击播放按钮你能看到 React 组件逐帧渲染的效果。注意预览界面默认没有声音这是 Remotion Studio 的行为不代表最终视频没音频。我当初因为这个折腾了好一会儿以为音频没生成成功后来导出 MP4 才发现声音正常。预览确认画面和字幕节奏没问题后执行渲染命令npx remotion render MyScene out/video.mp4这条命令会把MyScene这个 Composition 渲染成 MP4 文件输出到out/video.mp4。渲染时间取决于视频长度和复杂度30 秒 1080p 视频大约需要 1 到 2 分钟。渲染完成后用系统播放器打开 MP4检查画面、字幕、音频是否同步。如果你需要批量渲染多个场景可以写一个 Node 脚本调用 Remotion 的renderMediaAPIconst { renderMedia, selectComposition } require(remotion/renderer); async function render() { const composition await selectComposition({ serveUrl: ., id: MyScene, }); await renderMedia({ composition, serveUrl: ., codec: h264, outputLocation: out/video.mp4, }); } render();运行node render.js即可。这种方式适合接入自动化流水线比如每天定时生成日报视频。验证成功的标志有三个一是 Remotion Studio 里能正常播放二是终端渲染命令没有报错三是导出的 MP4 文件能播放且音画同步。三个都通过说明整条链路跑通了。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth第一个高频错误是 401 Unauthorized。报错信息通常是APIError: 401 Unauthorized - invalid api key原因一般是 TaoToken Key 没配置正确或者环境变量没生效。排查步骤先运行echo $ANTHROPIC_API_KEY确认 Key 存在再检查 Base URL 是否写成https://taotoken.net/api不要多加路径最后确认 Key 没有过期或被删除。如果用的是settings.json检查 JSON 格式是否合法逗号多了少了都会导致读取失败。第二个错误是 local proxy failed。Claude Code 在某些网络环境下会尝试走本地代理如果代理没启动或端口不对就会报local proxy failed: connect ECONNREFUSED 127.0.0.1:7890解决办法是检查你的终端代理设置或者直接取消代理环境变量unset HTTP_PROXY unset HTTPS_PROXY然后重新启动 Claude Code。如果你确实需要代理确保代理端口和实际监听端口一致。第三个错误是 reading choices 相关报错通常出现在模型返回格式不符合预期时Error: reading choices - undefined这多半是因为 API 返回的不是标准 OpenAI 格式而 Claude Code 按 OpenAI 格式解析。检查你配置的 Base URL 是否指向了正确的 Anthropic 兼容端点。TaoToken 的/api路径兼容 Anthropic 协议不要混用 OpenAI 的/v1/chat/completions。第四个是 OAuth 相关报错Claude Code 启动时可能提示OAuth token expired or invalid这是因为 Claude Code 默认会尝试 OAuth 登录流程但你用的是 API Key 模式。解决办法是在settings.json里显式关闭 OAuth或者设置环境变量export CLAUDE_CODE_AUTH_MODEapi_key然后重新启动。如果还是报 OAuth 错误删除~/.claude/下的缓存文件再试。另外如果你在 Remotion 项目里同时用了 Cline MCP 或 Codex 的auth.json注意三件套要写全Base URL、Key、Model ID。缺任何一个都会导致调用失败。例如{ baseUrl: https://taotoken.net/api, apiKey: sk-你的TaoTokenKey, model: claude-sonnet-4-20250514 }Model ID 要和你实际使用的模型一致写错了会报 model not found。6. 长期编码与 Agent 场景把视频生成接入自动化流程跑通单条视频后下一步是把它变成可重复的自动化流程。我的做法是把 Remotion 工程和 Claude Code 调用脚本一起放进 Git 仓库用 GitHub Actions 或本地 cron 定时触发。每次触发时Claude Code 根据输入的分镜 JSON 生成新的 React 组件Remotion 渲染成 MP4最后上传到对象存储或直接发布。分镜 JSON 可以长这样{ title: 每日技术简报, scenes: [ { text: 今天聊三个话题, duration: 5 }, { text: 第一Remotion 渲染优化, duration: 8 }, { text: 第二Claude Code 批量生成, duration: 8 } ] }Claude Code 读取这个 JSON 后生成对应的Sequence组件每个场景一个序列时长按duration换算成帧数。这样你只需要维护 JSON视频内容自动更新。对于长期编码场景建议开通 Coding Plan把 Claude Code 的调用额度固定下来避免按次计费带来的成本波动。如果你只是偶尔验证模型效果用模型对话页面就够了如果是团队协作或 CI 集成API Keys 加接入文档是更稳的组合。我在实际使用中把渲染命令封装成了 npm script{ scripts: { render:daily: node scripts/generate-scenes.js npx remotion render DailyBrief out/daily.mp4 } }这样每次只需要运行npm run render:daily整条链路自动完成。踩过的坑是Claude Code 生成的组件偶尔会引用不存在的静态资源导致渲染中断。解决办法是在渲染前加一步校验检查public/下所有被引用的文件是否存在。最后一步验证运行npm run render:daily确认输出 MP4 的时长、分辨率、音频轨道都符合预期。如果一切正常你就拥有了一个用 Claude Code 驱动 Remotion 的自动视频生成流水线。

35.7k Star开源项目实战：用Claude Code驱动Remotion自动生成视频

相关推荐

环形均分纸牌与中位数贪心：从七夕祭到通用解法

同一个项目，两本说明书：README.md 写给人类，AGENTS.md 写给 AI——用 TaoToken 统一 Key 打通双轨协作

从表单到即时通讯：Meta询盘达在外贸B2B社媒广告数据管道的技术实现

更多资讯

IDE插件机制深度解析：从activationEvents到CLI协同

kordoc watch无人值守流水线：文件夹监控+Webhook通知，自动文档转换

插件体系全解析：从plugin.json到TypeScript SDK的实战指南

插件机制深度解析：从IAR到Web IDE的加载失败与激活问题

Node.js 安全实践：在沙箱中运行不可信代码的完整指南（nodebestpractices 解读）

小说改编短剧怎么做：Drama Skills原著分析skill拆解改编价值与分集候选

今日更新

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？