跳到主要内容
项目档案应用项目

sunpix/claude-code-web 是什么?用途、安装与使用指南

Claude Code Web 是一个为 Anthropic Claude Code CLI 设计的浏览器 Web 界面,提供实时聊天、语音交互、图像拖放和待办事项管理等功能。本文介绍其安装步骤、使用方法、配置选项及安全注意事项,帮助开发者快速在浏览器中使用 Claude Code。

76Star 于 2026年2月7日2026年9月10日 更新

AI 总结

Claude Code Web 是一个基于 Nuxt 4 构建的浏览器端 Web 界面,为 Anthropic 的 Claude Code CLI 提供图形化操作环境,集成语音交互、图像拖放和任务管理等功能,提升开发者使用 Claude Code 的效率和体验。

中文项目介绍

Claude Code Web 是一个专为 Anthropic 的 Claude Code CLI 设计的浏览器端 Web 界面,旨在通过图形化方式降低命令行工具的使用门槛,并提供增强的交互功能。 该项目解决了 Claude Code CLI 仅限命令行操作的局限性,为开发者提供更直观的实时聊天、项目管理及工具集成环境,同时集成了语音输入、文本转语音、拖放图片、热键和内置待办事项侧边栏等特性,显著提升编码辅助体验和效率。 适用场景包括:在浏览器中与 Claude Code 进行实时代码辅助对话;通过语音输入或文本转语音进行免打字交互;拖放图片讨论视觉问题;使用待办事项侧边栏管理开发任务。尤其适合希望避免命令行操作、偏好图形界面或需要多模态交互的开发者。 技术层面,项目基于 Nuxt 4 框架构建,采用移动优先的 PWA 设计,支持通过 npm 全局安装部署。运行时可通过环境变量灵活配置,如修改端口 (PORT)、设置子路径 (APP_BASE_URL) 或启用 Whisper 麦克风支持 (OPENAI_API_KEY)。注意,项目无内置认证机制,需在受控网络环境中运行以确保安全。

详细信息与使用说明

1. 项目定位与用途

Claude Code Web 是一个基于 Nuxt 4 构建的浏览器端 Web 界面,专为 Anthropic 的 Claude Code CLI 提供图形化前端。它允许用户通过浏览器与 Claude Code 进行实时交互,同时集成了语音输入、文本转语音、拖放图片、热键和内置待办事项侧边栏等增强功能,采用移动优先的 PWA 设计,旨在提升开发者的代码辅助体验和工作效率。项目可通过 npm 全局安装,快速部署运行。

2. 解决的问题

Claude Code CLI 作为命令行工具,使用门槛较高且交互方式有限。Claude Code Web 通过提供直观的 Web 界面,降低了操作复杂度,并解决了命令行无法直接支持语音、图像等多模态输入的问题。此外,内置的待办事项侧边栏帮助用户管理开发任务,使 Claude Code 更融入日常开发流程,从而提升整体开发效率。

3. 适用场景

该项目适用于希望在浏览器中使用 Claude Code 的开发者,特别是那些不熟悉命令行操作或偏好图形界面的用户。典型场景包括:进行实时代码辅助对话、通过语音输入快速提问、拖放图片讨论视觉错误、使用热键加速操作、以及通过待办事项侧边栏跟踪开发任务。得益于 PWA 设计,也适合需要移动端访问的场景。

4. 安装方式

安装 Claude Code Web 需要先确保系统已安装 Node.js 18 或更高版本,并已设置好 Claude Code CLI。然后通过 npm 全局安装包:运行命令 `npm install -g @sunpix/claude-code-web`。安装完成后,即可使用 `claude-code-web` 命令启动服务。注意,安装过程依赖于 npm 和 Node.js 环境,具体版本要求已在 README 中明确。

5. 使用方式

启动服务后,在浏览器中访问 `http://localhost:3000` 即可使用 Web 界面。默认情况下,服务运行在 3000 端口,但可通过环境变量修改:`PORT=8080 claude-code-web` 更改端口。若需在反向代理下从子路径服务,使用 `APP_BASE_URL=/claude-code claude-code-web`。要启用 Whisper 麦克风支持进行语音输入,需设置 OpenAI API 密钥:`OPENAI_API_KEY=sk_... claude-code-web`。所有配置均通过环境变量实现,无需修改代码。

6. 补充说明与实现特点

项目采用移动优先的 PWA 设计,支持离线缓存和移动端适配。重要安全提示:Claude Code Web 无任何认证机制,任何能访问运行端口的用户均可控制主机环境,因此强烈建议在防火墙或认证代理后运行。此外,语音输入功能依赖 OpenAI 的 Whisper API,需自行申请 API 密钥。项目基于 Nuxt 4 框架开发,确保现代前端性能和开发体验。仓库中未明确给出其他高级自定义或插件机制。

思维导图

Claude Code Web
核心功能
实时聊天界面
语音输入模块
文本转语音模块
图像拖放处理
热键系统
待办事项侧边栏
技术栈
Nuxt 4 框架
移动优先 PWA 设计
部署与配置
npm 全局安装
环境变量配置 (PORT/APP_BASE_URL/OPENAI_API_KEY)

常见问题

如何安装 Claude Code Web?

需要先安装 Node.js 18+ 和 Claude Code CLI,然后运行 npm install -g @sunpix/claude-code-web 进行全局安装。

如何启动 Claude Code Web 服务?

安装后,在终端执行 claude-code-web 命令即可启动服务,默认监听 http://localhost:3000。

如何修改服务端口?

通过设置 PORT 环境变量,例如 PORT=8080 claude-code-web 可将服务运行在 8080 端口。

如何启用语音输入功能?

需要 OpenAI API 密钥,运行 OPENAI_API_KEY=sk_... claude-code-web 来启用 Whisper 麦克风支持。

Claude Code Web 是否有安全认证?

仓库中未明确给出认证机制,README 警告称无认证,任何访问端口者可控制环境,建议在防火墙或认证代理后运行。