ERI-spec
这是我在了解谷歌的 A to UI 以及那个 MCP APPS 之前,自己独立的一个想法
在这里演示了一下,怎么去嵌入一个三方应用去给 agent 去使用。
就是以后大家可能不是直接去访问某一个网站,而是在 AI 的对话中去访问这个网站所提供的一个组件(对应的 iframe)。
所以web前端永不死,整个 WEB 生态在 AI 时代会更加蓬勃发展
这是我在了解谷歌的 A to UI 以及那个 MCP APPS 之前,自己独立的一个想法
这是我在了解谷歌的 A to UI 以及那个 MCP APPS 之前,自己独立的一个想法
所以web前端永不死,整个 WEB 生态在 AI 时代会更加蓬勃发展
就是以后大家可能不是直接去访问某一个网站,而是在 AI 的对话中去访问这个网站所提供的一个组件(对应的 iframe)。
在这里演示了一下,怎么去嵌入一个三方应用去给 agent 去使用。
1.
Google 的 A2UI,也就是低代码路线,agent 的客户端对于交互页面有最高的控制能力(我个人一直持有一个非常激进的观点,低代码在通用场景下是死路一条的。然后 agent 客户端这个方面,它其实就是一个通用场景,除非说你的 agent 是针对一个非常特化的业务。)
2.
Anthropic 和 OpenAI 的 MCP Apps,把做好的网页应用挂进对话,这是我比较欣赏的一个方案,他比我更先地去理解到这个路线。也就是更传统的 Web 方案就是最好的 Agent 嵌入ui方案,但是它和 MCP 结合起来,这是一个不正确的做法,所以我不太看好它非要和 MCP 结合起来这个事情。
2.
Anthropic 和 OpenAI 的 MCP Apps,把做好的网页应用挂进对话,这是我比较欣赏的一个方案,他比我更先地去理解到这个路线。也就是更传统的 Web 方案就是最好的 Agent 嵌入ui方案,但是它和 MCP 结合起来,这是一个不正确的做法,所以我不太看好它非要和 MCP 结合起来这个事情。
Anthropic 和 OpenAI 的 MCP Apps,把做好的网页应用挂进对话,这是我比较欣赏的一个方案,他比我更先地去理解到这个路线。也就是更传统的 Web 方案就是最好的 Agent 嵌入ui方案,但是它和 MCP 结合起来,这是一个不正确的做法,所以我不太看好它非要和 MCP 结合起来这个事情。
1.
Google 的 A2UI,也就是低代码路线,agent 的客户端对于交互页面有最高的控制能力(我个人一直持有一个非常激进的观点,低代码在通用场景下是死路一条的。然后 agent 客户端这个方面,它其实就是一个通用场景,除非说你的 agent 是针对一个非常特化的业务。)
Google 的 A2UI,也就是低代码路线,agent 的客户端对于交互页面有最高的控制能力(我个人一直持有一个非常激进的观点,低代码在通用场景下是死路一条的。然后 agent 客户端这个方面,它其实就是一个通用场景,除非说你的 agent 是针对一个非常特化的业务。)
那么再往后的话,应该就到 web 应用时代,现在有两条主流路线:
最常见的一个交互就是 AI 提问题,然后人来回答,这简直就是互联网最早期的 BBS 时代。
现在的大部分 ai 都擅长回答,但并不擅长和用户交互,对于程序员来说,不需要跟 AI 有太多的交互,因为程序员的产出其实就是 AI 回答的东西,也就是代码。但其他普通用户更需要的应该还是交互。
一些证书
搓了个 Vite 插件,让 Agent 能自己 debug 前端代码
bash
Read https://raw.githubusercontent.com/2234839/vite-plugin-pilot/master/SETUP.md and follow its steps to configure vite-plugin-pilot for my project, including installing the plugin, configuring vite.config.ts, and writing the usage guide into the project instruction file.
效果基本可以媲美 Chrome DevTools MCP,用来开发一些运行在稀奇古怪环境(比如你在开发浏览器插件、嵌入式 Webview、某个定制化的客户端)的前端程序的时候非常好用,即便是开发正常前端程序也能达到和 chrome devtools mcp 差不多的效果
这个的作用很简单,就是让 agent 能够在前端使用 eval 执行 js,这样他就能自己检查自己写的前端程序有没有什么bug之类的了
还可以用于探索一些稀奇古怪环境的运行时下怎么实现一些功能,agent同样是有自己探索的能力的,但是这些运行时是没法运行 chrome devtools mcp 这些工具
这个项目本身是我使用 glm5-turbo + cc 迭代出来的,一开始是一个项目中的 vite-plugin.ts 文件,结果发现就这么简单的提供给 agent 在页面执行js的能力就能让他的开发 测试和debug能力得到大幅的提升
想和大家分享的一个有意思的点是在这个迭代过程中本身也是用到了 vite-plugin-pilot 项目中有一个
playground ,我只要提供思路 glm5-turbo 就能自己利用 vite-plugin-pilot 在 playground 中测试使用他的顺手度并完善,由于这个插件完全是由 agent 使用这个插件自身迭代出来的,所以我相信对于agent而言他会能非常顺手的来使用这个工具
事实上在我工作中的真实场景,他确实能够很好的工作在开发插件场景下,能够自行实现功能并测试直到正确完成
于是便创建了一个单独的项目发布出来,希望能够帮助到各位前端开发者❤️
刚刚才发现一个非常帮的issues,我实现了他,现在 alt 时可以滚轮跳转选中范围了
刚刚才发现一个非常帮的issues,我实现了他,现在 alt 时可以滚轮跳转选中范围了
还有一个很大的优势,就是能够调试移动端的移动端的思源、使用 VConsole 之类的方案,我觉得是不如这套完善的。
参考
silkpulse 官网 的 Agent 接入方法,将提示词给你的 Agent,它就可以去控制你的思源浏览器进行调试开发了。
只需要在思源的设置外观,自定义代码里面,新增导入 silkpulse 的 JS 代码
没有找到对应的渲染方法 NodeCustomBlock 最近更新.rss.xml
计算缓存,在依赖没有发生变化的情况下不会进行新的计算,而是使用之前计算的结果
在思源界面直接更新块属性不会去更新块的updated字段,而我打算使用这个字段减少计算量,那么我应该提供一个更简便的修改表达式的界面,在这个界面进行手动的更新块updated
;;;expr
// 需要被翻译的块(文档)的 id
const sourceId = '20241228103033-h9y9bt3';
const sourceAttr = await expr.util.api.getBlockAttrs(sourceId);
// 表达式块的属性
const blockAttr = await expr.util.api.getBlockAttrs(block.id);
// 只支持英文字母和数字,不支持特殊字符和空格
const updateFlag = 'custom-ai-translated-updated';
if (sourceAttr.updated === blockAttr[updateFlag]) {
// 原文档没有更新,所以表达式块的内容也不需要更新
return expr.flag.noOutput;
} else {
const res = await expr.util.api.getBlockKramdown(sourceId);
const kramdown = res ? res.kramdown : res;
if (!kramdown) {
return expr.flag.noOutput;
}
block.Attr={ [updateFlag]: sourceAttr.updated }
return (
'{{{row\n' +
(await aiChatPlugin.openaiAPI.ai翻译为英文({ openai: aiChatPlugin.openaiAPI.openai }, kramdown))
.res +
'\n}}}'
);
}
;;;
为什么现在需要它
AI 编程正在逐步完全接手写代码这件事情,但前端项目的调试一直是一个难点:如果能够使用本地浏览器直接给 agent 调试则还算可以,例如 vscode 的 copilot 支持内嵌浏览器的调试
但还有更多的场景是不支持直接被 copilot 进行操控的,silkpluse 就是为了将这个能力扩展到一切前端项目运行的终端设备。
我相信调试工具的下个形态就是 AI-native :工具不仅仅为人使用而设计,还要为给人服务的 agent 使用而设计。silkpulse 是我这个信念的一次实践
在线体验 :
打开 silkpulse 控制台 (输入密钥或以访客身份进入)点"➕ 接入新设备"生成 iife 代码去其他网页控制台粘贴,30 秒把任意线上页面接入进来。
从这一点我认为 VS Code 天下第一,它才是真正的最好的一个 AI工具。它没有被时代抛弃,而是追赶上了时代潮流,甚至于说我认为它在引领时代潮流。以后这种 Agent 作为内核应该是可以被任意切换的。
我之前使用 Copilot 最重要的一点,就是 VSCode 提供了良好的内置浏览器操作支持。但现在我既可以继续使用更习惯的 Claude Code,又能让 Claude Code 调用 VSCode 提供的浏览器操作能力及其他更多特性。
就在今天,VSCode 发布了一个新版本,它现在能够支持在聊天窗口里切换 Claude Code 来作为实际执行的 agent
最近实践
note amd 利用 npu 的办法:https://ryzenai.docs.amd.com/en/latest/inst.html
https://lemonade-server.ai/ https://github.com/amd/gaia?tab=readme-ov-file
主要还是 lemonade-server ,gaia 也是连接的 gaia (直接安装 gaia 会自动安装 lemonade-server