Clawdbot Web Chat 搭建：Qwen3-32B 模型加载、API 路由与 UI 定制

3.1 下载与启动 Clawdbot

Clawdbot 提供预编译二进制包，无需构建：

# 下载（以 Linux x86_64 为例）
wget https://github.com/clawdbot/clawdbot/releases/download/v0.8.2/clawdbot-linux-amd64 -O clawdbot
# 赋予执行权限
chmod +x clawdbot
# 启动（默认监听 8080 端口）
./clawdbot

首次启动时，Clawdbot 会自动生成配置文件 config.yaml 和默认 UI 模板目录 templates/。你不需要手动创建它们。

3.2 修改 config.yaml：对接 Ollama 的关键配置

打开 config.yaml，重点修改以下三处（其余保持默认即可）：

# config.yaml
server:
  port: 8080 # 外部访问端口（浏览器打开 http://localhost:8080）
  host: "0.0.0.0"
model:
  provider: "ollama" # 固定值，表示使用 Ollama 作为后端
  endpoint: "http://localhost:11434" # Ollama API 地址（必须与你本地一致）
  model_name: "qwen3:32b" # 必须与 ollama list 中显示的名称完全一致
proxy:
  enabled: true # 开启代理模式（用于转发到 18789 网关）
  target_port: 18789 # 目标网关端口（即你内部统一 API 入口）
  timeout: "30s"

为什么需要 proxy.enabled: true？ 这不是多余的开关。Clawdbot 的代理模式本质是'请求中继'：当浏览器发来 /api/chat 请求时，Clawdbot 不自己调用 Ollama，而是把原始请求头、body、流式标记全部透传给 http://localhost:18789/api/chat。这让你可以在 18789 端口部署统一鉴权、日志审计、限流熔断等企业级网关能力，而 Clawdbot 只专注 UI 和协议适配。

3.3 内部网关转发：8080 → 18789 的真实路径

你提到'通过内部代理进行 8080 端口转发到 18789 网关'，这里指的不是 Clawdbot 自身的端口映射，而是你本地已部署的网关服务（如 Envoy、Traefik 或自研 Go 网关）。它的作用是：

• 统一接收来自 Clawdbot 的请求（目标地址 http://localhost:18789）
• 添加 JWT 鉴权、IP 白名单、请求签名校验等安全策略
• 将合法请求再转发给 Ollama（http://localhost:11434）

典型网关配置片段（以 Envoy 为例）：

# envoy.yaml 片段
static_resources:
  listeners:
    - name: listener_0
      address:
        socket_address:
          protocol: TCP
          address: 0.0.0.0
          port_value: 18789
  filter_chains:
    - filters:
        - name: envoy.filters.network.http_connection_manager
          typed_config:
            stat_prefix: ingress_http
            route_config:
              name: local_route
              virtual_hosts:
                - name: local_service
                  domains: ["*"]
                  routes:
                    - match: { prefix: "/api/" }
                      route: { cluster: ollama_cluster }
            http_filters: [...]
  clusters:
    - name: ollama_cluster
      connect_timeout: 30s
      type: STATIC
      lb_policy: ROUND_ROBIN
      load_assignment:
        cluster_name: ollama_cluster
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 127.0.0.1
                      port_value: 11434

验证网关是否生效： 在终端执行 curl -v http://localhost:18789/api/chat，应返回 401（鉴权失败）或 405（方法不支持），而不是 Connection refused —— 这说明网关已监听 18789 端口且能连通。

4. UI 定制实战：三类修改方式，按需选择

Clawdbot 的 UI 基于纯 HTML + JS，不依赖 React/Vue，所有模板文件都在 templates/ 目录下。你可以按需选择修改粒度：

4.1 快速换肤：只改 CSS 和 Logo（推荐新手）

进入 templates/static/css/，编辑 main.css：

/* templates/static/css/main.css */
:root {
  --primary-color: #1677ff; /* 主色调，改成你们公司的蓝 */
  --bg-color: #f8f9fa; /* 背景色 */
}
.logo-text {
  font-weight: 700;
  color: var(--primary-color);
}
/* 加入自定义 logo（替换 templates/static/img/logo.svg） */
.logo-img {
  background-image: url('/static/img/your-company-logo.svg');
  background-size: contain;
}

小技巧：Clawdbot 会自动监听 templates/ 目录变化，保存 CSS 后刷新浏览器即可实时生效，无需重启服务。

4.2 修改对话行为：调整提示词与初始消息

编辑 templates/index.html，找到 <script> 区域中初始化 chat 的部分：

<!-- templates/index.html -->
<script>
  const DEFAULT_SYSTEM_PROMPT = "你是一个专业、耐心、乐于助人的 AI 助手，回答简洁准确，不虚构信息。";
  const WELCOME_MESSAGE = "你好！我是基于 Qwen3-32B 的智能助手，可以帮你写文案、解题、编程、分析文档…… 请随时提问！";
  // 可选：禁用'发送图片'按钮（纯文本场景）
  document.getElementById('file-input').style.display = 'none';
</script>

这些变量直接影响用户第一眼看到的内容和模型的底层行为，比在前端输入框里反复试错高效得多。

4.3 深度定制：添加自定义功能按钮（如'清空上下文'、'切换模型'）

在 templates/index.html 的消息输入区域下方，插入一段 HTML + JS：

<!-- templates/index.html -->
<div>
  <button>🧹 清空对话</button>
  <button>切换模型</button>
</div>
<script>
  document.getElementById('clear-context').addEventListener('click', () => {
    if (confirm('确定要清空当前对话？此操作不可撤销')) {
      window.location.reload();
    }
  });
  document.getElementById('switch-model').addEventListener('click', () => {
    const models = ['qwen3:32b', 'qwen3:14b', 'qwen2.5:7b'];
    const current = localStorage.getItem('active-model') || 'qwen3:32b';
    const idx = models.indexOf(current);
    const next = models[(idx + 1) % models.length];
    localStorage.setItem('active-model', next);
    alert(`已切换至 ${next}，刷新页面生效`);
  });
</script>

注意：Clawdbot 原生不支持多模型热切换，但通过 localStorage 记录偏好 + 页面刷新，就能实现'伪切换'，对用户足够友好。

5. 启动与验证：五步走完最后闭环

完成以上所有配置后，按顺序执行：

1. 确保 Ollama 正在运行（终端执行 ollama serve 或后台常驻）
2. 确认网关服务已启动并监听 18789 端口（lsof -i :18789 或 netstat -tuln | grep 18789）
3. 启动 Clawdbot：./clawdbot
4. 打开浏览器访问：http://localhost:8080
5. 发送第一条消息测试端到端链路：
   • 输入：'今天北京天气怎么样？'
   • 观察控制台日志（Clawdbot 启动时会打印请求转发详情）
   • 查看浏览器 Network 面板，确认请求路径为 POST http://localhost:8080/api/chat → Clawdbot → http://localhost:18789/api/chat → 网关 → http://localhost:11434/api/chat

如果看到流式返回的响应内容，且无 502/504 错误，恭喜你，整条链路已打通。

6. 常见问题与避坑指南

6.1 'Connection refused' 错误排查顺序

6.2 性能优化建议（针对 Qwen3-32B）

• GPU 加速必须开启：Ollama 默认启用 GPU（CUDA / Metal），如发现 CPU 占用过高，检查 ollama ps 是否显示 GPU: true
• 关闭不必要的日志：在 config.yaml 中设置 log_level: "warn"，减少 I/O 开销
• 流式响应体验优化：Clawdbot 默认启用 SSE（Server-Sent Events），确保浏览器支持；若遇兼容问题，可临时改用 stream: false（牺牲实时性换稳定性）

6.3 安全提醒：别忽略的三个细节

• ❌ 不要将 config.yaml 提交到公开 Git 仓库（尤其含 endpoint 或敏感 header 配置）
• ❌ 不要在生产环境直接暴露 8080 端口，务必前置 Nginx 或 Cloudflare 实现 HTTPS 和 WAF
• 建议为 Ollama 设置 OLLAMA_ORIGINS="http://localhost:8080" 环境变量，限制跨域请求来源

7. 总结：你已经掌握的核心能力

回顾整个流程，你实际完成了三件关键工程动作：

• 模型接入层：用 Ollama 一键加载 Qwen3-32B，屏蔽了 CUDA 版本、GGUF 量化、vLLM 部署等复杂细节；
• API 路由层：通过 Clawdbot 的 proxy 模式，把前端请求精准导向企业级网关（18789），实现了安全与业务的解耦；
• UI 表现层：不写框架、不装依赖，靠改 HTML/CSS/JS 就完成品牌定制，连'清空对话'这种小功能都能 5 分钟上线。

这不是一个玩具 Demo，而是一套可直接嵌入你现有技术栈的轻量级 AI 对话基础设施。下一步，你可以：

• 把 templates/ 打包成 Docker 镜像，实现 UI 版本化管理；
• 在网关层接入 Prometheus，监控每个请求的 token 消耗与延迟；
• 用 clawdbot --config custom.yaml 启动多实例，为不同部门提供隔离的聊天入口。

真正的生产力，从来不是堆砌最前沿的技术名词，而是让复杂的能力，变得像打开网页一样简单。