WebCode

🚀 随时随地，云端编程 | Code Anywhere, Anytime

远程驱动 AI 编程助手，支持手机、平板、电脑全平台编程体验

🌐 在线试用

想要快速体验？无需安装，直接访问在线演示版：

试用地址	账号	密码
https://webcode.tree456.com/	`treechat`	`treechat@123`

⚠️ 注意：试用环境为演示用途，请勿存储敏感信息

💬 交流群

扫码加入微信交流群，获取最新动态、反馈问题、交流使用心得：

✨ 核心特色

WebCodeCli 是一个在线 AI 编程平台，让你可以通过 Web 浏览器远程控制各种 AI CLI 编程助手，实现真正的随时随地编程——无论你在地铁上、咖啡馆里，还是躺在沙发上，只要有浏览器就能写代码！

🎯 主要功能

📱 手机编程 - 完整的移动端适配，触摸优化，手机上也能流畅编程
🤖 多 AI 助手支持 - 集成 Claude Code CLI、Codex CLI、GitHub Copilot CLI 等主流 AI 编程工具
⚡ 实时流式输出 - 即时看到 AI 的思考和编码过程，打字机效果展示
📂 会话工作区 - 每个会话独立工作目录，文件隔离，安全可靠
🎨 代码高亮预览 - Monaco Editor 代码高亮，Markdown 渲染，多视图切换
🔐 安全执行 - 沙箱环境，命令白名单，防注入保护

🖥️ 支持的 AI CLI 工具

✅ 已完整支持（流式JSON解析）

工具	命令	特点	状态
Claude Code CLI	`claude`	MCP 服务器、会话恢复、stream-json 输出、代理系统	🟢 已启用
Codex CLI	`codex`	沙箱执行、网络搜索、Git 集成、JSONL 输出	🟢 已启用

🔧 待扩展支持

工具	命令	特点	状态
GitHub Copilot CLI	`copilot`	GitHub 集成、细粒度权限	🟡 已配置，待适配
Qwen CLI	`qwen`	YOLO 模式、检查点、扩展系统	🟡 已配置，待适配
Gemini CLI	`gemini`	Google AI、简洁配置	🟡 已配置，待适配

📚 详细的 CLI 工具使用说明请查看 cli/README.md

💡 扩展支持：如需添加新的 CLI 工具适配器，请参考 WebCodeCli.Domain/Domain/Service/Adapters/ 目录下的现有实现

📱 移动端支持

WebCodeCli 针对移动设备进行了全面优化：

响应式布局 - 自适应手机、平板、桌面各种屏幕
触摸优化 - 44px 触摸目标，手势支持，按压反馈
iOS 适配 - 解决 Safari 100vh 问题，适配刘海屏
横竖屏切换 - 无缝切换，内容不丢失
虚拟键盘适配 - 输入时自动调整视口

测试设备支持

✅ iPhone SE / iPhone 12-14 / iPhone Pro Max
✅ iPad Mini / iPad Pro
✅ Android 手机（各尺寸）
✅ Chrome / Safari / Firefox / Edge 移动版

🖼️ 产品截图

以下截图来自项目内置演示素材，实际界面以当前版本为准。

🚀 快速开始

方式一：Docker 一键部署（推荐）

无需任何配置，30 秒启动！ 首次访问时，系统会自动引导您完成所有配置。

# 克隆项目
git clone https://github.com/xuzeyu91/WebCode.git
cd WebCode

# 一键启动
docker compose up -d

# 访问 http://localhost:5000
# 首次访问会自动进入设置向导

📖 详细部署文档请参考 DEPLOY_DOCKER.md

🔧 需要预置环境变量/无人值守部署与内置 CLI 验证：参考 docs/Docker-CLI-集成部署指南.md

方式二：本地开发运行

环境要求

.NET 10.0 SDK
已安装的 AI CLI 工具（如 Claude Code CLI、Codex CLI）

安装运行

# 克隆项目
git clone https://github.com/xuzeyu91/WebCode.git
cd WebCode

# 恢复依赖
dotnet restore

# 运行应用
dotnet run --project WebCodeCli

应用将在 http://localhost:5000 启动，访问 /code-assistant 开始编程！

配置 Claude/Codex 等 CLI（推荐界面配置）

默认情况下，无需编辑 appsettings.json：首次启动后在 Web 界面完成设置向导，或登录后在“系统设置”中配置 Claude/Codex 等参数。

仅在以下场景建议使用 appsettings.json / 环境变量进行预置：

需要无人值守部署（CI/CD）
需要把配置写死在镜像/配置文件中
进行本地开发调试且希望用文件快速切换配置

示例（高级用法）：

{
  "CliTools": {
    "Tools": [
      {
        "Id": "claude-code",
        "Name": "Claude Code",
        "Command": "claude",
        "ArgumentTemplate": "-p \"{prompt}\"",
        "Enabled": true
      },
      {
        "Id": "codex",
        "Name": "OpenAI Codex",
        "Command": "codex",
        "ArgumentTemplate": "exec \"{prompt}\"",
        "Enabled": true
      }
    ]
  }
}

🏗️ 技术架构

WebCodeCli/
├── WebCodeCli/              # 主项目 (Blazor Server)
│   ├── Components/          # Blazor 组件
│   ├── Pages/               # 页面
│   │   └── CodeAssistant/   # 编程助手页面
│   ├── wwwroot/             # 静态资源
│   └── Program.cs           # 应用入口
├── WebCodeCli.Domain/       # 领域层 (DDD)
│   ├── Domain/
│   │   ├── Model/           # 领域模型
│   │   └── Service/         # 领域服务
│   │       └── Adapters/    # CLI 适配器
│   └── Repositories/        # 数据仓储
└── cli/                     # CLI 工具文档

技术栈

类别	技术
前端框架	Blazor Server + Tailwind CSS
UI 组件库	Ant Design Blazor
代码编辑器	Monaco Editor
AI 功能	Microsoft Semantic Kernel
数据访问	SqlSugar ORM (Sqlite/PostgreSQL)
实时通信	Server-Sent Events (SSE)
进程管理	System.Diagnostics.Process

📋 功能特性

聊天与交互

✅ 左右分栏布局（移动端上下布局）
✅ 消息历史记录
✅ 流式输出（打字机效果）
✅ 快捷键发送 (Ctrl+Enter)
✅ 清空会话

预览与展示

✅ 代码高亮预览 (Monaco Editor)
✅ Markdown 渲染
✅ HTML 实时预览
✅ 原始输出查看
✅ 多 Tab 切换

工作区管理

✅ 会话隔离工作区
✅ 文件上传/下载
✅ 文件树浏览
✅ 自动清理过期工作区

安全特性

✅ 命令白名单验证
✅ 输入转义（防注入）
✅ 并发限制
✅ 超时控制

📚 文档

💡 推荐 Skills

提升 AI 编程助手能力的优秀 Skills 资源：

planning-with-files - 基于文件的项目规划与任务管理技能
Anthropic Skills - Anthropic 官方 Skills 集合，提供多种 Claude 增强能力
UI/UX Pro Max Skill - 专业的 UI/UX 设计与开发技能

💡 提示：这些 Skills 可以与 Claude Code CLI 等 AI 助手配合使用，增强代码生成、项目规划、UI 设计等能力。

🛠️ 使用场景

1. 移动办公

在手机上通过浏览器远程控制服务器上的 AI 编程助手，随时处理代码任务。

2. 远程开发

通过 Web 界面远程驱动 Claude Code 或 Codex 进行代码开发，无需本地安装开发环境。

3. 代码审查

利用 AI 助手快速审查代码、生成测试用例、重构代码。

4. 学习编程

初学者可以通过 AI 助手学习编程，获得即时反馈和建议。

🛠️ 高级配置

工作区配置

"CliTools": {
  "TempWorkspaceRoot": "D:\\Temp\\WebCodeCli\\Workspaces",
  "WorkspaceExpirationHours": 24,
  "NpmGlobalPath": "",
  "MaxConcurrentExecutions": 3,
  "DefaultTimeoutSeconds": 300
}

配置项	说明	示例值
`TempWorkspaceRoot`	临时工作区根目录，用于存放会话隔离的工作文件	`D:\\Temp\\WebCodeCli\\Workspaces`
`WorkspaceExpirationHours`	工作区过期时间（小时），过期后自动清理	`24`
`NpmGlobalPath`	NPM 全局安装路径（可选，留空则自动检测）	`C:\\Users\\YourUsername\\AppData\\Roaming\\npm\\` 或留空 `""`
`MaxConcurrentExecutions`	最大并发执行数	`3`
`DefaultTimeoutSeconds`	默认超时时间（秒）	`300`

💡 提示：

Windows 用户：NPM 全局路径通常为 C:\Users\{用户名}\AppData\Roaming\npm\

Linux/Mac 用户：NPM 全局路径通常为 /usr/local/bin/ 或 ~/.npm-global/bin/

工作区目录建议使用绝对路径，确保有足够的磁盘空间

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

本项目采用 AGPLv3 开源许可证。

开源使用：遵循 AGPLv3 协议
商业授权：如需商业授权，请联系 antskpro@qq.com

详细信息请查看 LICENSE 文件。

🌟 让 AI 成为你的编程伙伴，随时随地，代码随行 🌟

Name		Name	Last commit message	Last commit date
Latest commit History 95 Commits
.cursor/rules		.cursor/rules
WebCodeCli.Domain		WebCodeCli.Domain
WebCodeCli		WebCodeCli
cli		cli
docker		docker
docs		docs
images		images
skills		skills
.dockerignore		.dockerignore
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
DEPLOY_DOCKER.md		DEPLOY_DOCKER.md
Directory.Build.props		Directory.Build.props
Dockerfile		Dockerfile
LICENSE		LICENSE
QUICKSTART.md		QUICKSTART.md
README.md		README.md
README_EN.md		README_EN.md
WebCodeCli.sln		WebCodeCli.sln
appsettings.json		appsettings.json
deploy.bat		deploy.bat
deploy.sh		deploy.sh
docker-compose.yml		docker-compose.yml

License

xuzeyu91/WebCode

Folders and files

Latest commit

History

Repository files navigation