Easysearch 智能助手的 Web 端升级实战
今天咱们聊聊怎么把一个命令行工具升级成Web版。
上一篇我分享了怎么用 DeepSeek 和 Tool Use 做一个“会说人话”的Easysearch智能助手，能在终端里直接用自然语言搜索、聚合数据、建索引啥的。
今天咱们不推倒重来，就在原有基础上加层 Web 壳，让它变成可视化工具。整个过程简单干净，逻辑复用，CLI 和 Web 两头都能玩。干货为主，少废话，一步步来。
1、前情提要：CLI版的基础回顾
上篇咱们在命令行里搞定了一个 Easysearch 助手。主要靠DeepSeek的API加上Tool Use，自动生成查询和写入请求，然后调用Easysearch（它兼容Elasticsearch）执行搜索、聚合、建索引、数据写入这些操作。核心是命令行入口，能输入自然语言，助手就帮你翻译成API调用。
现在升级目标：保持CLI能力不变，抽公共逻辑，加个 Express API 层，再配个简洁的前端。链路不复杂，但每层都可复用。
为什么这么干？因为业务上，CLI适合开发调试，Web适合团队分享和可视化操作。咱们不重复造轮子，聪明点抽象一下。
2、整体架构设计：一份代码，两套入口
项目结构保持精简，核心文件就这些：
-
tools.js：定义Tool Use的工具声明，一共8个，覆盖查询、写入、索引管理。 -
executor.js：工具执行层，把Tool调用转成Easysearch的REST API请求。 -
lib/chat.js：对话核心，处理DeepSeek和Tool Use的交互，这是CLI和Web的公共大脑。 -
index.js：CLI入口，用readline处理输入输出。 -
server.js：Web服务入口，用Express搭API。 -
public/：前端文件，包括index.html（结构）、styles.css（样式）、app.js（交互逻辑）。
设计要点：lib/chat.js是灵魂，CLI和Web只是外壳。工具层和执行层管Easysearch的具体操作，对话层管聊天历史和Tool调用循环。
入口层只负责用户交互。这样，智能部分集中，换入口不费劲。
3、对话核心抽象：lib/chat.js的玩法
这个文件是升级的关键，它把 DeepSeek+Tool Use 的逻辑抽出来，CLI 和 Web 都能用。分成三部分：
3.1. 初始化客户端和系统提示
用OpenAI SDK创建DeepSeek客户端（改baseURL就行）。系统提示（SYSTEM_PROMPT）统一定义助手角色：
你是个 Easysearch 助手，支持自然语言查询和写入。
列出能力：
-
全文搜索、
-
聚合统计、
-
列索引、
-
看mapping、
-
建索引、
-
扩展mapping、
-
单条/批量写入。
强调：数据操作必须用工具，别瞎编。CLI 和 Web 都用这个提示，保证行为一致。
3.2. 通用chat函数
暴露chat(messages, userMessage, opts)：
-
把用户新消息加到 messages 历史。
-
调用DeepSeek的
chat.completions.create，带model='deepseek-chat'、tools（从tools.js来）、tool_choice='auto'、messages（system + 历史）。 -
如果没 tool_calls，直接返回模型文本回复。
-
如果有 tool_calls：解析arguments（先去掉//注释，再JSON.parse，避免格式问题），调用
executeTool(toolName, toolInput)执行。结果以tool角色加回messages。循环调用DeepSeek，直到没工具调用。
额外钩子opts.onToolCall(name, input)：CLI里打印“🔧 调用工具: name + params”；Web里收集成标签显示。复用性强！
这样，chat函数成了黑盒：给历史和输入，吐回复和更新历史。CLI / Web只需调用它，不用管Tool细节。
4、Web服务搭建：server.js的API设计
server.js 薄薄一层，用 Express 处理 Web 请求。主要两件事：
4.1. 路由和静态文件
-
express.static('public')：伺服前端文件。 -
POST
/api/chat：接收{ message: 用户输入, history?: 消息历史 }。调用chat()处理，响应{ reply: 回复, toolCalls: 工具调用列表, history: 更新历史 }。
历史管理：前端每次带上历史，服务器拷贝用 chat() 累积，返回新历史。前端存着，下次再传。上下文后端管，前端只展示。
4.2. 透传工具调用
用 onToolCall 钩子收集 toolCalls 数组，随回复返回。用户能看到 AI 调了啥工具、带啥参数，调试 DSL 超方便。
API 简单，扩展友好，不绑 UI。
5、前端实现：商务风聊天界面
前端用纯 HTML+CSS+JS，没框架，易移植。但看起来不 low，商务感拉满。
-
视觉风格
-
背景浅灰(#f8fafc)，主区域白色卡片+阴影。
-
头部：渐变蓝Logo + 标题“Easysearch智能助手” + 副标题“智能搜索与数据分析 · 自然语言驱动”。
-
字体：正文Plus Jakarta Sans（现代商务），代码JetBrains Mono。
-
颜色：蓝系主色(#1e40af/#2563eb)，稳重理性。工具区浅灰区分。
-
布局和交互
JS逻辑：app.js处理fetch /api/chat，渲染消息/工具，存history到localStorage。轻量但专业，像企业工具面板。
-
-
消息区：滚动容器。初始欢迎卡：产品简介 + 示例prompt。用户消息右蓝泡（白字），助手左白卡（阴影）。
-
工具调用条：消息下，渲染标签如[search_documents {params}]，显示AI过程。
-
输入区：卡片内多行输入框 + 发送按钮。回车发，Shift+Enter换行。发送时loading动画。
6、为啥 CLI 到 Web 这么顺滑？
升级没重写逻辑，就三招：
-
抽象对话核心：lib/chat.js封Tool Use，统一接口。CLI/Web都调它。
-
执行展示解耦：executor.js管Easysearch，前端只见工具名+参。换框架只改前端。
-
API稳定：/api/chat协议朴素，易扩多会话。
入口可换，核心不变。从 CLI 自然过渡 Web。
7、落地跑通和扩展建议
7.1. 快速启动
-
npm install（依赖已齐）。
-
.env配置：DEEPSEEK_API_KEY=你的key,
EASYSEARCH_URL=http://127.0.0.1:9200, USER/PASS, PORT=13000
-
npm start，浏览器
http://localhost:13000
用 test-flow-prompts.md 的指令测试：建索引、写数据、搜、聚合、看 mapping。全链路走通。
7.2. 扩展方向
-
加快捷模板：前端加按钮，自动填 prompt，如 TopN 查询。
-
多环境支持：服务器加 env 切换，dev/prod 集群。
-
可视化结果：对聚合数据渲染图表（条形/折线），用 Chart.js 啥的。
基础好：工具层加新 Tool，执行层接任意ES集群，对话层复用，前端管展示。
8、结语
从 CLI 到 Web，逻辑不乱，只抽象公共层，加API + 前端。结果：好用界面+工具可视化，让 Easysearch 易上手。
漫画图解 Easysearch RAG —— 让大模型拥有“自己知识库”的关键技术
Grafana 可视化 Easysearch 数据——从数据源接入到大屏实现
-
小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地，聚焦技能开发、插件实践与部署教程，为开发者提供可直接落地的方案、工具与交流平台，助力高效构建与落地 AI 应用
更多推荐
9
0- 0
已为社区贡献3条内容
所有评论(0)