Claude Code Open 操作手册 从零开始，手把手教你使用开源 AI 编程平台

在线体验 Demo GitHub 源码

一、什么是 Claude Code Open？

Claude Code Open 是一个开源的 AI 编程平台，它把 Claude AI 变成一个能直接操作你电脑的编程助手——不只是聊天，它能：

• 直接读写你的代码文件 — 不用复制粘贴
• 运行终端命令 — npm、git、docker 都行
• 搜索整个代码库 — 秒级定位任何代码
• 操作浏览器 — 自动化测试、截图
• 管理 Git 仓库 — 提交、推送、创建 PR
• 多个 AI Agent 协作 — 复杂任务自动分解并行

简单说：它是一个住在你电脑里的全栈工程师。

Web UI 主界面 — 集聊天、代码编辑、蓝图规划于一体

二、安装

Windows 一键安装（推荐）

最简单的方式——下载双击即可：

macOS / Linux 安装

一行命令搞定：

curl -fsSL https://raw.githubusercontent.com/kill136/claude-code-open/private_web_ui/install.sh | bash

国内镜像加速：

curl -fsSL https://gitee.com/lubanbbs/claude-code-open/raw/private_web_ui/install.sh | bash

Docker 部署

# 构建镜像
docker build -t claude-code-open .

# 运行 Web UI
docker run -it \
  -e ANTHROPIC_API_KEY=你的API密钥 \
  -p 3456:3456 \
  -v $(pwd):/workspace \
  claude-code-open node /app/dist/web-cli.js --host 0.0.0.0

然后访问 http://localhost:3456。

手动安装（开发者）

git clone https://github.com/kill136/claude-code-open.git
cd claude-code-open
npm install

# 构建前端
cd src/web/client && npm install && npm run build && cd ../../..

# 构建后端
npm run build

# 启动 Web UI
npm run web

三、首次配置

获取 API Key

你需要一个 Anthropic API Key 来使用 Claude AI：

配置 API Key

方式一：通过 Web UI 设置（推荐）

1. 点击右上角 齿轮图标 打开设置
2. 点击左侧 "API 高级" 选项卡
3. 在 API Key 输入框粘贴你的密钥
4. （可选）修改 API Base URL 如果你使用代理/中转服务
5. 点击保存

方式二：通过环境变量

# Linux / macOS
export ANTHROPIC_API_KEY=sk-ant-你的密钥

# Windows PowerShell
$env:ANTHROPIC_API_KEY="sk-ant-你的密钥"

# Windows CMD
set ANTHROPIC_API_KEY=sk-ant-你的密钥

方式三：通过配置文件

// ~/.claude/settings.json
{
  "apiKey": "sk-ant-你的密钥"
}

选择模型

在输入框左下角的模型下拉菜单中选择：

四、Web UI 快速上手

界面总览

右上角功能按钮（从左到右）：

• API Console — API 探针，查看请求详情
• ≡ / </> — 切换对话视图、代码视图

发送第一条消息

你可以让它做的事情（示例）：

权限模式说明

底部工具栏有一个权限模式下拉菜单，控制 AI 操作文件的权限：

五、核心功能详解

5.1 聊天对话

这是最基础的功能——和 AI 对话。但它不只是聊天，AI 可以调用 37+ 种工具来实际操作你的系统。

对话中的工具调用：当 AI 需要操作时，会展示工具调用的过程。例如：

🔧 Read — 读取 src/index.ts
   ✅ 成功读取 245 行

附件上传：点击底部 📎 图标可以上传文件（图片、代码文件等），AI 能直接分析上传的内容。

语音输入：点击 🎤 图标开启语音识别，说出你的需求，自动转为文字发送。

5.2 代码视图

点击右上角 </> 图标切换到代码视图，类似 VS Code 的三栏布局：

功能亮点：

• 文件树 — 浏览和打开项目文件
• Monaco Editor — 语法高亮、多标签页编辑
• AI 对话面板 — 边看代码边和 AI 讨论
• 右键菜单 — 选中代码后右键可以 "Ask AI"

5.3 蓝图系统（Blueprint）

点击 "蓝图" 标签页进入蓝图系统。

蓝图页面 — 可视化展示项目模块结构

什么是蓝图？蓝图是对项目的"全景扫描"——AI 分析你的整个代码库，识别出模块结构、业务流程和依赖关系。

使用场景：

• 新接手一个项目，想快速了解架构
• 要做大型重构，需要先理解依赖关系
• 向团队成员介绍项目结构

如何使用：在聊天中说：

帮我分析一下当前项目，生成蓝图

5.4 蜂群多 Agent 协作（Swarm）

点击 "蜂群" 标签页进入蜂群面板。

蜂群面板 — 多个 AI Agent 并行工作

什么是蜂群？当你有一个复杂的大任务（比如"帮我从零搭建一个电商后端"），单个 AI 处理太慢。蜂群系统会：

在聊天中描述复杂任务即可触发。也可以明确要求：

用蓝图系统帮我实现一个完整的用户管理模块，包含注册、登录、权限控制

5.5 定时任务

点击 "定时任务" 标签页管理定时任务。

创建方式——在聊天中用自然语言：

帮我创建一个定时任务，每天上午10点检查 Git 仓库状态并生成报告

或者在定时任务页面点击 "+ 新建任务" 按钮。

5.6 斜杠命令

在输入框输入 / 可以看到所有可用命令：

六、进阶用法

6.1 CLAUDE.md 项目规则

在项目根目录创建 CLAUDE.md 文件，写入你的项目规则和约束。AI 每次启动都会自动读取这个文件。

这是最强大的配置手段——相当于给 AI 员工一份"工作手册"。

## 项目约定
- 使用 TypeScript strict 模式
- 所有组件用函数式写法，禁止 class 组件
- CSS 使用 Tailwind，不写内联样式

## 代码风格
- 缩进 2 空格
- 字符串用单引号

## 禁止事项
- 不要动 package.json 的依赖版本
- 不要修改 .env 文件
- 不要"顺手优化"不相关的代码

6.2 Skills 技能系统

Skills 是封装好的工作流，可以通过 / 命令一键触发。

内置技能举例：

• /code-review — 代码审查
• /analyze-logs — 分析运行日志
• /skill-hub — 搜索和安装社区技能

创建自定义 Skill：在 .claude/skills/my-skill/SKILL.md 创建文件：

---
description: "自动化部署到测试环境"
user-invocable: true
---

# 部署到测试环境

1. 运行 `npm run build` 构建项目
2. 运行 `npm test` 确保测试通过
3. 执行 `rsync -avz dist/ user@server:/app/`
4. 验证部署成功

然后在对话中输入 /my-skill 即可触发。

6.3 MCP 协议扩展

MCP (Model Context Protocol) 让 AI 能连接外部工具和服务。编辑 ~/.claude/settings.json：

{
  "mcpServers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/your/path"]
    },
    "github": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_TOKEN": "你的 GitHub Token" }
    }
  }
}

或者在 Web UI 设置页面的 "MCP" 选项卡中配置。

6.4 Hooks 钩子系统

Hooks 让你在 AI 的工具调用前后自动执行自定义脚本：

{
  "hooks": [
    {
      "event": "PostToolUse",
      "matcher": "Write",
      "command": "npx prettier --write ${FILE_PATH}",
      "blocking": false
    }
  ]
}

6.5 自我进化模式

这是最独特的功能——AI 可以修改自己的代码。

npm run web:evolve

启用后，AI 可以：

• 阅读自己的源代码
• 修改系统提示词、工具逻辑
• 添加新工具
• 安装 MCP 服务器
• 热重载自动生效

七、CLI 命令行模式

除了 Web UI，你也可以在终端中使用命令行模式：

# 交互式对话
node dist/cli.js

# 带初始问题
node dist/cli.js "帮我分析这个项目"

# 打印模式（非交互，适合脚本）
node dist/cli.js -p "解释一下 src/index.ts"

# 指定模型
node dist/cli.js -m sonnet "简单问题用便宜模型"

# 恢复上次对话
node dist/cli.js --resume

# 列出历史对话
node dist/cli.js --list

八、常见问题

九、获取帮助

提交 Issue 加入 Discord 在线体验

• GitHub: github.com/kill136/claude-code-open
• Discord: discord.gg/bNyJKk6PVZ
• 官网: chatbi.site
• Twitter: @wangbingjie1989