OpenClaw视觉操作实战:不写接口,让AI直接点按钮、操作软件

OpenClaw视觉操作实战:不写接口,让AI直接点按钮、操作软件

文章目录

目前国内还是很缺AI人才的,希望更多人能真正加入到AI行业,共同促进行业进步,增强我国的AI竞争力。想要系统学习AI知识的朋友可以看看我精心打磨的教程 http://blog.ZEEKLOG.net/jiangjunshow,教程通俗易懂,高中生都能看懂,还有各种段子风趣幽默,从深度学习基础原理到各领域实战应用都有讲解,我22年的AI积累全在里面了。注意,教程仅限真正想入门AI的朋友,否则看看零散的博文就够了。

前言

你有没有遇到过这种情况:老板让你把Excel里的1000条客户信息,一条条复制到某个网页后台里。没有接口,没有导入功能,只有个破网页表单。你坐在那儿像个机器人一样,复制、粘贴、点提交,再复制、再粘贴、手指都快得腱鞘炎了。

或者你想自动抓取某个网站的数据,但那个网站反爬虫做得贼溜,API接口层层加密,你写爬虫写到头发掉光,最后发现人家改版了,你的代码全废。

传统自动化工具比如Selenium、Playwright,确实能解决这些问题。但说实话,写选择器(Selector)就像是在玩“大家来找茬”——你得精确找到那个按钮的XPath或CSS类名,网页一改版,全得重来。这就好比你教一个盲人找开关,必须精确到“门框右边第三块砖上方15厘米处”,稍微装修一下,他就找不着北了。

今天聊的OpenClaw,走了一条完全不同的路子:它让AI像人一样“看”屏幕,用眼睛找按钮,而不是背坐标。


一、OpenClaw是啥?你的数字长工

OpenClaw这玩意儿,2025年底刚冒出来那会儿叫Clawdbot,后来改名叫Moltbot,最后定名OpenClaw。短短三个月,GitHub上星星数冲破21万,比Docker、Kubernetes当年火得还快。

简单说,它是个住在你自己电脑里的AI管家。不同于ChatGPT那种“你问一句我答一句”的聊天机器人,OpenClaw能直接动手干活——操作浏览器、读写文件、执行命令、控制各种软件。最狠的是,它支持“视觉操作”模式,不需要你提供API文档,也不需要写复杂的选择器,它直接看着屏幕操作,跟人类一样。

打个比方,传统RPA(机器人流程自动化)工具像是一个严格按照说明书组装家具的工人,说明书上写“把螺丝A拧进孔B”,万一孔B的位置变了,他就傻眼了。OpenClaw则像是一个真的人,他看着图纸,发现孔位变了,照样能找到该拧螺丝的地方。


二、视觉操作的核心:Snapshot快照系统

OpenClaw的视觉操作靠的是一套叫Snapshot快照系统。这玩意儿的工作原理特别有意思:

当你让OpenClaw操作网页时,它不是去解析HTML代码找id或class,而是直接对当前页面进行“视觉扫描”,把所有可交互的元素——按钮、输入框、链接——都编上号。比如发现页面有20个可点击的元素,它就会给它们标上[1][2][3]

然后AI大模型(比如Claude或GPT)看着这个带编号的截图,理解页面结构,决定点哪个编号。比如它发现“提交”按钮旁边标着[15],就会下发指令:“点击元素15”。

这种方式有几个巨大的好处:

1. 告别元素定位地狱

以前用Selenium,你得写这种代码:

# 传统方式:找元素找到怀疑人生 submit_button = driver.find_element(By.CSS_SELECTOR,"div.container > button.btn-primary:nth-child(3)")

稍微改个class名就报错。现在用OpenClaw,AI直接看,管你class叫btn还是button-v2-new,只要按钮上写着“提交”,它就能认出来。

2. 自适应界面变化

软件更新了,按钮从左边挪到右边?传统脚本直接崩。OpenClaw的AI会重新截图,重新识别,照样能找到按钮。

3. 跨应用操作

不仅限于浏览器,OpenClaw还能操作桌面应用。原理类似——通过屏幕截图+OCR识别,找到“文件”菜单、“保存”按钮,然后模拟鼠标点击。


三、实战:手把手教你让AI自动填表

光说不练假把式。下面来个完整的实战:让OpenClaw自动帮你填写一个网页表单。假设我们要每天自动登录某个后台,下载昨天的销售数据。

步骤1:安装与环境准备

OpenClaw是开源的,基于Node.js。首先你得有Node.js环境,然后用npm安装:

# 克隆仓库git clone https://github.com/openclaw/openclaw.git cd openclaw # 安装依赖npminstall# 安装浏览器自动化依赖(Playwright) npx playwright install chromium 

安装完成后,配置你的AI模型API Key。OpenClaw支持OpenAI、Anthropic的API,也支持本地模型(比如Ollama跑的Llama)。

步骤2:启动视觉模式

OpenClaw提供了一个浏览器控制模块。我们要启动一个特殊的Chromium实例,这个浏览器是独立的,跟你平时上网的浏览器完全隔离,保证安全:

# 启动OpenClaw Gateway openclaw gateway --browser

这会启动一个本地HTTP服务,通常是http://localhost:8080,同时打开一个干净的Chromium浏览器窗口。

步骤3:编写自动化脚本

接下来写个简单的自动化流程。OpenClaw的命令行工具支持直接发送指令:

# 让浏览器导航到目标网站 openclaw browser navigate --url"https://example-admin.com/login"# 等待页面加载完成,获取快照 openclaw browser snapshot --output login_page.json 

这时候,OpenClaw会返回一个JSON,里面包含当前页面所有可交互元素的编号和描述。比如:

{"elements":[{"id":1,"type":"input","label":"用户名"},{"id":2,"type":"input","label":"密码"},{"id":3,"type":"button","text":"登录"}]}

然后你告诉AI要干嘛。OpenClaw内置了AI理解层,你可以用自然语言:

# 让AI理解页面并执行登录(视觉模式) openclaw browser act --instruction"在用户名框输入'admin',密码框输入'123456',然后点击登录按钮" --use-vision 

背后的流程是:OpenClaw截图→送给AI模型→AI返回具体操作(如在元素1输入文字,点击元素3)→OpenClaw执行。

步骤4:进阶:自动下载报表

登录后,假设我们要点进“报表中心”,下载昨天的Excel。继续:

# AI会自动识别"报表中心"链接并点击 openclaw browser act --instruction"找到并点击'报表中心'或'Reports'链接" --use-vision # 等待页面加载sleep2# 选择日期(假设有个日期选择器) openclaw browser act --instruction"在起始日期选择昨天的日期,格式2026-03-03" --use-vision # 点击下载按钮 openclaw browser act --instruction"点击下载Excel或Export按钮" --use-vision # 等待下载完成,移动文件到指定目录 openclaw exec--command"mv ~/Downloads/yesterday_report.xlsx ~/data/daily/"

看到没?全程没写一行CSS选择器,全靠AI“看”页面自己找按钮。这就像你雇了个实习生,你跟他说“去把那个红色的下载按钮点了”,而不是给他写一份《按钮定位坐标说明书》。


四、不止浏览器:桌面软件也能点

OpenClaw的视觉能力不仅限于网页。通过集成计算机视觉和OCR,它还能操作桌面应用。

比如你有个老旧的ERP客户端,没有API,只有个Windows界面。传统自动化得靠PyAutoGUI硬编码坐标,屏幕分辨率一变就完蛋。OpenClaw的做法是:

  1. 截取屏幕快照
  2. OCR识别文字和按钮位置
  3. AI理解“文件”菜单在哪,“导出”按钮在哪
  4. 模拟鼠标点击和键盘输入

配置方式类似,只是指令变成:

# 截图并识别桌面应用 openclaw desktop snapshot --app"ERP Client"# 执行操作 openclaw desktop act --instruction"点击菜单栏的'文件',然后选择'导出数据'"

这种方式甚至能操作远程桌面、虚拟机里的软件,只要能看到画面,AI就能操作。


五、定时任务:让AI自己起床干活

最爽的是,OpenClaw支持Heartbeat(心跳)机制。你可以设置定时任务,让AI在特定时间自动执行操作,完全不需要你盯着。

编辑config/heartbeat.yml

tasks:-name:"每日数据抓取"schedule:"0 9 * * *"# 每天上午9点actions:-type: browser instruction:"登录后台,下载昨日销售报表"-type: command instruction:"分析报表数据,生成摘要"-type: notify instruction:"把摘要发到我的Telegram"

这样,每天早上9点,你的电脑就像有个隐形的员工,自动开机(如果你设置了唤醒),打开浏览器,登录网站,下载文件,分析数据,最后给你发条消息汇报:“老板,昨天的销售额是5万,比前天涨了10%。”


六、数据安全:你的隐私留在本地

很多人担心:让AI看我屏幕,数据会不会泄露?

OpenClaw设计之初就强调本地优先(Local-First)。所有操作都在你自己的机器上完成,截图不会上传到云端,除非你用了第三方的AI API(比如调用Claude分析图片)。但即使你调用了API,你也可以选择本地模型,比如用Ollama跑个Llama 3.2 Vision,完全离线运行。

另外,OpenClaw的浏览器是独立的Chromium实例,跟你平时用的Chrome完全隔离。它看不到你的收藏夹、密码、Cookie。你可以在隔离环境里登录工作账号,而你的个人浏览记录完全不受影响。


七、避坑指南:新手常踩的雷

虽然OpenClaw很强大,但新手用视觉操作时也容易踩坑:

1. 动态加载的坑

有些网页是懒加载的,一开始没那么多元素,滚动才出现。这时候直接截图,AI可能找不到目标。解决方法是先让AI执行滚动:

openclaw browser act --instruction"向下滚动直到看到'加载更多'按钮"

2. 弹窗处理

遇到系统弹窗(比如下载确认框),浏览器层面的Snapshot可能捕捉不到。这时候需要用到桌面视觉模式,而不是浏览器模式。

3. API额度控制

视觉操作需要把截图发给AI模型分析,一张图可能几百KB,频繁操作会很快消耗API额度。建议本地部署视觉模型,或者控制操作频率。

4. 元素编号会变

每次页面刷新,元素的编号[12]可能会变。别硬编码编号,要让AI每次都重新看页面找元素。


八、总结:从“码农”到“监工”

OpenClaw的视觉操作模式,本质上改变了我们和软件交互的方式。以前,你要让电脑干活,得先学会它的语言——HTML、CSS、XPath、API文档。现在,你可以用人类的语言指挥AI,让AI去学软件的语言,帮你点按钮、填表单、抓数据。

这就像工业革命,以前你要自己纺纱织布,后来有了机器,你只需要操作机器。现在更进一步,你连机器都不用自己操作,告诉AI“去织块布”,它就自己去踩缝纫机了。

当然,AI现在还不够完美,偶尔会认错按钮,或者遇到复杂的验证码搞不定。但相比以前写几百行选择器代码,现在的工作量已经减少了90%。剩下的10%,你坐在旁边喝咖啡,看着AI干活,偶尔纠正一下它的错误,从“码农”升级成了“监工”。

如果你经常遇到那种“没有接口,只能手动点”的重复性工作,不妨试试OpenClaw。反正代码是开源的,搭个环境试试不要钱。说不定试完之后,你会发现:原来那些枯燥的重复劳动,真的可以交给一个不知疲倦的数字长工来完成。

目前国内还是很缺AI人才的,希望更多人能真正加入到AI行业,共同促进行业进步,增强我国的AI竞争力。想要系统学习AI知识的朋友可以看看我精心打磨的教程 http://blog.ZEEKLOG.net/jiangjunshow,教程通俗易懂,高中生都能看懂,还有各种段子风趣幽默,从深度学习基础原理到各领域实战应用都有讲解,我22年的AI积累全在里面了。注意,教程仅限真正想入门AI的朋友,否则看看零散的博文就够了。

在这里插入图片描述

Read more

【MCP】详细了解MCP协议:和function call的区别何在?如何使用MCP?

【MCP】详细了解MCP协议:和function call的区别何在?如何使用MCP?

本文介绍了MCP大模型上下文协议的的概念,并对比了MCP协议和function call的区别,同时用python sdk为例介绍了mcp的使用方式。 1. 什么是MCP? 官网:https://modelcontextprotocol.io/introduction 2025年,Anthropic提出了MCP协议。MCP全称为Model Context Protocol,翻译过来是大模型上下文协议。这个协议的主要为AI大模型和外部工具(比如让AI去查询信息,或者让AI操作本地文件)之间的交互提供了一个统一的处理协议。我们常用的USB TypeC接口(USB-C)统一了USB接口的样式,MCP协议就好比AI大模型中的USB-C,统一了大模型与工具的对接方式。 MCP协议采用了C/S架构,也就是服务端、客户端架构,能支持在客户端设备上调用远程Server提供的服务,同时也支持stdio流式传输模式,也就是在客户端本地启动mcp服务端。只需要在配置文件中新增MCP服务端,就能用上这个MCP服务器提供的各种工具,大大提高了大模型使用外部工具的便捷性。 MCP是开源协议,能让所有A

By Ne0inhk
超详细图文教程:用vscode+copilot(代理模式)便捷使用mcp+一个范例:用自然语言进行3d建模

超详细图文教程:用vscode+copilot(代理模式)便捷使用mcp+一个范例:用自然语言进行3d建模

在vscode使用claude mcp吧! 在vscode更新到最新版本(注意,这是前提)后,内置的copilot可以使用mcp了!!! 关于mcp(Model Context Protocol 模型上下文协议),可以参考我的上一篇文章: MCP个人理解+示例+集成管理+在python中调用示例,给AI大模型装上双手-ZEEKLOG博客 以下是使用教程: 1.点击左下角的齿轮状设置按钮,点击设置 2.在输入面板输入chat.agent.enabled,勾上勾选框 3.点击Ctrl+shift+P,输入reload,点击重新加载窗口,刷新窗口 4.打开copilot后,在右下角将模式改为代理即可。 5.点击工具按钮,开始安装mcp 先去github找到自己想要添加的mcp服务,以blender MCP为例,打开https://github.com/ahujasid/blender-mcp,可以在readme文档里看到详细的安装过程。可以看到,

By Ne0inhk
【大模型系列篇】大模型基建工程:基于 FastAPI 自动构建 SSE MCP 服务器

【大模型系列篇】大模型基建工程:基于 FastAPI 自动构建 SSE MCP 服务器

今天我们将使用FastAPI来构建 MCP 服务器,Anthropic 推出的这个MCP 协议,目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。FastAPI 基于 Starlette 和 Uvicorn,采用异步编程模型,可轻松处理高并发请求,尤其适合 MCP 场景下大模型与外部系统的实时交互需求,其性能接近 Node.js 和 Go,在数据库查询、文件操作等 I/O 密集型任务中表现卓越。 开始今天的正题前,我们来回顾下相关的知识内容: 《高性能Python Web服务部署架构解析》、《使用Python开发MCP Server及Inspector工具调试》、《构建智能体MCP客户端:完成大模型与MCP服务端能力集成与最小闭环验证》   FastAPI基础知识 安装依赖 pip install uvicorn, fastapi FastAPI服务代码示例  from fastapi import FastAPI app

By Ne0inhk
02-mcp-server案例分享-Excel 表格秒变可视化图表 HTML 报告,就这么简单

02-mcp-server案例分享-Excel 表格秒变可视化图表 HTML 报告,就这么简单

1.前言 MCP Server(模型上下文协议服务器)是一种基于模型上下文协议(Model Context Protocol,简称MCP)构建的轻量级服务程序,旨在实现大型语言模型(LLM)与外部资源之间的高效、安全连接。MCP协议由Anthropic公司于2024年11月开源,其核心目标是解决AI应用中数据分散、接口不统一等问题,为开发者提供标准化的接口,使AI模型能够灵活访问本地资源和远程服务,从而提升AI助手的响应质量和工作效率。 MCP Server 的架构与工作原理 MCP Server 采用客户端-服务器(Client-Server)架构,其中客户端(MCP Client)负责与服务器建立连接,发起请求,而服务器端则处理请求并返回响应。这种架构确保了数据交互的高效性与安全性。例如,客户端可以向服务器发送请求,如“查询数据库中的某个记录”或“调用某个API”,而服务器则根据请求类型,调用相应的资源或工具,完成任务并返回结果。 MCP Server 支持动态发现和实时更新机制。例如,当新的资源或工具被添加到服务器时,

By Ne0inhk