remotion-claude-agent-demo 0.1.0

package/README.md

@@ -0,0 +1,160 @@
+# Remotion Claude Agent
+
+基于 Remotion 和 Claude Agent SDK 的视频创作系统。通过 AI 编排实现从自然语言需求到产品演示视频的自动化生产。
+
+## 项目概述
+
+本项目是一个 **AI 驱动的视频生产平台**，支持将产品教程、Demo 演示、SaaS 介绍等需求转化为高质量的视频内容。
+
+### 核心能力
+
+- `perceiver` - 浏览器感知/录屏，获取内容理解
+- `creator` - 生成脚本、分镜、风格配置
+- `crafter` - 协调素材下载、语音合成、视频渲染
+- `composer-agent` - Remotion 视频编排与渲染
+
+### 工作流程
+
+```
+用户需求
+    ↓
+1. Perceiver → 浏览器感知/录屏，获取内容理解
+    ↓
+2. Creator → 生成脚本、分镜、风格配置
+    ↓
+   [用户确认方案]
+    ↓
+3. Crafter → 协调素材下载、语音合成、视频渲染
+    ↓
+最终视频输出
+```
+
+## 项目结构
+
+```
+remotion-claude-agent/
+├── apps/              # Web 应用
+│   └── web/          # Next.js 前端
+├── workspace/        # 工作区
+│   ├── .claude/      # Claude Agent 配置
+│   │   ├── agents/   # 子代理（perceiver, creator, crafter, composer-agent）
+│   │   └── skills/   # 技能库（语音合成、字幕处理、BGM 等）
+│   └── projects/     # 项目产出目录
+└── openspec/         # 规格说明书
+    ├── specs/        # 能力规格
+    └── changes/      # 变更提案
+```
+
+## 技术栈
+
+- **前端**: Next.js (App Router), React, TypeScript, Tailwind CSS
+- **视频引擎**: Remotion (React-based video framework)
+- **AI 编排**: Claude Agent SDK
+- **语音合成**: 阿里云 DashScope (cosyvoice-v3-plus)
+- **协议**: A2A (Agent-to-Agent) Protocol v0.3.0
+
+## 开发指南
+
+### 环境配置
+
+```bash
+# 安装依赖
+pnpm install
+
+# 配置环境变量
+cp .env.example .env
+```
+
+### 启动开发服务器
+
+```bash
+# 启动 Web 应用
+pnpm dev
+
+# 启动指定端口
+pnpm dev --port 3001
+```
+
+### CLI 使用（npm 分发）
+
+```bash
+# 全局安装
+npm install -g remotion-claude-agent-demo
+
+# 设置默认 workspace（持久化）
+remotion-agent config set workspace /path/to/workspace
+
+# 设置环境变量（持久化）
+remotion-agent env set ANTHROPIC_API_KEY your_key
+
+# 交互式初始化（写入配置）
+remotion-agent init
+
+# 启动 Web UI（前台）
+remotion-agent web start --port 3000
+```
+
+配置文件路径：
+- macOS/Linux：`~/.remotion-claude-agent/config.json`
+- Windows：`%USERPROFILE%\\.remotion-claude-agent\\config.json`
+
+说明：
+- 未配置 workspace 时，默认使用启动命令时的 `pwd`
+- 首次启动会自动初始化 workspace 下的 `.claude` 配置目录
+
+### OpenSpec 使用
+
+```bash
+# 查看活动提案
+openspec list
+
+# 查看规格列表
+openspec list --specs
+
+# 验证变更
+openspec validate [change-id] --strict
+
+# 归档已完成的变更
+openspec archive [change-id] --yes
+```
+
+## 技能库 (Skills)
+
+| 技能 | 描述 |
+|------|------|
+| `voice-synthesizer` | 使用阿里云 cosyvoice-v3-plus 语音合成，支持多音色、SSML |
+| `subtitle-processor` | 从 VTT 文件生成 Remotion 字幕数据 |
+| `timeline-generator` | 从 VTT 自动计算场景时长和帧数 |
+| `bgm-manager` | 背景音乐管理与音量控制 |
+| `asset-validator` | 素材验证，确保渲染前完整性 |
+| `audio-video-sync` | 音视频同步，确保画面与语音完美同步 |
+
+## 后台任务
+
+支持独立运行的后台任务，通过 SSE 活动流实时通知前端：
+
+- 并发控制：多个任务可并行执行
+- 进度追踪：通过 TodoWrite 输出任务进度
+- 自动投递：结果自动写回主会话
+
+## A2A 协议
+
+遵循 Agent-to-Agent Protocol v0.3.0，支持：
+
+- `/messages/stream` - 流式消息处理
+- `/background-tasks/[jobId]/cancel` - 取消后台任务
+- `/events/stream` - 活动事件流（支持断线补课）
+
+## 约定
+
+### 文档语言
+- 项目内的需求/设计/任务/规格等文档默认使用中文
+- 保留 OpenSpec 固格式关键字（如 `## ADDED Requirements`）
+
+### SDK 优先
+- 优先使用 Claude Agent SDK 原生能力
+- 仅在原生能力无法满足时，才引入自定义实现
+
+## 许可证
+
+MIT

package/apps/web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/apps/web/env.example

@@ -0,0 +1,20 @@
+# Anthropic API 配置（Server-side）
+ANTHROPIC_API_KEY=
+ANTHROPIC_BASE_URL=
+ANTHROPIC_DEFAULT_HAIKU_MODEL=
+ANTHROPIC_DEFAULT_OPUS_MODEL=
+ANTHROPIC_DEFAULT_SONNET_MODEL=
+ANTHROPIC_MODEL=
+ANTHROPIC_REASONING_MODEL=
+
+# A2A
+A2A_VERSION=0.3.0
+A2A_AGENT_NAME=Remotion Demo Agent (MVP)
+A2A_AGENT_DESCRIPTION=Local A2A agent for chat + future demo video generation
+
+# agent-browser (local)
+# Set to 1 to open a visible browser window by default.
+AGENT_BROWSER_HEADED=1
+
+# Client-side
+NEXT_PUBLIC_A2A_BASE_URL=http://localhost:3000

package/apps/web/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/apps/web/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;