1. 为什么要在 Claude Code 里用 Bun 跑 RemotionRemotion 是一个用 React 组件写视频的开源框架它把「第几帧显示什么」变成纯函数你写的是 JSX导出的是 MP4。Claude Code 是 Anthropic 的命令行编码助手能读你项目里的文件、生成组件、跑命令。Bun 是新一代 JavaScript 运行时兼包管理器装依赖和启动 dev server 比传统方式快不少。三者叠在一起就是一条「用自然语言描述画面 → 生成 React 组件 → 本地渲染出 MP4」的链路。这套组合适合谁写过一点 React、想批量做数据驱动视频的开发者做营销物料、需要快速出竖屏短视频的运营以及想把 changelog、周报、产品发布做成视频但不想学 After Effects 的团队。核心检索词就三个Remotion 负责渲染Claude Code 负责生成代码Bun 负责驱动项目。我试过把整条链路拆成「配置骨架 命令 校验」三段来验证发现最容易卡住的不是写组件而是 Key 和 API 通道没接对导致 Claude Code 在生成代码时反复超时。所以这篇的重点放在怎么用 TaoToken 统一 Key/API 通道接进 Claude Code再用 Bun 把 Remotion 项目跑起来最后确认 MP4 真的落地。整篇按「问题场景 → 前置准备 → 可复制配置 → 验证请求 → 错排查 → 下一步」推进配置部分给的是能直接抄的骨架命令都带参数说明你照着敲就能复现。2. 前置准备TaoToken 统一 Key 与 Claude Code 接入TaoToken 在这里的角色是「统一 Key/API 通道」你不用为每个模型或工具单独配一套凭证而是拿一个 Key通过统一的 API 入口去调用。对 Claude Code 这种需要稳定对话通道的工具来说好处是配置集中、切换模型时不用改一堆环境变量。先拿 Key。打开控制台页面登录后创建 API Key复制出来先存好后面配置要用控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI Key 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 的基础地址是https://taotoken.net/api注意这个地址不带任何查询参数配置里直接写它就行。如果你要查接入细节文档页在这里接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentClaude Code 的配置分两层一层是它自己的settings.json管模型和权限另一层是项目里的config.toml管 Remotion 项目的构建参数。很多人只配了第一层结果 Claude Code 能对话但生成不了能跑的代码就是因为项目层没对齐。注意Key 只存在本地配置文件里不要提交到 Git。建议把settings.json里含 Key 的字段用环境变量引用或者把整个文件加进.gitignore。环境上你还需要 Bun。装好之后bun --version能打印版本号就说明运行时就绪。Node.js 不是必须但有些 Remotion 依赖会检测它装上更稳。3. 可复制配置settings.json 与 config.toml 骨架这一节给两份能直接抄的配置。先建项目目录再放配置顺序别反否则 Claude Code 读不到项目上下文。3.1 初始化项目与目录结构mkdir remotion-claude-demo cd remotion-claude-demo bun init -y bun create video my-appbun create video my-app会拉取 Remotion 的官方模板生成my-app子目录里面有src/、public/、package.json和remotion.config.ts。目录大致长这样remotion-claude-demo/ ├── .claude/ │ └── settings.json ├── my-app/ │ ├── public/ │ │ └── logo.png │ ├── src/ │ │ ├── Root.tsx │ │ └── Composition.tsx │ ├── config.toml │ └── package.json └── package.json3.2 Claude Code 的 settings.json在项目根目录建.claude/settings.json把模型通道指向 TaoToken 的统一入口{ model: claude-sonnet-4-5, env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoTokenKey }, permissions: { allow: [ Read, Write, Bash(bun:*), Bash(npx:*) ] } }几个字段说明model填你要用的模型标识ANTHROPIC_BASE_URL固定写 TaoToken 的 API 地址ANTHROPIC_API_KEY换成你刚复制的 Key。permissions.allow里放开bun和npx是为了让 Claude Code 能直接帮你跑安装和渲染命令不然每步都要手动确认。3.3 Remotion 项目的 config.toml在my-app/下建config.toml管渲染输出和并发[render] output out/video.mp4 codec h264 crf 18 concurrency 4 [entry] point src/index.ts [browser] executable chromecrf越小画质越高、文件越大18 是画质和体积的平衡点concurrency按你机器核数调4 核就写 4。entry.point指向 Remotion 的入口文件模板里通常是src/index.ts如果你改过文件名记得同步。提示config.toml是项目级配置Claude Code 生成组件时会读它来决定输出路径和编码参数。两份配置都放好后重启一次 Claude Code 会话让它重新加载。4. 验证请求从 React 组件到 MP4 的完整链路配置就位后跑一遍最小链路确认「生成代码 → 预览 → 导出」三步都通。4.1 让 Claude Code 生成一个组件在项目根目录启动 Claude Code输入类似这样的提示读取 my-app/public 下的 logo.png在 my-app/src 里生成一个 5 秒的 Remotion 组件 标题从下方滑入logo 在右下角淡入背景用蓝到紫的渐变。 分辨率 1080x192030fps适合竖屏短视频。Claude Code 会读config.toml和现有Root.tsx生成一个新组件并注册到合成列表里。生成完你检查my-app/src/下是否多了文件Root.tsx里是否多了Composition注册。4.2 用 Bun 启动预览cd my-app bun run devbun run dev会启动 Remotion Studio终端会打印一个本地地址浏览器打开就能看到时间轴预览。这一步验证的是组件能不能正常渲染帧。如果页面白屏先看终端有没有报错多半是组件里引用了不存在的资源路径。4.3 导出 MP4 并校验产物预览没问题后导出bunx remotion render src/index.ts MyComp out/video.mp4 --codech264参数说明src/index.ts是入口MyComp是你在Root.tsx里注册的合成 IDout/video.mp4是输出路径--codech264指定编码。跑完后校验产物ls -lh out/video.mp4 ffprobe -v error -show_entries formatduration,size -of defaultnoprint_wrappers1 out/video.mp4ls看文件大小是否合理5 秒 1080x1920 通常几 MBffprobe看时长和容器信息。如果ffprobe报「Invalid data found」说明渲染中途失败回去看渲染日志。4.4 模型对话侧验证如果你只想先确认 Key 和通道是通的不想跑整个渲染可以直接在模型对话页发一条测试消息模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content能正常返回内容说明 Key 和 API 通道没问题剩下的就是项目层的事。5. 本篇常见错排查5.1 Claude Code 报连接超时或 401先查settings.json里的ANTHROPIC_BASE_URL是不是写成了带路径的地址。正确写法是https://taotoken.net/api不要在后面拼/v1之类。再确认 Key 没有多余空格复制时容易带上换行。5.2 bun create video 卡住或依赖装不上多半是网络或缓存问题。先清缓存再重试bun pm cache rm bun create video my-app如果还是慢检查~/.bunfig.toml里有没有配镜像源。装完后cd my-app bun install单独跑一次确认依赖树完整。5.3 渲染报「Composition not found」说明Root.tsx里注册的合成 ID 和你命令里写的不一致。打开Root.tsx看Composition id... /的 id 值命令里原样照抄。大小写敏感MyComp和mycomp是两个东西。5.4 导出 MP4 但播放器打不开先ffprobe看容器信息。如果时长是 0说明渲染在写文件前就失败了回看渲染日志里的第一处报错。如果时长正常但播放花屏把crf调大一点比如 23再渲染一次排除编码器兼容问题。5.5 中文标题显示成方块Remotion 渲染用的是无头浏览器系统里没装中文字体就会缺字。在public/放一个.ttf字体文件组件里用font-face或staticFile()引用它别依赖系统字体。6. 下一步长期编码与 Agent 场景单次渲染跑通后如果你打算把这条链路用在日常开发里——比如每周自动生成 changelog 视频、批量产出营销素材——建议把 Claude Code 的调用方式从「临时对话」升级成「长期编码计划」。Coding Plan 适合这种持续、多轮的编码与 Agent 场景配置一次就能反复用Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content接入细节和参数说明都在文档里遇到配置问题优先翻文档而不是猜接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content最后给一个实用技巧把out/加进.gitignore但把config.toml和Root.tsx提交上去。这样团队里任何人拉下代码配好自己的 Key跑一条bunx remotion render就能复现同样的视频。视频即代码版本控制才真正有意义。