跳到主要内容

面向编码智能体的 Data Client

· 阅读需 7 分钟
Nathaniel Tucker
Nathaniel Tucker
Creator of Reactive Data Client

如今编码智能体写了大量 Data Client 代码，而当它们手上有最新的文档和工作流，而不是凭旧版本猜测时，写出的代码会更好。本次发布周期让任何智能体都能更容易地完成这项配置。

新增：

  • Claude Code 插件 - claude plugin install react@data-client 安装适用于你所用框架的 skill
  • Vue skill - Vue 项目得到的是 Vue 组合式函数和测试，而不是 React hook
  • llms.txt - 任何智能体都可以把文档作为 markdown 读取，而且每个页面都会告诉它该去哪里找

同样可用：

快速上手​

安装 /data-client-setup skill 并运行它。它会检测 React 或 Vue 以及你的 API 风格（REST、GraphQL 或自定义），安装你的项目所需的 skill，并配置好 Data Client。对于 REST，它会交给 data-client-rest-setup，由后者把现有的 fetch 或 axios 调用迁移到 endpoint（#4153）。

npx skills add reactive/data-client --skill data-client-setup

Agent Skills 列出了每个 skill，以及如何预先一次安装全部 skill。

Claude Code 插件​

Data Client 仓库是一个 Claude Code 插件市场。core 插件包含 setup、REST、GraphQL、schema 和 Manager skill；react 和 vue 插件添加各自框架的 skill 并引入 core；migrations 插件添加升级 skill（#4153）。 Agent Skills 页面展示了用 skills CLI 和 OpenSkills 完成同样安装的方法。

claude plugin marketplace add reactive/data-client
claude plugin install react@data-client

Vue 请使用 vue@data-client，两者都不用则使用 core@data-client，并在升级前添加 migrations@data-client。

Vue skill​

Vue 项目之前得到的是 React hook 的 skill，因此智能体会套用 React 的模式。 data-client-vue skill 编写 DataClientPlugin 和组合式函数代码，并能调试正在运行的应用（#4126）。 data-client-vue-testing 编写 renderDataCompose() 和 mountDataClient() 测试（#4126），这些测试遵循 Vue 测试指南（#4181）。

llms.txt​

没有 skill 的智能体可以按照 llms.txt 约定把文档作为 markdown 读取（#4171、#4236）：

每个页面都在 <head> 中链接了它的 llms.txt，每个文档页面都链接了它的 markdown，因此拿到任意页面 URL 的智能体都能自行找到它们。

skill 与文档保持一致​

skill 的参考页面现在按框架从这些文档生成，因此它们带有安装命令等共享片段，并且只给 Vue 项目提供 Vue 代码。当 skill 与文档出现偏差时，CI 检查会失败，因此 skill 会随每次发布保持最新（#4170）。

同样可用​

针对每项任务的 skill​

除了 setup 之外，Data Client 应用的每个部分都有对应的 skill。/data-client-setup 会安装你的项目用到的那些：

在 skills.sh/reactive/data-client 浏览全部 skill。

调试正在运行的应用​

问你的智能体"为什么这里没有重新获取？"或"缓存里现在有什么？"，它可以直接检查正在运行的应用，而不是从代码里猜。在开发模式下，DevToolsManager 把每个 store 的 Controller 放在 globalThis.__DC_CONTROLLERS__ 上，因此通过 Chrome DevTools MCP，或在 React Native 中通过 Expo MCP 连接的智能体，可以读取 store、跟踪派发的 action，并把它们与网络请求对应起来。这个映射在浏览器、React Native 和 Node 中都存在（#3753）。

Browser DevTools console
__DC_CONTROLLERS__.get('Data Client: My App').getState();

React 和 Vue 的 skill 通过 Chrome DevTools MCP 驱动这一流程；它们能检查哪些内容请参阅使用智能体调试。

升级 skill​

skill 也负责升级。v0.18 skill 会运行 codemod，然后处理 codemod 做不到的部分，比如为输出依赖 endpoint 参数的 schema 注册 argsKey （v0.18 迁移）。path-to-regexp v8 skill 会重写你 endpoint 中的路径语法。

npx skills add reactive/data-client \
  --skill data-client-v0.18-migration \
  --skill path-to-regexp-v8-migration