后端:
- server: 实现完整的 HTTP 会话管理(CRUD)+ SSE 事件流推送,
支持双通道架构(POST 发消息 + GET SSE 接收流式响应)
- runtime: ContentBlock 新增 Thinking / RedactedThinking 变体,
支持思考过程和已编辑思考的序列化/反序列化
- api: 注册 GLM 系列模型(glm-4/5 等)到模型注册表,
扩展 XAI/OpenAI 兼容提供商的请求构建逻辑
前端:
- 基于 Ant Design X 构建完整聊天界面:Bubble.List 消息列表、
Sender 输入框、Conversations 会话管理、Think 思考过程折叠、
ThoughtChain 工具调用链展示
- XMarkdown 集成:代码高亮、Mermaid 图表、LaTeX 公式、
自定义脚注、流式渲染(incomplete 占位符)
- SSE Hook 对接服务端事件流,手动管理 AssistantBuffer 累积 delta
- 深色/浅色主题切换,会话侧边栏(新建/切换/删除)
1.0 KiB
1.0 KiB
Claw Code Frontend
Claw Code 的 Web 前端界面,使用 Ant Design X 构建。
技术栈
- React 19 + TypeScript
- Ant Design X 2.5(Bubble / Sender / Conversations / Think / ThoughtChain / XMarkdown)
- Vite 6
开发
npm install
npm run dev
前端通过 Vite 代理连接后端,默认代理到 http://localhost:3000。
先启动后端:
# 项目根目录
cargo run --bin claw-server
构建
npm run build
产出目录:dist/。
项目结构
src/
main.tsx # 入口
App.tsx # XProvider 主题 + 布局 + 状态管理
api.ts # REST API 客户端
types.ts # 类型定义
hooks/
useSSE.ts # SSE 事件流
components/
ChatView.tsx # 聊天区(Bubble.List + Sender + XMarkdown)
SessionSidebar.tsx # 会话侧边栏(Conversations)
ToolChain.tsx # 工具调用链(ThoughtChain)
WelcomeScreen.tsx # 欢迎页