DevExtreme v26.1 新版亮点解析：AI Agent Skills 如何重塑 DataGrid 与 TreeList 交互

1. DevExtreme v26.1 的 AI Agent Skills 到底解决了什么问题DevExtreme v26.1 这次把 AI Agent Skills 直接做进了控件层最直观的变化是 DataGrid 和 TreeList 这两个高频组件多了一个 AI Assistant 入口。它是什么简单说就是让用户用自然语言去改表格的布局、过滤、分组、排序而不是一层层点开列设置面板。能做什么你可以对着 DataGrid 说“按部门分组金额降序只显示今年数据”组件会自己把配置改好。适合谁适合已经在用 DevExtreme 做后台管理系统、数据看板、报表页面的前端开发者尤其是那些表格列多、筛选条件复杂、用户天天抱怨“找个数据要点八次”的项目。我试过在几个中后台项目里手动维护 DataGrid 的 state列顺序、宽度、过滤条件全要自己存 localStorage用户换台机器就丢。v26.1 的 AI Assistant 把这块交互往前推了一步它不只是帮你写代码而是让最终用户直接在界面上用自然语言操作组件。对开发者来说这意味着 DataGrid 和 TreeList 从“配置项堆出来的表格”变成了“可对话的数据探索工具”。不过要注意能力边界。AI Assistant 改的是组件运行时的显示配置不是数据库结构也不是业务逻辑。它不会帮你写后端接口也不会自动生成新的列定义。它做的是在已有 columns、dataSource 基础上把 filter、group、sort、column visibility 这些 UI 状态用自然语言映射出来。理解这一点后面配置才不会跑偏。2. 前置准备TaoToken 接入与 DevExtreme 环境确认在动手配 AI Assistant 之前先把模型调用链路准备好。DevExtreme 的 AI Assistant 需要一个能接收自然语言、返回结构化配置指令的模型服务。我这边用的是 TaoToken 的 API 来做模型对话验证它的接口兼容常见对话格式接入成本低。官网地址https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址https://taotoken.net/api你需要先去控制台创建一个 API Key然后把它放到后端代理里不要直接写在前端代码里。前端只调用你自己的后端接口后端再去请求模型服务。这一点很重要因为 API Key 暴露在浏览器里等于公开。DevExtreme 侧的环境确认清单项目要求说明DevExtreme 版本v26.1 及以上AI Assistant 是 v26.1 新增能力框架Angular / React / Vue / jQuery配置方式略有差异本文以通用配置为主数据源本地数组或远程 DataSource建议先用本地小数据集验证模型服务可返回 JSON 指令的对话接口用 TaoToken API 做验证浏览器支持语音输入需 Chrome 等语音转文本为可选能力如果你还没拿到 Key可以先到 API Keys 页面创建https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接入文档在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite模型对话验证入口https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite长期做编码和 Agent 集成的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite3. 可复制配置在 DataGrid 中启用 AI AssistantDevExtreme v26.1 的 AI Assistant 配置分两层component 级别和 assistant 级别。核心是aiIntegration设置然后把aiAssistant.enabled打开。打开后组件会自动在工具栏加一个aiAssistantButton点击弹出 AI Assistant Chat。下面是一个 DataGrid 的配置片段你可以直接改数据源后跑起来const gridConfig { dataSource: orders, columns: [ { dataField: orderId, caption: 订单号 }, { dataField: customer, caption: 客户 }, { dataField: region, caption: 区域, groupIndex: 0 }, { dataField: amount, caption: 金额, dataType: number }, { dataField: orderDate, caption: 下单日期, dataType: date } ], aiIntegration: { aiAssistant: { enabled: true, // 自定义请求处理指向你的后端代理 requestHandler: async (prompt, context) { const response await fetch(/api/ai-assistant, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, context, componentType: DataGrid }) }); return response.json(); }, // 常用命令建议降低用户输入门槛 suggestions: [ 按区域分组显示, 只显示金额大于 10000 的订单, 按下单日期降序排列, 隐藏订单号列 ], // 自定义响应文案可用于本地化 customizeResponseText: (text) { return text.replace(Applied, 已应用); }, customizeResponseTitle: (title) { return 助手${title}; } } } };TreeList 的配置结构基本一致只是组件类型换成 TreeList并且它的父子层级会让分组类指令更自然。比如“展开所有一级节点”“按负责人分组”这类指令TreeList 的 AI Assistant 处理起来比 DataGrid 更贴合场景。const treeListConfig { dataSource: orgTree, keyExpr: id, parentIdExpr: parentId, columns: [ { dataField: name, caption: 名称 }, { dataField: owner, caption: 负责人 }, { dataField: status, caption: 状态 } ], aiIntegration: { aiAssistant: { enabled: true, requestHandler: async (prompt, context) { const response await fetch(/api/ai-assistant, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, context, componentType: TreeList }) }); return response.json(); }, suggestions: [ 展开所有节点, 只显示进行中的项目, 按负责人分组 ] } } };后端代理这一层用 TaoToken API 做模型对话把用户 prompt 和组件 context 一起发过去让模型返回结构化的配置指令。下面是一个 Node.js 的示例// /api/ai-assistant export default async function handler(req, res) { const { prompt, context, componentType } req.body; const systemPrompt 你是一个 DevExtreme ${componentType} 配置助手。 根据用户指令返回 JSON 格式的配置变更字段包括 filter, groupBy, sortBy, visibleColumns, expanded。 只返回 JSON不要解释。 ; const response await fetch(https://taotoken.net/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.TAOTOKEN_API_KEY} }, body: JSON.stringify({ model: gpt-4o-mini, messages: [ { role: system, content: systemPrompt }, { role: user, content: 组件上下文${JSON.stringify(context)}\n用户指令${prompt} } ], temperature: 0.2 }) }); const data await response.json(); const content data.choices[0].message.content; let config; try { config JSON.parse(content); } catch (e) { return res.status(200).json({ error: 模型返回格式异常, raw: content }); } res.status(200).json({ config }); }这里的关键点是模型只负责把自然语言翻译成配置对象真正应用到组件上的动作由 DevExtreme 的 AI Assistant 内部完成。你不需要自己写gridInstance.option(filter, ...)组件会接管。4. 验证请求与成功结果配置写完后怎么确认 AI Assistant 真的生效了按下面几步走。第一步启动页面看 DataGrid 工具栏右侧是否出现 AI Assistant 按钮。如果没有检查aiIntegration.aiAssistant.enabled是否为 true以及组件版本是否 v26.1。第二步点击按钮弹出 AI Assistant Chat。在输入框里输入“按区域分组金额降序”。观察表格是否立即变成按 region 分组、amount 降序的形态。第三步打开浏览器 Network 面板看/api/ai-assistant请求是否返回 200返回体里是否包含config字段。如果返回的是error说明模型输出不是合法 JSON需要调整 system prompt。第四步验证语音输入。在支持语音的浏览器里点击麦克风图标说“隐藏订单号列”看列是否消失。语音转文本是浏览器能力DevExtreme 只是把识别结果当作 prompt 传入。一个成功的返回示例{ config: { groupBy: [region], sortBy: [{ field: amount, desc: true }], visibleColumns: [customer, region, amount, orderDate] } }看到这个结构说明模型侧和组件侧已经打通。如果模型返回的是自然语言解释而不是 JSON检查 system prompt 里是否明确要求“只返回 JSON”。5. 本篇常见错排查错误一AI Assistant 按钮不显示。最常见原因是版本不对。v26.1 之前没有这个能力升级到 v26.1 后还要确认引入的 CSS 和 JS 是最新的。另一个原因是aiIntegration写在了错误层级它应该在组件配置根级别不是放在 columns 里。错误二点击按钮后聊天窗口空白。检查requestHandler是否返回了 Promise以及返回结构是否符合组件预期。如果后端报 401说明 TaoToken API Key 没配好去控制台确认 Key 有效并且余额充足。错误三模型返回的配置不生效。大概率是字段名对不上。DevExtreme 的 filter 格式是数组嵌套数组比如[[amount, , 10000]]不是{ amount: { : 10000 } }。在 system prompt 里把目标格式写清楚或者在后端做一层转换。错误四语音输入没反应。语音输入依赖浏览器的 Web Speech API部分浏览器或非 HTTPS 环境下不可用。本地开发用 localhost 可以部署后必须 HTTPS。错误五TreeList 分组指令报错。TreeList 本身有层级结构再叠加 groupBy 可能冲突。建议在 TreeList 场景下优先用“展开/折叠”“过滤”类指令分组类指令留给 DataGrid。错误六API Key 泄露风险。再强调一次不要把 TaoToken 的 Key 写在前端。所有模型请求走你自己的后端前端只跟后端通信。如果发现 Key 泄露立即去控制台重置。6. 把 AI Assistant 接进现有项目的建议如果你已经有一个跑着的 DevExtreme 项目不需要推倒重来。先在某个 DataGrid 页面上加aiIntegration用本地小数据集验证链路。跑通后再把requestHandler换成真实后端代理。对于长期做编码和 Agent 集成的团队建议把模型调用统一收口到一个服务里DataGrid、TreeList、Form 的 AI 请求都走同一个网关。这样 Key 管理、限流、日志都好做。Coding Plan 里有关于长期编码场景的配置方式可以按需参考https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite最后提醒一点AI Assistant 改的是运行时 UI 状态用户刷新页面后这些变更默认不持久化。如果你希望用户的自然语言配置能保存下来需要在customizeResponseText或组件事件里把 config 存到 localStorage 或后端。这块 DevExtreme 没有默认帮你做得自己补。