ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

DevExpress JS ASP.NET Core v25.2 新版亮点:AI 驱动扩展功能升级与 TaoToken 统一接入配置

DevExpress JS  ASP.NET Core v25.2 新版亮点:AI 驱动扩展功能升级与 TaoToken 统一接入配置 1. DevExtreme v25.2 的 AI 列到底解决了什么问题DevExpress JS ASP.NET Core v25.2 这次更新里最值得动手试的是 DevExtreme 的 AI 扩展DataGrid/TreeList 的 AI 列、Form 的智能粘贴以及配套的 DevExpress Documentation MCP 服务器。简单说它把「让 AI 读你的表格数据并生成新列」这件事从自己写后端接口、拼 prompt、处理流式返回变成了在列定义里加一个ai配置块。适合谁正在用 DevExtreme 做管理后台、CRM、工单系统又想让表格具备分类、摘要、翻译能力的开发者。我关心的不是「AI 列能做什么」这种宣传语而是三个落地问题第一AI 列的数据不落库只在当前视图动态生成那它和排序筛选怎么共存第二自动模式和手动模式对 token 消耗的影响差多少第三也是最容易被忽略的——当你的项目里同时有 DevExtreme AI 列、Form 智能粘贴、IDE 里的 MCP 服务器时AI Key 会散落在settings.json、config.toml、后端appsettings.json好几个地方。这篇就围绕这三点给出可复制的配置骨架和验证步骤。2. 接入前的统一 Key 管理为什么用 TaoToken 收敛通道DevExtreme 的 AI 能力本身不绑定某一家模型服务它通过aiIntegration暴露服务设置。这意味着你可以把请求指向任意兼容的 API 端点。问题在于一个中等规模的前端项目里AI 调用点往往不止一处DataGrid 的 AI 列要调一次Form 的 smartPaste 要调一次团队里用 Claude Code 或 Cursor 写 DevExtreme 组件时IDE 侧的 MCP 又要调一次。如果每个调用点各配一个 Key轮换和额度管理会非常痛苦。TaoToken 在这里的角色是统一入口一个 Key、一个 API 通道同时服务浏览器端的 DevExtreme 组件和 IDE 侧的编码工具。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 。你不需要在 DevExtreme 项目里硬编码任何厂商专属的地址只需要把aiIntegration的 endpoint 指向这个基址把 Key 放进环境变量。注意浏览器端直接暴露 Key 有泄露风险。生产环境建议由后端做一层转发前端只调自己的接口本地开发和内网工具可以直接配但要清楚这个边界。3. 可复制配置settings.json 与 config.toml 骨架先给 IDE 侧的配置。如果你用支持 MCP 的编辑器DevExpress Documentation MCP 服务器和 TaoToken 通道可以放在同一份配置里。以settings.json为例骨架如下{ mcpServers: { devexpress-docs: { command: npx, args: [-y, devexpress/mcp-server-docs], env: { DEVEXPRESS_MCP_TRANSPORT: stdio } } }, ai.providers: { taotoken: { baseUrl: https://taotoken.net/api, apiKey: ${env:TAOTOKEN_API_KEY}, models: { default: claude-sonnet-4-5, fast: claude-haiku-4-5 } } } }这里的关键是baseUrl只写一次apiKey走环境变量引用不落盘明文。models里区分 default 和 fast是为了后面 DevExtreme AI 列按场景选模型——分类、翻译这种任务用 fast 就够摘要和见解生成再用 default。再看config.toml适合用命令行工具或 Claude Code 的场景[provider.taotoken] base_url https://taotoken.net/api api_key_env TAOTOKEN_API_KEY default_model claude-sonnet-4-5 [provider.taotoken.models] fast claude-haiku-4-5 reasoning claude-sonnet-4-5 [mcp.devexpress_docs] command npx args [-y, devexpress/mcp-server-docs]两份配置的共同点是TaoToken 的地址和 Key 只出现一次DevExtreme 的 MCP 服务器作为独立条目挂载。这样你在 IDE 里问「Angular 里 DevExtreme DataGrid 的 AI 列怎么配手动模式」MCP 会去查 DevExpress 文档而模型推理走 TaoToken 通道两边互不干扰。4. 在 DevExtreme 组件里接上 AI 列与智能粘贴配置好通道后回到前端代码。DataGrid 的 AI 列核心是columns[].ai配置块。下面是一个 ASP.NET Core 项目里常见的 Razor 页面 jQuery 初始化写法重点是aiIntegration和ai.mode$(#grid).dxDataGrid({ dataSource: orders, columns: [ { dataField: customer, caption: 客户 }, { dataField: rawNote, caption: 原始备注 }, { caption: AI 分类, ai: { mode: manual, prompt: 根据原始备注判断工单类型只返回退款、物流、产品咨询 三者之一。, model: fast } } ], aiIntegration: { endpoint: https://taotoken.net/api, apiKey: window.__TAOTOKEN_KEY__ } });mode: manual是我建议的默认选择。自动模式会在每次视图更新时重新生成所有可见单元格的 AI 值翻页、排序、筛选都会触发token 消耗不可控。手动模式下用户点标题栏的 AI 菜单按钮才生成配合「重新生成数据」和「清除数据」两个动作额度花在哪一目了然。Form 的智能粘贴则是另一个入口。启用后用户从邮件或文档里复制一段非结构化文本点 smartPaste 按钮AI 会把内容拆进各个字段$(#form).dxForm({ items: [ { dataField: name, label: { text: 姓名 } }, { dataField: phone, label: { text: 电话 } }, { dataField: address, aiOptions: { instruction: 地址请统一为「省 市 区 街道门牌」格式不要包含邮编。 } }, { itemType: button, name: smartPaste } ], aiIntegration: { endpoint: https://taotoken.net/api, apiKey: window.__TAOTOKEN_KEY__ } });aiOptions.disabled可以阻止某个字段被智能粘贴填充instruction用来收紧格式要求。实测下来地址、电话这类有固定格式的字段加一句 instruction 的准确率提升很明显。5. 验证请求确认通道真的通了配置写完别急着调组件先用一条最小请求确认 TaoToken 通道可用。用 curl 打一次对话接口curl -s https://taotoken.net/api/v1/messages \ -H Content-Type: application/json \ -H x-api-key: $TAOTOKEN_API_KEY \ -H anthropic-version: 2023-06-01 \ -d { model: claude-haiku-4-5, max_tokens: 64, messages: [ {role: user, content: 只回复两个字通了} ] }返回里能看到content数组带文本说明 Key 和通道都正常。这一步排除了「前端配置写错」和「Key 无效」两类问题后面组件报错时就能直接定位到 DevExtreme 侧。接着验证 DevExtreme 的 AI 列。打开页面点 AI 列的标题栏菜单在提示编辑器里输入分类规则点「重新生成数据」。如果单元格出现分类结果说明aiIntegration的 endpoint 和 Key 被正确读取。如果一直转圈或报错打开浏览器 Network 面板看请求地址——最常见的错误是 endpoint 末尾多写了/v1/messages而 DevExtreme 期望的是基址。MCP 服务器的验证更简单在 IDE 的 Agent 模式里问一句「DevExtreme DataGrid 的 AI 列支持哪些生成模式」如果回答里准确提到自动和手动两种模式并且引用了文档说明 MCP 挂载成功。这一步和 TaoToken 通道是独立的MCP 负责查文档模型推理走通道两者都通才算完整。6. 本篇常见错排查AI 列数据不参与排序筛选。这是设计如此不是 bug。AI 列的值动态生成、不写回数据源所以标准排序和筛选对它无效。如果你的业务需要按 AI 分类筛选得在生成后把值落到自己的状态里或者改用后端预计算。手动模式下「重新生成数据」没反应。检查ai.mode是否拼写正确以及aiIntegration是否挂在 DataGrid 顶层而不是某个 column 里。另外手动模式只对可见单元格生效数据量大时先滚动到目标区域再点。smartPaste 按钮不出现。确认itemType: button且name: smartPaste完全一致大小写敏感。React 项目里用ButtonItem namesmartPaste /Vue 里用DxButtonItem namesmartPaste /别混用。请求 401 或 403。先跑第 5 节的 curl确认 Key 本身有效。如果 curl 通、组件不通检查前端读取环境变量的方式——很多构建工具不会自动把TAOTOKEN_API_KEY注入到window需要显式配置。MCP 查询返回空。提示里要写清楚框架和组件名比如「我在用 Angular 中的 DevExtreme 数据网格」而不是「这个表格怎么配」。MCP 靠关键词匹配文档提示越具体命中越准。7. 下一步把 Key 和通道固定下来DevExtreme v25.2 的 AI 扩展把能力做进了组件但真正决定项目好不好维护的是 Key 和通道有没有收敛。建议你现在就做两件事去 https://taotoken.net/api-keys 生成一个项目专用 Key然后在 IDE 里把 MCP 和模型通道按第 3 节的骨架配好。接入文档在 https://taotoken.net/doc 里面有各语言的最小请求示例。如果你主要用 Claude Code 写 DevExtreme 组件可以看 https://taotoken.net/coding-plan 把编码场景的额度单独规划。配置一次DataGrid 的 AI 列、Form 的智能粘贴、IDE 里的文档查询就都走同一条通道了。
返回列表