ClawStudio

移动端 OpenClaw 工作室，连接 OpenClaw Gateway 进行实时会话和文件管理。

功能特性

• 会话管理 - 查看 OpenClaw 会话
• 实时对话 - 通过 WebSocket 与 Gateway 实时对话
• 消息展示 - 支持文本、推理过程、工具调用等多种消息类型
• 文件浏览器 - 浏览和预览工作区文件
• 代码预览 - 使用高亮显示代码文件
• 图片预览 - 支持图片预览
• *智能体管理** - 查看可用的智能体

产品截图

| 启动页 | 智能体列表页 | 会话详情页 | | ---------------------------------------- | ----------------------------- | --------------------------------------- | | | | | | 会话工作区 | 文件管理 | 设置页 | | | | |

技术栈

• 框架: Next.js 16 (App Router)
• 语言: TypeScript
• UI: React 19 + Tailwind CSS 4 + shadcn/ui
• 代码编辑: CodeMirror 6
• AI SDK: @ai-sdk/react, @ai-sdk/openai
• 通信: WebSocket (ws)

快速开始

方式一：NPM CLI（推荐）

# 安装 CLI
npm install -g clawstudio-mobile

# 首次运行自动创建配置文件
clawstudio-mobile start
# 输出: 配置文件已创建: ~/.clawstudio-mobile/config.json，请编辑后重新运行

# 编辑配置文件
vim ~/.clawstudio-mobile/config.json

# 初始化配置，并启动服务
clawstudio-mobile start

# 安装开机自启（macOS）
clawstudio-mobile service install
clawstudio-mobile service start
clawstudio-mobile service stop
clawstudio-mobile service status

配置文件格式：

{
  "gateway": {
    "host": "127.0.0.1",
    "port": 18789,
    "token": "your_token"
  },
  "server": {
    "port": 18000
  },
  "token": "your_claw_studio_token",
  "fileRoot": "/your/local/file/path"
}

方式二：源码构建

# 克隆项目
git clone https://github.com/open-agents-studio/clawstudio-mobile.git
cd clawstudio-mobile

# 安装依赖
npm install

# 构建
npm run build
npm run build:cli

# 启动服务
node ./dist/cli/index.js start

# 或安装开机自启
node ./dist/cli/index.js service install

方式三：Docker

# 构建镜像
docker build -t clawstudio-mobile .

# 运行
docker run -d -p 18000:18000 \
  -e OPENCLAW_GATEWAY_HOST=your-gateway-ip \
  -e OPENCLAW_GATEWAY_PORT=18789 \
  -e OPENCLAW_GATEWAY_TOKEN=your_openclaw_token \
  -e CLAW_STUDIO_TOKEN=your_claw_studio_token \
  -e CLAW_STUDIO_FILE_ROOT_PATH=your_file_root_path \
  clawstudio-mobile

或使用 docker-compose：

docker-compose up -d

环境变量说明

| 变量 | 说明 | 默认值 | | ---------------------------- | ------------------- | --------- | | OPENCLAW_GATEWAY_HOST | Gateway 地址 | 127.0.0.1 | | OPENCLAW_GATEWAY_PORT | Gateway 端口 | 18789 | | OPENCLAW_GATEWAY_TOKEN | Gateway Token | - | | CLAW_STUDIO_SERVER_PORT | ClawStudio 服务端口 | 18000 | | CLAW_STUDIO_TOKEN | ClawStudio Token | ~/ | | CLAW_STUDIO_FILE_ROOT_PATH | 文件根目录 | ~/ |

项目结构

clawstudio-mobile/
├── app/                    # Next.js App Router 页面
│   ├── (main)/            # 主布局
│   │   ├── (custom)/sessions/[id]/   # 会话详情页
│   │   │   └── components/           # 会话相关组件
│   │   │       ├── messages/         # 消息组件
│   │   │       └── files/            # 文件浏览组件
│   │   ├── (navbar)/        # 导航栏布局
│   │   │   ├── sessions/    # 会话列表页
│   │   │   ├── agents/      # Agent 列表页
│   │   │   ├── files/       # 文件页
│   │   │   └── settings/    # 设置页
│   │   └── page.tsx         # 首页
│   ├── layout.tsx           # 根布局
│   └── globals.css          # 全局样式
├── components/             # UI 组件
│   ├── ui/                 # shadcn/ui 组件
│   ├── layout/             # 布局组件
│   └── file/               # 文件预览组件
├── lib/                    # 工具函数
│   ├── server/             # 服务端逻辑
│   │   ├── openclaw.ts     # Gateway 连接管理
│   │   ├── device.ts       # 设备认证
│   │   └── types/          # 类型定义
│   └── utils/              # 工具函数
├── hooks/                  # React Hooks
└── public/                 # 静态资源

核心模块

Gateway 连接

lib/server/openclaw.ts - 管理与 OpenClaw Gateway 的 WebSocket 连接，支持设备认证和消息收发。

设备认证

lib/server/device.ts - 处理设备身份认证，使用 ED25519 公私钥对进行签名验证。

消息处理

lib/server/message-transform.ts - 转换 Gateway 消息格式为前端可用的结构。

环境要求

• Node.js 18+
• npm 9+

License

MIT