Featured image of post sth:一个给 AI Agent 用的 HTML 预览服务器

sth:一个给 AI Agent 用的 HTML 预览服务器

语速

我开源了一个小工具:static-html,命令行叫 sth

它做的事情很简单:提供一个 HTTP 服务,让你把本地生成的 HTML 文件注册上去,然后在浏览器里预览。

为什么需要这个东西

问题出在 AI Agent 的输出上。

现在我用 Claude Code、OpenCode 这些 agent 干活,它们经常需要输出一些复杂的内容——代码评审汇总、对比分析、报价单、架构设计文档。这些内容用纯文本发到 Telegram 里,格式全乱了,表格看不了,代码高亮也没了。

总而言之就是一大坨。

最开始的做法是让 agent 直接在本地生成 HTML 文件,然后用浏览器打开。但问题在于:

  • agent 跑在服务器上,没有图形界面
  • 本地生成的文件路径不确定,管理混乱
  • 没有历史记录,发过的东西找不到

所以我需要一个服务:agent 把 HTML 文件"发"上去,然后给一个 URL,在任何设备的浏览器里打开就能看。手机和 PC 兼容性直接让 agent 来搞定就行。

sth 做了什么

sth 是一个 Go 写的轻量 HTTP 服务,核心就两个命令:

1
2
3
4
5
# 启动服务
sth start

# 发送 HTML 文件
sth send ./report.html

sth send 会把目标 HTML 文件和同目录下的资源文件(CSS、JS、图片等)打包上传,然后返回一个 URL。打开这个 URL 就能看到完整的页面效果。

实际跑在我的内网开发机上,agent 通过 --server 参数指定远程地址:

1
sth send ./report.html --server http://dev-1:3939

我的实际用法

目前 sth 主要跑在我的开发服务器上,和 Hermes Agent 配合使用。

Hermes 是我的日常 AI assistant,跑在 Telegram 上。当它需要输出复杂内容时——比如代码评审结论、技术方案对比、项目报价——会调用 html-report skill 生成一个格式精美的 HTML 文件,然后通过 sth send 发到预览服务器,最后把 URL 发给我。

整个流程是:

1
2
3
4
用户提问 -> Hermes Agent 分析
  -> 生成 HTML 报告(html-report skill)
    -> sth send 发到预览服务器
      -> 返回 URL -> 发到 Telegram

这样我在手机上点开链接就能看到排版良好的报告,而不是一坨纯文本。

元数据管理

除了基本的发送和预览,sth 还支持给 session 打标签、分类、关联项目:

1
2
3
4
5
sth tag <session-id> code-review pricing
sth categorize <session-id> "技术评审"
sth project <session-id> hydrogen-permeation
sth list --project hydrogen-permeation
sth search "报价" --tag pricing

这个功能解决了一个实际问题:时间一长,发过的报告会积攒很多。通过标签和项目分类,可以快速找到之前的输出。

listsearch 的区别在于:list 是精确匹配元数据字段,search 是全文搜索。两者可以组合使用。

技术细节

  • 语言:Go 1.24+
  • 存储:SQLite(github.com/mattn/go-sqlite3,需要 CGO)
  • 部署:单二进制文件,systemd 管理就行
  • 构建go build -o dist/sth ./cmd/html-server

就这么简单,没有多余的依赖。

开源

这个工具之前是 private repo,今天刚改成 public:sun-praise/static-html

如果你也在用 AI Agent 做日常开发工作,并且遇到过"agent 输出的复杂内容在聊天工具里没法看"的问题,可以试试 sth。它足够轻量,够用就行。