|
1 | 1 | # Coder Studio |
2 | 2 |
|
3 | | -> Agent-First Development Environment — 把 AI Agent、代码编辑、Git 和终端放进同一个浏览器界面 |
| 3 | +> Deploy once, code everywhere. |
| 4 | +> |
| 5 | +> Deploy your coding workspace once, then keep working anywhere. |
4 | 6 |
|
5 | | -## 这是什么 |
| 7 | +[中文说明](README.zh-CN.md) |
6 | 8 |
|
7 | | -Coder Studio 是一个**本地优先的 AI 编码工作台**。你在本机运行服务,通过浏览器访问统一的开发界面,直接与 Claude 或 Codex Agent 协作完成编码任务。 |
| 9 | +Coder Studio lets you launch an AI coding workspace on your machine and keep using it from wherever you are. Claude Code or Codex, files, Git, and terminal all stay in one browser-based workspace, so your workflow is no longer pinned to one desk or one device. |
8 | 10 |
|
9 | | -它不是在线 IDE,也不绑定任何 SaaS 平台——所有代码和数据都留在你的电脑上。 |
| 11 | +Start a task in the office, check progress on your phone during the commute, review changes from a tablet, and continue on a laptop later. Same workspace, same context, no environment handoff. |
10 | 12 |
|
11 | | -## 浏览器访问,不限制设备和地点 |
| 13 | + |
12 | 14 |
|
13 | | -Coder Studio 的界面运行在标准浏览器中,不依赖任何客户端应用。只要本机服务在运行,**任何能连到网络的设备都可以随时打开同一个工作台**: |
| 15 | +## Why Coder Studio |
14 | 16 |
|
15 | | -- **电脑、平板、手机通用**:任何现代浏览器都能访问,不需要安装桌面客户端 |
16 | | -- **随时查看,不受地点限制**:通勤路上用手机浏览器查看 Agent 进度、咖啡厅用平板审阅代码变更、客厅沙发上用笔记本继续操作——同一个工作台,随时打开即用 |
17 | | -- **对移动端友好**:响应式界面设计,手机上可以流畅地浏览文件树、查看 Agent 对话和 Git 变更 |
18 | | -- **团队协作共享**:同一局域网内的同事可以通过浏览器直接查看 Agent 的工作状态 |
| 17 | +- **Deploy once, continue anywhere**: start the service once and move between devices and contexts without breaking your flow |
| 18 | +- **One workspace across devices**: not just remote logs, but the same workspace with Agent, code, Git, and terminal |
| 19 | +- **Agent + Code + Git + Terminal in one place**: less context switching between CLI, editor, diff tools, and shell |
| 20 | +- **Works with Claude Code and Codex**: choose the right Agent per task and run sessions side by side |
| 21 | +- **Runs locally, keeps your data under your control**: the service runs on your machine, without relying on a third-party cloud IDE |
19 | 22 |
|
20 | | -### 典型使用场景 |
| 23 | +## What Problem It Solves |
21 | 24 |
|
22 | | -| 场景 | 怎么做 | |
23 | | -|------|--------| |
24 | | -| 通勤路上查进度 | 出门前启动服务,手机浏览器打开同一工作台查看 Agent 跑到了哪一步 | |
25 | | -| 咖啡厅轻量操作 | 用平板浏览器浏览文件、审阅 Git 变更、查看终端输出 | |
26 | | -| 沙发上继续编码 | 笔记本合上了,手机浏览器打开界面继续和 Agent 对话 | |
27 | | -| 团队共享查看 | 同事通过浏览器访问同一工作台,无需远程控制你的电脑 | |
| 25 | +Traditional AI coding workflows are often tied to the one machine where the CLI is running: |
28 | 26 |
|
29 | | -## 核心优势 |
| 27 | +- The Agent is running, but you still have to stay near the original device |
| 28 | +- Changing locations makes it hard to keep watching context and execution state |
| 29 | +- A phone may show notifications, but not the full coding workspace |
| 30 | +- Switching devices usually means taking over the environment again instead of simply continuing the work |
30 | 31 |
|
31 | | -- **一站式工作流**:Agent 对话、代码编辑、文件树、Git 状态、终端集中在同一个浏览器标签页中 |
32 | | -- **多 Agent 并行**:同时连接 Claude Code 和 OpenAI Codex,按任务选择最合适的引擎 |
33 | | -- **本地优先,数据可控**:服务运行在本地,代码不会上传到第三方云编辑器;会话记录存储在本地 SQLite |
34 | | -- **开箱即用**:一条命令安装,一条命令启动,浏览器自动打开;配合 Provider CLI 即可开始工作 |
| 32 | +Coder Studio turns that into: |
35 | 33 |
|
36 | | -## 它适合谁 |
| 34 | +`Deploy once, code everywhere.` |
37 | 35 |
|
38 | | -- 希望在一个界面中同时与 AI 对话、看代码、跑命令的开发者 |
39 | | -- 想在本地保留所有代码和会话数据、不依赖云端编辑器的团队 |
40 | | -- 需要在手机、平板等设备上随时查看 Agent 进度的开发者 |
41 | | -- 希望团队能通过浏览器共享查看工作状态的协作者 |
42 | | -- 使用 Claude Code 或 OpenAI Codex 并想要图形化管理界面的用户 |
| 36 | +## Quick Start |
43 | 37 |
|
44 | | -## 快速开始 |
| 38 | +```bash |
| 39 | +npm install -g @spencer-kit/coder-studio |
| 40 | +coder-studio open |
| 41 | +``` |
45 | 42 |
|
46 | | -只需几步即可开始: |
| 43 | +Then just: |
47 | 44 |
|
48 | | -### 前置要求 |
| 45 | +1. Click **Open Workspace** in the browser |
| 46 | +2. Choose your project directory and create a Claude or Codex session |
| 47 | +3. Start working with the Agent while viewing files, Git changes, and terminal output in the same workspace |
49 | 48 |
|
50 | | -| 依赖 | 说明 | |
51 | | -|------|------| |
52 | | -| Node.js >= 24.0.0 | 运行 Coder Studio 服务 | |
53 | | -| Claude Code CLI 或 OpenAI Codex CLI | Agent 引擎(可选,但创建会话需要) | |
| 49 | +> You can open the UI and browse files and terminals before installing a provider CLI. See the [Provider Setup Guide](docs/help/providers.md) for details. |
54 | 50 |
|
55 | | -### 安装与启动 |
| 51 | +## How You Can Use It |
56 | 52 |
|
57 | | -```bash |
58 | | -# 1. 全局安装 |
59 | | -npm install -g @spencer-kit/coder-studio |
| 53 | +| Scenario | What you do | |
| 54 | +|----------|-------------| |
| 55 | +| Start work in the office | Launch the service, open the project, create a Claude or Codex session, and let the Agent begin | |
| 56 | +| Check progress during a commute | Open the same workspace on your phone and review Agent output, session status, and Git changes | |
| 57 | +| Review changes while away from your desk | Use a tablet to browse files, inspect diffs, and confirm terminal output | |
| 58 | +| Continue later on another device | Reconnect to the same workspace and keep going with the same context | |
| 59 | +| Share progress with teammates | Let others on the same local network open the workspace in a browser and view the current state | |
60 | 60 |
|
61 | | -# 2. 启动并自动在浏览器中打开 |
62 | | -coder-studio open |
63 | | -``` |
| 61 | +## What You Can Do |
| 62 | + |
| 63 | +- Run multiple Agent sessions inside one workspace |
| 64 | +- Watch the file tree, editor, and Git diff while the Agent is working |
| 65 | +- Open a Shell terminal to validate the Agent's output yourself |
| 66 | +- Use the full multi-panel desktop layout and keyboard shortcuts |
| 67 | +- Monitor workspace and session progress from a phone or tablet |
| 68 | +- Manage themes, language, shortcuts, and provider arguments from Settings |
| 69 | + |
| 70 | +## Works Across Devices |
64 | 71 |
|
65 | | -如果浏览器未自动弹出,可手动访问终端输出的 URL(通常为 `http://localhost:4173`)。 |
| 72 | +Coder Studio runs in a standard browser and does not require a desktop client: |
66 | 73 |
|
67 | | -### 创建第一个会话 |
| 74 | +- **Desktop**: best for full coding sessions, editing files, reviewing diffs, and managing panels |
| 75 | +- **Tablet**: useful for lightweight review, tracking Agent progress, and browsing project state |
| 76 | +- **Phone**: useful for checking session status, terminal output, and workspace changes on the go |
68 | 77 |
|
69 | | -1. 在浏览器界面点击 **"打开工作区"**,选择你的项目目录 |
70 | | -2. 点击 **"创建会话"**,选择 Claude 或 Codex |
71 | | -3. 开始与 Agent 对话、查看文件、执行命令 |
| 78 | +The same service URL can be opened from different devices, and the interface adapts to the screen automatically. |
72 | 79 |
|
73 | | - |
| 80 | +**Desktop Workspace** |
74 | 81 |
|
75 | | -> 没有安装 Provider CLI 也能先打开界面浏览文件和终端,稍后再安装即可。详细安装步骤见 [Provider 配置指南](docs/help/providers.md)。 |
76 | | -### 界面预览 |
| 82 | + |
77 | 83 |
|
78 | | -**PC 端工作区** |
| 84 | +**Mobile Workspace** |
79 | 85 |
|
80 | | - |
| 86 | + |
81 | 87 |
|
82 | | -**移动端工作区** |
| 88 | +## Core Capabilities |
83 | 89 |
|
84 | | - |
| 90 | +- **Workspace**: a local project directory with its own files, terminals, Git state, and sessions |
| 91 | +- **Session**: an independent Claude or Codex Agent run inside a workspace |
| 92 | +- **Terminal**: both Shell terminals and Agent terminals are supported |
| 93 | +- **Git View**: inspect branches, changed files, and diffs directly inside the workspace |
| 94 | +- **Settings**: manage themes, language, shortcuts, and provider startup arguments in one place |
85 | 95 |
|
86 | | -## 常用操作 |
| 96 | +## Documentation |
87 | 97 |
|
88 | | -- **切换主题**:设置页可切换浅色 / 深色主题 |
89 | | -- **切换语言**:设置页支持中文 / 英文切换 |
90 | | -- **查看 Git 状态**:工作区内直接浏览变更文件和 diff |
91 | | -- **终端**:底部面板可打开 Shell 终端运行命令 |
92 | | -- **移动端访问**:同一局域网内用其他设备浏览器访问本机 IP + 端口 |
| 98 | +- [Quick Start](docs/help/quick-start.md) - From install to first launch |
| 99 | +- [App Overview](docs/help/app-overview.md) - Core concepts and capabilities |
| 100 | +- [Provider Setup](docs/help/providers.md) - Install and configure Claude Code / Codex CLI |
| 101 | +- [Desktop Guide](docs/help/desktop-guide.md) - Desktop interface and workflows |
| 102 | +- [Mobile Guide](docs/help/mobile-guide.md) - Phone and tablet usage |
| 103 | +- [Common Workflows](docs/help/workflows.md) - Task-oriented usage patterns |
| 104 | +- [Troubleshooting](docs/help/troubleshooting.md) - Common issues and fixes |
| 105 | +- [CLI Reference](docs/help/cli.md) - Command-line reference |
93 | 106 |
|
94 | | -## 文档 |
| 107 | +## Installation Requirements |
95 | 108 |
|
96 | | -- [快速开始](docs/help/quick-start.md) — 从零到第一次使用的完整流程 |
97 | | -- [App 功能总览](docs/help/app-overview.md) — 核心概念与能力说明 |
98 | | -- [桌面端使用指南](docs/help/desktop-guide.md) — PC 端界面与操作 |
99 | | -- [移动端使用指南](docs/help/mobile-guide.md) — 手机/平板操作指南 |
100 | | -- [Provider 配置](docs/help/providers.md) — Claude Code / Codex CLI 安装与配置 |
101 | | -- [常见工作流](docs/help/workflows.md) — 任务式操作指南 |
102 | | -- [排障指南](docs/help/troubleshooting.md) — 常见问题与排查 |
103 | | -- [CLI 参考](docs/help/cli.md) — 命令行命令速查 |
| 109 | +| Requirement | Notes | |
| 110 | +|-------------|-------| |
| 111 | +| Node.js >= 24.0.0 | Required to run the Coder Studio service | |
| 112 | +| Claude Code CLI or OpenAI Codex CLI | Required to create Agent sessions; files and terminals can still be used before installing a provider | |
104 | 113 |
|
105 | | -## 开发 |
| 114 | +## Contributor Notes |
106 | 115 |
|
107 | | -> **仅限贡献者**:以下命令用于本地开发和贡献代码,普通用户无需执行。 |
108 | | -> 普通用户请直接参考上方的"快速开始"。 |
| 116 | +The following section is for repository contributors. Regular users can start with the quick start and product docs above. |
| 117 | + |
| 118 | +### Local Development |
109 | 119 |
|
110 | 120 | ```bash |
111 | | -# 克隆仓库 |
112 | 121 | git clone https://github.com/spencerkit/coder-studio.git |
113 | | - |
114 | | -# 安装依赖 |
115 | 122 | pnpm install |
116 | | - |
117 | | -# 启动开发环境 |
118 | 123 | pnpm dev |
| 124 | +``` |
119 | 125 |
|
120 | | -# 运行测试 |
121 | | -pnpm acceptance:phase1 |
| 126 | +### Common Commands |
122 | 127 |
|
123 | | -# 构建CLI |
| 128 | +```bash |
| 129 | +pnpm acceptance:phase1 |
124 | 130 | pnpm build:cli |
| 131 | +pnpm lint |
| 132 | +pnpm lint:fix |
| 133 | +pnpm format |
| 134 | +pnpm check |
125 | 135 | ``` |
126 | 136 |
|
127 | | -### 代码质量 |
128 | | - |
129 | | -- `pnpm lint` |
130 | | - 用于查看仓库当前的 lint 诊断,不会改写文件,通常在开始修复前先运行。 |
131 | | -- `pnpm lint:fix` |
132 | | - 用于在修完代码后应用 Biome 可安全自动修复的 lint 修改,再检查生成的 diff。 |
133 | | -- `pnpm format` |
134 | | - 用于统一仓库中的代码格式,提交前运行可以让本次修改与现有格式规则保持一致。 |
135 | | -- `pnpm check` |
136 | | - 用于在发起 PR 或做阶段性验收前运行聚合检查,一次验证格式、lint 和导入整理。 |
137 | | - |
138 | | -## 架构 |
139 | | - |
140 | | -> **贡献者参考**:以下技术栈信息面向代码贡献者,普通用户无需了解。 |
| 137 | +### Tech Stack |
141 | 138 |
|
142 | | -- **Frontend**: React + Vite + Jotai |
143 | | -- **Backend**: Fastify + WebSocket |
144 | | -- **Terminal**: xterm.js + node-pty |
145 | | -- **Editor**: Monaco Editor |
146 | | -- **Storage**: SQLite (`node:sqlite`) |
| 139 | +- Frontend: React + Vite + Jotai |
| 140 | +- Backend: Fastify + WebSocket |
| 141 | +- Terminal: xterm.js + node-pty |
| 142 | +- Editor: Monaco Editor |
| 143 | +- Storage: SQLite (`node:sqlite`) |
147 | 144 |
|
148 | | -## 开发文档 |
| 145 | +### Development Docs |
149 | 146 |
|
150 | 147 | - [PRD](docs/PRD.zh-CN.md) |
151 | 148 | - [Design Spec](docs/superpowers/specs/2026-04-13-coder-studio-design.md) |
152 | | -- [更多开发文档](docs/) |
| 149 | +- [More Docs](docs/) |
153 | 150 |
|
154 | | -## 许可证 |
| 151 | +## License |
155 | 152 |
|
156 | 153 | MIT |
0 commit comments