19｜扩展：ChatPanel 助力 Agent 丝滑接入聊天对话 Web 页面
邢云阳
你好，我是邢云阳。
前面几节课，合同审查 Agent 一直跑在终端里。对开发者来说，终端高效直接；但要把 Agent 交付给法务、采购、商务同事使用，一个网页聊天界面才更方便。
这节课我们就来补齐最后一块拼图：基于浏览器原生 Web Components 打造 ChatPanel，并通过 Server-Sent Events 把 Pi-mono Agent 的事件流实时推送到前端。学完今天内容，我们将拥有一个可以直接嵌入到任何网页里的合同审查聊天组件。
为什么选择 Web Component
选择原生 Web Components 主要考虑三点。
第一，零构建依赖。课程主线是 Agent 工程和 Pi-mono，不希望被 Vite、Webpack、JSX 配置冲淡重点。一个 .js 文件、一个 .css 文件，直接引入就能跑。
第二，可嵌入性。<chat-panel></chat-panel> 标签可以被任何页面、任何框架直接引用，法务部门现有的 OA 系统、React 后台、Vue 门户，只要加载一个 JS 文件就能使用，不需要改造前端工程。
第三，与 Pi-mono 哲学一致。Pi-mono 强调轻量、可组合、不绑定特定 UI 框架，Web Components 正好延续这种风格。理解了事件流和权限预检机制之后，把它迁移到 React 或 Vue 只是换一个组件封装方式。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Harness Agent 脚手架实战课》，新⼈⾸单¥59
《Harness Agent 脚手架实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论