Clawdbot+Qwen3-32B实战教程：从零构建支持历史记录同步的Web Chat平台

Ne0inhk

21 Mar 2026 — 13 min read

Clawdbot+Qwen3-32B实战教程：从零构建支持历史记录同步的Web Chat平台

1. 为什么需要这个组合：解决什么实际问题

你有没有遇到过这样的情况：想快速搭一个能记住对话历史、响应又快的网页聊天界面，但试了几个开源方案，要么部署复杂，要么历史记录一刷新就丢，要么模型调用链路太长导致延迟高？Clawdbot + Qwen3-32B 这个组合，就是为了解决这些“真实卡点”而生的。

它不依赖云服务，所有模型推理都在你自己的机器上跑；它原生支持多轮对话上下文管理，每次提问自动带上之前的聊天记录；它用极简的代理配置把本地大模型能力直接暴露给网页前端——没有中间服务层，没有额外的API网关抽象，连通性清晰、调试路径短、出问题一眼就能定位。

更重要的是，它不是“玩具级”Demo。Qwen3-32B 是当前中文理解与生成能力顶尖的开源模型之一，尤其擅长长文本推理、逻辑推演和多步骤任务；Clawdbot 则是轻量但健壮的Web聊天框架，专注做一件事：把模型能力干净、稳定、可扩展地交付给浏览器。两者结合，就是一个真正能放进工作流里天天用的私有AI助手底座。

下面我们就从零开始，不跳步、不省略、不假设你已装好任何东西，手把手带你把这套系统跑起来。

2. 环境准备与基础服务部署

2.1 安装 Ollama 并加载 Qwen3-32B 模型

Clawdbot 本身不运行模型，它通过标准 HTTP 接口调用模型服务。我们选用 Ollama 作为本地模型运行时，因为它开箱即用、资源占用低、对中文模型支持成熟。

在你的服务器或本地机器上（Linux/macOS 推荐，Windows 可用 WSL）执行：

# 下载并安装 Ollama（以 Linux 为例） curl -fsSL https://ollama.com/install.sh | sh # 启动 Ollama 服务（后台运行） ollama serve & # 拉取 Qwen3-32B 模型（注意：需确保磁盘有至少 70GB 可用空间） ollama pull qwen3:32b

提示：qwen3:32b 是 Ollama 社区维护的官方镜像标签。如果你使用的是自建模型文件（GGUF 格式），可用 ollama create qwen3-32b -f Modelfile 自定义加载，但本教程默认采用标准镜像，确保兼容性与稳定性。

验证模型是否就绪：

ollama list # 应看到类似输出： # NAME ID SIZE MODIFIED # qwen3:32b 8a9c2d... 64.2 GB 2 hours ago

此时，Ollama 默认在 http://localhost:11434 提供 API。你可以用 curl 快速测试：

curl http://localhost:11434/api/chat -H "Content-Type: application/json" -d '{ "model": "qwen3:32b", "messages": [{"role": "user", "content": "你好，请用一句话介绍你自己"}] }'

如果返回包含 "message":{"role":"assistant","content":"我是通义千问..." 的 JSON，说明模型服务已正常工作。

2.2 配置端口代理：从 8080 到 11434 再到 18789

Clawdbot 前端默认尝试连接 http://localhost:8080/v1/chat/completions。但 Ollama 的 API 地址是 http://localhost:11434/api/chat，路径和端口都不匹配。我们不需要改 Clawdbot 源码，也不需要改 Ollama 配置——用一个轻量代理桥接即可。

我们推荐使用 nginx（稳定）、caddy（简洁）或纯 Node.js 脚本。这里提供最易上手的 caddy 方案（一行命令安装）：

# 安装 Caddy（macOS/Linux） curl https://getcaddy.com | bash -s personal # 创建代理配置文件 caddy-proxy.Caddyfile cat > caddy-proxy.Caddyfile << 'EOF' :8080 { reverse_proxy http://localhost:11434 { # 将 /v1/chat/completions 映射到 Ollama 的 /api/chat @ollama_api path /v1/chat/completions handle @ollama_api { rewrite * /api/chat reverse_proxy http://localhost:11434 } # 其他路径（如健康检查）直通 handle { reverse_proxy http://localhost:11434 } } } EOF # 启动代理（后台运行） caddy run --config caddy-proxy.Caddyfile --adapter caddyfile &

现在，访问 http://localhost:8080/v1/chat/completions 就等价于调用 http://localhost:11434/api/chat。这是 Clawdbot 能“直连”的关键一步。

验证代理是否生效：

若返回结构化 JSON 且含 message.content 字段，说明代理链路已通。

2.3 启动 Clawdbot Web 服务（监听 18789 端口）

Clawdbot 是一个静态文件 + 轻量后端的组合。它本身不处理模型推理，只负责：

提供 HTML/JS 前端页面
管理浏览器端的对话历史（localStorage + 同步机制）
将用户输入封装成标准 OpenAI 格式，转发给 http://localhost:8080
接收响应并实时流式渲染到聊天窗口

下载并启动 Clawdbot（无需 Node.js 环境，纯二进制）：

# 下载最新版（Linux x64） wget https://github.com/clawdbot/clawdbot/releases/download/v0.8.2/clawdbot-linux-amd64 -O clawdbot # 赋予执行权限 chmod +x clawdbot # 启动服务，监听 18789 端口，并指定后端地址为 localhost:8080 ./clawdbot --port 18789 --backend http://localhost:8080

注意：--backend 参数必须指向你前面配置好的代理地址（http://localhost:8080），而不是 Ollama 原始地址。这是整个链路中唯一需要手动配置的参数。

服务启动后，终端会显示：

INFO[0000] Clawdbot server started on :18789 INFO[0000] Backend configured: http://localhost:8080

打开浏览器访问 http://localhost:18789，你将看到一个简洁的聊天界面——这就是你的私有 Web Chat 平台首页。

3. 核心功能实测：历史记录同步如何真正落地

Clawdbot 最实用的特性，不是“能聊天”，而是“聊完还能接着聊”。它通过三重机制保障历史记录不丢失、不同步、不混乱。

3.1 浏览器内实时同步：页面刷新不丢上下文

在 http://localhost:18789 页面中，输入第一条消息：“你好，我是小张”。

发送后，你会看到 Qwen3-32B 返回一段友好回复。此时，打开浏览器开发者工具（F12），切换到 Application → Storage → Local Storage，找到 http://localhost:18789 下的 clawdbot_conversations 条目。

点击展开，你会看到类似结构：

{ "conv_abc123": { "id": "conv_abc123", "title": "你好，我是小张", "messages": [ {"role":"user","content":"你好，我是小张"}, {"role":"assistant","content":"你好小张！很高兴认识你..."} ], "updatedAt": "2026-01-28T10:20:17Z" } }

这个 JSON 就是当前会话的完整快照。Clawdbot 在每次发送/接收消息后，都会自动更新 localStorage。因此，无论你关闭标签页、刷新页面、甚至重启浏览器，只要没清空本地存储，再次打开 http://localhost:18789，对话历史依然完整保留。

3.2 多标签页协同：同一会话在多个窗口中保持一致

新开一个浏览器标签页，访问 http://localhost:18789。你会发现，新页面自动加载了刚才的会话，并显示“正在同步历史…”提示。

这是因为 Clawdbot 在初始化时，不仅读取 localStorage，还会监听 storage 事件。当另一个标签页修改了 clawdbot_conversations，当前页面会立即收到通知并刷新 UI。你可以在两个标签页中分别发送消息，它们会像同一个聊天窗口一样，实时互相同步。

实测建议：标签页 A 输入：“请帮我写一封辞职信。”标签页 B 输入：“用正式语气，包含感谢和祝福。”观察两个页面是否都显示完整的四条消息（你两条 + 模型两条），且时间戳一致。

3.3 服务端无状态设计：为什么不用数据库也能可靠

你可能疑惑：所有数据都在浏览器里，万一用户清空缓存怎么办？Clawdbot 的设计哲学是——信任客户端，但不依赖服务端持久化。

它不连接任何数据库，不写入任何服务端文件；
所有会话 ID（如 conv_abc123）由前端生成（UUID v4），不依赖后端分配；
模型推理完全无状态：每次请求只传当前会话的全部 message 数组，Qwen3-32B 自行处理上下文窗口（支持最长 32K tokens）；
如果用户清空了 localStorage，Clawdbot 会新建一个会话，但不会报错或中断服务。

这种“前端自治 + 模型兜底”的架构，极大降低了部署复杂度，也避免了服务端成为单点故障源。对于个人知识助理、团队内部工具、临时项目演示等场景，它比“必须配 Redis + PostgreSQL”的方案更轻、更稳、更易维护。

4. 关键配置详解与常见问题排查

4.1 Clawdbot 启动参数含义与调优建议

Clawdbot 支持多个命令行参数，以下是生产环境中最常调整的几项：

参数	示例值	说明
`--port`	`18789`	Web 服务监听端口，避免与 Nginx/Apache 冲突
`--backend`	`http://localhost:8080`	必须正确指向你的代理地址，否则前端无法调用模型
`--model`	`qwen3:32b`	前端显示的模型名称（仅 UI 展示，不影响实际调用）
`--timeout`	`120`	单次请求超时秒数，默认 60，Qwen3-32B 首token延迟较高，建议设为 120
`--stream`	`true`	是否启用流式响应（默认开启），关闭后将等待模型全部生成完毕再返回

启动时加入超时与流式优化：

./clawdbot --port 18789 --backend http://localhost:8080 --timeout 120

4.2 Ollama 模型加载慢？内存不足？三步定位

Qwen3-32B 是 32B 参数量模型，在消费级显卡（如 RTX 4090）上可全精度运行，但若显存不足，Ollama 会自动降级到量化版本（如 Q4_K_M），此时首 token 延迟可能升至 5~10 秒。排查步骤如下：

强制指定 GPU 加载（Ollama 0.3.0+）：

ollama run qwen3:32b --gpu

或在 ~/.ollama/config.json 中添加：

{ "gpu": true }

检查 GPU 显存占用：

nvidia-smi --query-compute-apps=pid,used_memory --format=csv

若其他进程占满显存，可先 kill 掉非必要程序。

查看 Ollama 日志（启动时加 -v）：

ollama serve -v 2>&1 | grep -i "qwen3\|load\|quant"

若看到 loading model with quantization: Q4_K_M，说明正在用 4-bit 量化。

小技巧：首次加载模型后，Ollama 会缓存到 ~/.ollama/models/blobs/，后续启动几乎秒级完成。

4.3 代理不通？Curl 测试链路四步法

当页面显示“连接失败”或“网络错误”，按顺序执行以下四步诊断：

Clawdbot 前端请求是否发出？ 打开浏览器开发者工具 → Network 标签，发送一条消息，观察是否有 POST /v1/chat/completions 请求，状态码是否为 200，Response 是否为流式 chunk（以 data: 开头）。

代理路径映射是否正确？

curl -v http://localhost:8080/v1/chat/completions -H "Content-Type: application/json" -d '{"model":"qwen3:32b","messages":[{"role":"user","content":"test"}]}' # 应返回与直接调 Ollama 相同的 JSON 结构

代理能否访问 Ollama？

curl -v http://localhost:11434/health # Ollama 服务正常时返回 200

Clawdbot 能否访问代理？

curl -v http://localhost:8080/health # 应返回 200 OK（Caddy 默认健康检查路径）

只要其中一步失败，就锁定问题环节，无需全局排查。

5. 进阶实践：让平台更实用的三个小改造

Clawdbot 默认配置已足够好用，但针对日常高频需求，我们推荐三个零代码、低侵入的增强方式：

5.1 添加系统角色预设：让 Qwen3 更懂你的身份

Clawdbot 支持在每次请求中注入 system 消息，用于设定模型角色。你不需要改代码，只需在启动时加一个参数：

./clawdbot --port 18789 --backend http://localhost:8080 --system "你是一名资深技术文档工程师，擅长用清晰、准确、无歧义的语言解释复杂概念。回答时优先给出可执行的代码示例，再补充原理说明。"

这样，所有新会话的首条消息都会自动带上该 system 提示。实测表明，Qwen3-32B 对 system 指令响应非常精准，能显著提升回答的专业性和结构化程度。

5.2 静态资源反向代理：用 Nginx 统一入口，支持 HTTPS

若需对外提供服务（如内网团队共享），建议用 Nginx 做统一入口，同时启用 HTTPS 和路径重写：

server { listen 443 ssl; server_name chat.your-company.local; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { proxy_pass http://127.0.0.1:18789; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; } # 为流式响应优化 proxy_buffering off; proxy_cache off; proxy_read_timeout 300; }

配置后，团队成员访问 https://chat.your-company.local 即可，无需记端口号，且获得 TLS 加密保护。

5.3 会话导出为 Markdown：一键保存知识沉淀

Clawdbot 界面右上角有「导出」按钮（图标为 ↓）。点击后，当前会话将生成标准 Markdown 文件，格式如下：

## 2026-01-28 10:20:17 —— 你好，我是小张 **你**： 你好，我是小张 **Qwen3-32B**： 你好小张！很高兴认识你…… **你**： 请帮我写一封辞职信。 **Qwen3-32B**： 当然可以，这是一封正式、得体的辞职信模板……

导出的文件可直接存入 Obsidian、Notion 或 Git 仓库，成为可检索、可复用的知识资产。这是很多企业用户最看重的功能——AI 对话不再是一次性消耗，而是持续积累的组织记忆。

6. 总结：一个真正“开箱即用”的私有聊天平台

回看整个搭建过程，你只做了三件事：

一行命令安装 Ollama，一行命令拉取模型；
一个配置文件启动代理，桥接路径与端口；
一个二进制文件启动 Clawdbot，指定后端地址。

没有 Docker Compose 编排，没有 Kubernetes 部署，没有环境变量注入，没有数据库初始化。但它实现了：浏览器端完整对话历史管理（刷新不丢、多标签同步）
Qwen3-32B 全能力调用（长上下文、强逻辑、高准确率）
零服务端存储依赖（数据全在用户设备，隐私可控）
极简运维（单机部署，日志清晰，故障点明确）

这不是一个“能跑就行”的 Demo，而是一个经得起每天使用考验的生产力工具。当你需要快速验证一个想法、为客户提供定制化 AI 交互、或在离线环境中部署智能助手时，Clawdbot + Qwen3-32B 就是你最值得信赖的起点。

下一步，你可以尝试接入更多模型（如 qwen2.5:7b 做轻量版）、对接企业微信/飞书机器人、或用它的 API 构建专属工作流。但无论如何，今天的这一步——让一个真正好用的 Web Chat 平台在你本地跑起来——已经完成了最关键的 80%。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 ZEEKLOG星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

Clawdbot+Qwen3-32B实战教程：从零构建支持历史记录同步的Web Chat平台

Ne0inhk