via浏览器如何接入ai工具

这是一个不用买服务器，不用配置域名，能让你免费上线网页的极简部署工具。那现在我们经常用 a f 辅助写代码，也就是 web coding， 但是生成的仅仅限于一个 demo， 就是 总得部署上线才能给别人看吧。 拼觅是我找到最简单的一个解决方案，就是它支持终端命令和浏览器上传两种方式，操作非常简单。我这里呢，以浏览器部署为例，这 这里要注意的一个细节就是我们不能够直接上传所有的源代码，在上传之前，我们需要先在电脑的终端输入这两行的命令，把代码打包成浏览器能看懂的 html 或者是 css 这种文件的格式。那等它执行完之后，我们把默认生成的这个 disk 文件直接拖拽到网页就可以了。 不到一分钟，他就自动把我用珍妮奶开发的每日豆浆食谱 demo 发布到网上了，并且生成了一个永久的链接，操作非常简单，速度也很快，就非常适合前端开发或者是学生用来托管静态的页面。 这种轻量级的工具用起来没有什么负担，大家快去试试吧，我是开心关注我，每天进步一点点。

哇，没想到搜索量最高的 gmail 三在国内如何使用竟然没有人讲解！本期视频就来帮你解决这个问题。首先我们打开电脑自带的 a g 浏览器，找到右上角的这三个点，下滑，选择扩展按钮，点击获取 microsoft 扩展，进入页面后，再到这里的搜索框，输入 cedar 回车键搜索，然后在下方的显示结果中 找到这个点赞最多的 cedar chat gpt 侧边栏，点击旁边的获取按钮后，页面就会弹出询问提示，此时我们再点击添加扩展按钮，等页面提示添加成功后， 再点击查看扩展，进入小叶，找到这个在侧边栏打开的小图标，网页就会自动弹出对话页面。此时我们只需要下滑鼠标再切换模型按钮就可以看到 gamemini 三 pro 已经准备就绪，可以随时随地免费使用。

早用早下班的效率神器，千万别告诉你的同事！这是一个全能助手插件，简单好用，建议收藏。遇到那种半小时的视频不想看，或者超长的文献资料，点一下就能直接帮你总结，还能随时对话。这里面集合了非常多的顶级 ar 大 模型，比如说 gmail 三啊， gpt 五啊， 你想用哪个？都可以，不过有一些需要升级和会员，但是日常用免费的基本就够了。以前要查一上午的资料，现在也就点两下鼠标的事，这哪是插件呢，这简直就是你的贴身助理！如果觉得有用，收藏、点赞加关注，咱们下期再见！

超保姆免费使用 banana， banana 教程，一个视频教会你首先打开浏览器，输入这个网址，登录谷歌账号，在上方的搜索栏中输入这段词，下滑找到这个按钮，点击再点击， 这样就得到了账号和密码。回到画面右上角右键这里选择复制链接，再直接点击 ctrl 加 shift 加 n， 然后跳转到了无痕浏览界面，粘贴刚才复制的网址链接， 之后在登录界面输入刚才的账号和密码，然后一顿点击，再点击界面的左上角，选择第三个按钮，在上方的聊天框中输入这一段词， 最后再点击 no， no， no pro， ok， 现在就可以完全免费使用了。右侧这里还可以选择图片的比例和参数， 在下方的对话栏中直接输入提示词，等待一会就可以得到图片了，是不是效果很好，重要的是这个方法可以无限次重复使用。

大家好，我是 eric， 今天我将介绍一个非常好用的工具 agent brother。 agent brother 是 由 virtual 工程师在周末构建的一个项目，它支持有头无头模式，相比 pre write m c p 呢，上下文占用减少的非常多。 它的最新版呢，支持 c d p 模式，可以连接到任何正在运行的浏览器。我呢通过它做了一系列实验，比如说在 ai 编程的 c d p 模式，可以连接到任何正在运行的浏览器。我呢通过它做了一系列实验，比如说在 ai 编程的相关资讯， 然后帮我去写一个帖子，并且全程他自动帮我发到小抹书上，这是我一开始给他的提示词，然后他就会开始调试。在右侧呢，我们可以看到他将搜索到的信息填到抹书笔记本里的后台， 之后让他生成图片，再接着他就开始写标题，写论文内容，最终呢发布出去。 在这张图片里所有的文字呢都集中在左侧，这个可能是他当时的话，呃，定位不准有关系，后续的话可以再优化一下。我也让他帮我直接发 x 的 帖子，我们看到先给他任务， 然后他搜索之后呢，他搜索到足够的信息，就开始写 call 我 的要点。接着他就通过 c d p 的 模式呢 来使用我已经登录账号的啊浏览器，然后在里面发布帖子。发布成功之后呢，他还会验证一下，看一下是否正式发布成功。之后呢，给他复杂的任务，让他呢呃，一要搜索新闻，第二呢是要写文章， 还要去到 replicate 里面生成一张图片，它列出了四个任务，搜索到之顺之后，它就开始生成图片了，接着写文章。它在下载图片的时候呢，也是进行了多次尝试，最终它生成的文章是稍微有点问题。 目前对 x 平台文章的编辑器呢不是特别熟悉。它尝试了多种方式来填录内容， 填入之后他就会发现呢，呃发布的这个按钮始终不会点亮。所以呢，他后来又尝试了通过 type 命令输入文章内容。但是最后呢，这篇呃文章还是没有发出去，是因为有点问题。比如说我们看这里的标题， co worker， 它有两个问号， 那排版上还是有非常大的问题的。我还让他给我 x 平台上出现的三个帖子写比较友善的评论，而且我提示他广告的推文就不评论了。他打开页面之后， 查看到我页面上呢，呃找到了四个帖子，其中一个是广告。接着呢，他就开始评论了。 第二个评论的时候，它出现了一个问题，这里没有发送成功。然后这是第三个帖子的评论。我还通过 agent browser 呢帮我来做页面的调试。这是一个简单的应用后台呢，用的是啊 complex。 我 先让 agent browser 呢 来测试一下。在这个平台上，呃去点击，让他新增 to do， 并且呢去做一些删除啊完整的动作。他添加了一些 to do， 还是挺不错的。再接着呢，将呃 compose 的 后台信息告诉他， 让 agent broder 呢查看信息，并且给我做详细的汇报。他会浏览 health 页面， functions 页面， 最终呢会给出一个比较详细的报告。我还让 agent browster 呢在 jimmy 平台上输入 ai 绘图提示词，并且生成可爱小猫， 这也是 jimmy 平台的一个问题了，经常它提示让它生成一些啊，图片呢？图像它有的时候可能只是先显示提示词，风格描述等等，那我这里再提示一下 ai， 让它再去完善一下， 之后它就可以生成这样比较可爱的五个小猫的头像了。再接着，我让 ai 在 demo 的 页面上新开页面，选择 deeper research， 通过对 cloud cowalk 进行全方面的调研，让 demo 生成报告。我们看到它这里摸索了一下之后，终于找到 tools 按钮，然后选择深入研究。并且我们看到啊，它这里的提示词是有问题的， 因为 opt 四点五它的知识库问题，它不知道 cooke 已经推出来了，所以它在这里写录的提示词还是 cooke。 那 我这里不得不中断一下它，然后让它对 cooke 进行调研，再之后它就操作成功了。再接着呢，我就让它新开一个 gemini 的 页面，使用 gemini tool 里的 canvas 功能。因为我之前观察到它在找 deeper search 的 时候，啊 tools 找了好久， 所以呢，我这里就明确告诉他是在 tour 里面用 canvas 功能，这样他找的就比较快， 让他生成一个精美的获奖页面。页面的主题呢是火星开 party， 这里 office 四点五生成的提示词，内容还是非常丰富的， 最终生成的啊，这样的一个网页页面也是非常好，而且这还只是 geminis and synkey 模式生成的。再接着，我将五个体注艺术的提示词 直接发给 ai， 告诉他开启五个 gemini 的 页面，分别使用 twos 里的 canvas 生成五个不同的页面。我们看到它这里会一个一个的任务完成，最终告诉我五个任务都完成了。 虽然在 ai 里调用 agent 浏览器，它呢，会一个个点去尝试啊，要有多个步骤， 但是如果我们真的有一些任务比较繁琐，交给他，我们不在乎他啊，处理的时间的话还是非常好的。 比如说这样的一个连续五个提示词，让它在 demo 里对话，如果我自己去点的话，还是要边复一边复制，一边点开一个新的页面再粘贴进去，还是比较麻烦的。 也许之后对一些大模型的测试，我就考虑用这种方式，肯定是会提高我的效率的。最终呢，他告诉我五个任务完成了。我看了一下他，实际上呢是，呃，有一个任务的话没有完成，这是 jammin s n cking 生成的云端码头蒸汽飞艇， 还是非常形象的。接着我让 angel brother 总结一下 c 萌呃，二零二六年一月份所有文章的要点， 他呢，呃，很快就开始帮我来做计划，并且一篇篇的阅读，最终给到详细的文章要点。 这种重复性有点繁琐的任务，对于 h 的 broad 来说的话，使用起来真的是非常方便。之后呢，我还做了一个测试，让他通过 c d p 的 模式呢，登录某东和某宝网站，搜索两个平台，销量最高的三个店铺的大江 pocket 三的价格，整理成表格。 那我们看到它搜索 pocket 销量上啊，还是比较方便的。但是在表格尝试填写这里呢，它遇到了非常大的问题 啊，它这种，这也是 agent browser 目前的一个缺陷，当你让它完成一个陌生人任务的时候，最好呢，先观察一下它进行了哪些步骤，在哪些问题上它是出现了 呃，一些操作来回往复的问题，等到它完成任务之后，您可以让它总结一下啊，中间出现了什么问题，后续如何优化？ 现在呢，就来详细介绍一下。 engineer brother， 它是用代码控制浏览器，让重复的工作自动化，把时间还给创造力，它可以帮我们完成自动化表单填写，网页测试与 ui 自动化。刚刚我有介绍了 to do 应用的一个测试， 还有它可以帮我们完成数据采集和爬虫刚刚给大家展示的某东某宝的数据采集， 特别是啊，因为某东某宝这种平台，它对啊爬虫屏蔽是非常厉害的，所以我们用啊 angela brother 这种工具使用是比较好 啊，用通常的那些啊脚本的话，那会比较麻烦一点，那趣味场景的话，它可以帮助你社交媒体自动化。刚刚我展示了啊发某书或者是 x 的 评论， 它也可以帮助你做一些游戏自动化，在效率场景的话，可以帮助你自动化工作流，批量导出报表自动下载邮件附件，账号的批量管理啊，价格库存的监控，网站健康的检查等等。 而 c d p 模式呢，它是需要以登录的状态，可以利用现有的 chrome 绘画。 agent browser 安装，非常简单，先呢是运行这行命令，然后运行这行命令。 它的核心亮点呢是高性能架构，用了 rust c o i 和 note g s 守护进程，而且它是专为大语言模型进行优化的。它的模式呢是快照模式和引用的模式。安装好 agent broder 之后，我们可以先通过这套命令 来运行一下，看看它输出是什么结果。然后 snapshot 的 话就是它的快照了，它可以获取可访问性的数跟引用，这里有一个 click at 一 二 一二的话就是代表它的引用位置是在哪里，可访问性数呢？它是浏览器根据 dom 生成的语义化结构，专为屏幕阅读器等辅助技术设计的。它是和传统的 dom css 选择器不同， 它只包含有意义的交互元素，比如说按钮啊，链接呀，输入框。当我在终端里运行这项命令的时候，会出现下面的回复， 再运行啊 snapshot 的 话，它就会出现下面的内容，我们看一下是非常简单的。 link 是 哪些啊？ header 是 哪些？它这样的一个设计呢，对 ai 来说是非常友好的。再简单看一下它的核心命令点击输入有哪些， 还有截图，快照，获取信息这些高级功能的话，它有羽翼定位器，用的是 find 啊，还有 cookie， 大家了解一下。我们可以通过保存登录状态，跳过重复登录，比如说第一次登录是这样子的，然后手动完成登录。之后呢，就可以通过 state save 保存 cookie 和存储，再之后的话直接加载状态，无需再登录。 agent browser 它还支持运行多个隔离的浏览器，十例每个绘画拥有独立的 cookie 存储和认证状态。它也支持实时流媒体预览。帮你介绍一下 c d p 模式， 那它可以连接到现有的浏览器。在 ai 编程工具里，使用 agent browser 是 非常方便的，你可以也直接提示他说啊，使用 agent browser 测试登录流程， 让他先运行一下 agent browser help， 查看可用的命令。使用 agent browser 有 一个非常好的推荐，就是用这样的杠 i。 杠 i 的 意思呢，是仅显示交互元素， 包括按钮，链接，出入框，它会帮你节约大量的上下文。再看一下 angel brother， 它和一些其他方案的区别，比如说 pre write 原声脚本呢，开发者自己需要编辑测试，脚本完全可控，但需要编程能力。 刚刚有提到 pre write m c p 呢，它是以 m c p 的 形式结尾改成的，可能会导致大量的 dom 上下文。这里必须要说明一点， code 呢？ 嗯，最近呢，已经开始推出啊 m c p 工具搜索功能了，这个工具搜索就允许 c c。 在 m c p 工具占用过多上下文的情况下，动态地将工具加载到上下文中。这对 m c p 啊，服务器和客户端都是有一点要求的， 有用户反馈，使用 agent brother 之后呢，效率有了极大的提升。我们再看一下 agent brother 和 pre write mcp， 比较详细的啊，一个对比分析，因为在目前的浏览器自动化里面呢， token 主要花在页面显示和动作的回传方面。 angel brother 呢，它是通过精简的快照还有 ref 操作模式，这意味着大块信息只在必要的时候出现，而不是每一次都带一份快照模式可以帮他强力瘦身。 而 provide m c p 呢，它是意味着很多动作之后响应里呢，会附带某种形式的页面表示， 从而把 token 推迟更高。最后呢，介绍一下 agent abroad 的 cdp 模式。呃，官方在这里呢，介绍的比较简单，我在实际运行中的时候是出现了一些问题，后来进行排查， 最终呢，我们看一下怎么去解决它。首先有一个很重要的是因为 chrome 的 安全限制，使用 remote debugging port 的 时候呢， chrome 强烈要求使用非默认的 user data there， 所以 这个问题怎么去解决呢？因为我有两个谷歌的 profile， 所以呢，首先我想要哪个 profile？ 那 我先让 ai 呢，帮我通过这样的命令定位一下有哪些 profile， 然后我选择，比如说 default profile， 那 就告诉他。 再接着呢，呃，就开始复制这个对应的 profile 到新目录，这里是新创建一个目录，然后复制 default 的 一个 profile。 这样复制的一个原因呢？它可以保留之前的 cookie 啊，各种插件信息。再之后呢，第三步就是启动带远程调试的 chrome， 先关闭一下已在运行的 chrome， 然后呢，就启动 chrome， 这里的话， default 可以 你自己选择。还有这个 user data deal 也可以按照你自己的习惯进行命名去复制。接着呢，可以通过这项命令验证一下是否成功。再之后我们就可以用 agent 浏览器 来调用 c d p 的 模式了，如果端口没有监听的话，我们可以通过这项命令进行检查。 这文档我会放在星球里，有兴趣的话可以去关注一下。以上呢，就是今天介绍的所有关于 agent browser 的 工具，这个工具的话你不需要太多的深入，你只要去啊，将这样的命令告诉 ai 编程工具，或者将这个仓库它的一个 skill 文档 啊，放在你的 ai 编程工具里，它就会了解 agent browser 怎么去操作，使用起来还是相当方便的。