# code-agent-claw-ui **Repository Path**: qingfeng0512/code-agent-claw-ui ## Basic Information - **Project Name**: code-agent-claw-ui - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-16 - **Last Updated**: 2026-04-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README Code Agent Claw WebUI

Code Agent Claw WebUI

一个运行在浏览器中的可视化控制台，用于配置和管理 AI 编码助手 Agent

功能特性

🎨

配置管理

通过图形界面设置模型、提供商、工作目录等参数

💬

实时交互

查看 Agent 的实时响应和状态

📊

会话管理

创建和管理多个对话会话

🔌

双通道通信

支持 REST API 和 WebSocket 实时通信

⚡

自动检测

自动检测 aicode 命令路径

🔄

自动初始化

支持启动时自动加载已有配置并初始化

🌐

跨平台

支持通过环境变量或配置文件自定义端口

技术架构

┌─────────────────────────────────────────────────────────┐ │ Browser (WebUI) │ │ Vue 3 + WebSocket │ └─────────────────────┬───────────────────────────────────┘ │ HTTP / WebSocket ┌─────────────────────▼───────────────────────────────────┐ │ Express Server │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ REST API │ │ WebSocket │ │ Static Files │ │ │ │ /api/xxx │ │ /ws/agent │ │ /index.html │ │ │ └──────┬──────┘ └──────┬──────┘ └─────────────────┘ │ │ │ │ │ │ ┌──────▼────────────────▼──────┐ │ │ │ AgentRpcService │ │ │ │ (aicode 进程管理) │ │ │ └──────────────┬────────────────┘ │ └─────────────────┼───────────────────────────────────────┘ │ stdin/stdout (JSONL 协议) ┌─────────────────▼───────────────────────────────────────┐ │ aicode 子进程 │ │ @mariozechner/pi-coding-agent │ └─────────────────────────────────────────────────────────┘

快速开始

环境要求

安装

# 全局安装
npm i -g @ia-ccun/code-agent-claw

# 或本地开发
git clone https://github.com/ia-ccun/code-agent-claw-ui.git
cd code-agent-claw-ui
npm install
npm run build

启动

# 使用默认端口 8081
aicode-claw

# 自定义端口
aicode-claw -p 8082
aicode-claw --port 9999

# 或使用环境变量
AICODE_UI_PORT=8082 aicode-claw

启动成功后会显示：

======================================== Server started: http://localhost:8081 WebUI: http://localhost:8081/index.html API: http://localhost:8081/api/aicode/* WebSocket: ws://localhost:8081/ws/agent ========================================

在浏览器中打开 http://localhost:8081 即可看到控制台界面。

配置说明

首次配置

首次使用时，在 Web 界面左侧的「配置面板」中填写以下信息：

配置项 说明 示例值
Command aicode 命令的路径 aicode 或完整路径
Provider LLM 服务提供商 minimax-custom
Model 使用的模型名称 MiniMax-M2.5
Working Dir Agent 工作目录 ~/.aicode-cli
Session Dir 会话保存目录 ~/.aicode-cli/agent/sessions

💡 提示：Provider 和 Model 的可用选项可以参考 ~/.aicode-cli/agent/models.json 文件。

环境变量

变量名 说明 默认值
AICODE_UI_PORT 服务端口 8081
AICODE_UI_COMMAND aicode 命令路径 自动检测
AICODE_UI_PROVIDER 默认 Provider minimax-custom
AICODE_UI_MODEL 默认 Model MiniMax-M2.5
AICODE_UI_LOG_LEVEL 日志级别 info

配置文件

配置会自动保存到 ~/.aicode-ui/config.json，下次启动时自动加载。

API 参考

REST API

配置

GET  /api/aicode/config     获取当前配置
POST /api/aicode/config     保存配置并初始化 Agent

状态

GET  /api/aicode/status     获取 Agent 状态
GET  /api/aicode/health     健康检查
GET  /api/aicode/detect     检测 aicode 命令路径

Agent 操作

POST /api/aicode/prompt     发送提示
POST /api/aicode/steer      发送引导消息
POST /api/aicode/follow-up  发送后续消息
POST /api/aicode/abort      中止当前操作
POST /api/aicode/new-session 创建新会话

WebSocket

连接地址：ws://localhost:8081/ws/agent

接收事件类型：

使用指南

发送提示

在底部输入框中输入问题或指令，点击发送或按 Enter 提交。Agent 会实时返回响应。

引导消息 (Steer)

点击「Steer」按钮发送引导消息，用于调整 Agent 的行为或方向。

后续对话 (Follow Up)

在对话过程中，使用「Follow Up」发送后续补充信息。

中止操作

如果 Agent 响应时间过长，点击「Abort」按钮中止当前操作。

新建会话

点击「New Session」创建全新对话，会清除当前上下文。

开发

# 安装依赖
npm install
cd webui && npm install && cd ..

# 开发模式（热重载）
npm run dev

# 构建
npm run build

# 启动生产版本
npm start

常见问题

Q: 启动后提示 "aicode command not found"

A: 确保已将 aicode CLI 安装到系统路径中，或在配置中填写完整路径。

Q: 状态一直显示 "未连接"

A: 检查配置是否正确填写，然后点击「初始化」按钮启动 Agent。

Q: 如何修改端口号？

A: 可以通过环境变量 AICODE_UI_PORT 修改，或使用命令行参数 -p/--port。

依赖