当前位置： 首页 > news >正文

MCP Servers玩玩WebUI自动化

news 来源：原创 2025/4/29 5:48:28

MCP Servers快速了解

一文搞懂 MCP Servers
在这里插入图片描述

mcp server网站

  • https://mcpservers.org
  • https://mcp.so
  • https://glama.ai/mcp/servers
  • https://www.pulsemcp.com

一、安装&配置mcp clients

mcp clients可以使用客户端（常见claude desktop，但claude需要海外邮箱登录&手机号接收验证码），也可以使用插件（常用vscode cline插件）。
推荐chatmcp可以直接下载安装包安装，且不需要账号

二、chatmcp配置服务供应商LLM

chatmcp支持OpenAI、Claude、DeepSeek、Ollama、Gemini、OpenRouter。国内最便捷的就是用DeepSeek。

DeepSeek申请API Key

访问DeepSeek开放平台，注册登陆后申请API Key
在这里插入图片描述
选择支付方式就可以使用，计费标准可以直接查看，10块钱就可以用很久了
在这里插入图片描述

配置服务供应商

如图填写API Key，然后点击Fetch即可自动拉取模型deepseek-chat（V3）、deepseek-reasoner（R1）根据需要打开使用即可
在这里插入图片描述

此时已经可以进行单纯的对话

在这里插入图片描述

三、配置UI自动化框架mcp server

寻找自己需要用到的mcp server

根据自己的需要从mcp server网站中寻找自己合适的mcp server（不同的开源项目实现的能力不同，根据自己的需要选择使用即可）
mcp clients调用的mcp server本地服务，需要本地搭建运行环境，构建mcp server进行连接本地服务（也可以调用远程服务）

3.1 举例selenium mcp server

首先需要本地安装selenium运行环境：selenium、chrome、chromedriver

下载安装mcp server

从mcp selenium项目clone代码到本地
安装mcp server

cd mcp-selenium
npm install -g @angiejones/mcp-selenium
配置mcp server

添加服务，按照项目文档填写对应命令command和参数args即可
在这里插入图片描述
运行调试连接，变为方块即为连接成功
在这里插入图片描述

使用mcp server能力

打开selenium mcp 的使用，发送指令“启动chrome浏览器，访问https://www.baidu.com”
在这里插入图片描述
会自动运行chromedriver拉起chrome浏览器，进行相关的操作

可以看到大致的运行原理是：

  • 1、自动携带提示词：生成mcp selenium可接受的指令(支持哪些指令由mcp server决定的，可以根据自己需要编写或二次开发)
  • 2、向DeepSeek模型发起请求，模型将输入的问题推理出mcp selenium可接受的指令并输出
    例如：点击xx按钮，可能推理出指令为 click：xpath， //button(text=‘xxx’)

【推理即存在一定误差性质，比如页面实现按钮是个span、或者页面有多个xx按钮，都可能导致执行失败。
模型并不会捞取页面dom树结构实际解析，纯纯模型推理，所以误差非常高。
想要提高准确性，需要更精细的问题引导模型推理。例如：点击span元素登录；或者尝试点击xxx如果不存在点击xxxx（一些规律出现之后就可以配置成提示词，提高生成指令的准确性）
同样使用其他server都是一样的，由模型生成可接受的指令，mcp server调用本地/远程服务执行操作】

3、向mcp server发送可接受的指令，mcp server调用本地配置好的运行环境（selenium、chrome、chromedriver）
在这里插入图片描述

3.2 举例playwright mcp

首先需要本地安装playwright运行环境

pip install playwright #安装playwright
playwright install #安装playwright支持的浏览器
下载安装mcp server

从mcp-playwright项目clone代码到本地
安装mcp server

cd mcp-playwright
npm install -g @executeautomation/playwright-mcp-server
配置mcp server

添加服务，按照项目文档填写对应命令command和参数args即可
在这里插入图片描述

使用mcp server能力

打开playwright mcp 的使用，发送指令“启动chrome浏览器，访问https://www.baidu.com”在这里插入图片描述
会自动运行chromedriver拉起chromium，进行相关的操作
mcp server运行原理是一样的
在这里插入图片描述

四、使用brower use & mcp server

从上面的两种mcp servers 的使用发现：简单的使用模型推理生成的步骤是很难满足使用的，需要结合网页dom解析、多模态等能力才可以更好的实现webui自动化。继续探索使用brower use。

brower use安装使用

brower use需要python3.11及以上版本，由于一些其他应用的使用本机python版本无法升级。所以构建一套虚拟环境搭建brower use

conda python3.12环境搭建（非必要）

构建虚拟环境使用，pyenv、asdf等系列工具都可以

brew install --cask miniconda  # 通过Homebrew安装Miniconda
conda --version  # 验证安装完成
conda init bash  # 初始化Conda
conda create --name xxxxxxx python=3.12  # 创建新的虚拟环境，指定python版本
conda activate xxxxxxx  # 激活虚拟环境
conda deactivate  # 退出虚拟环境
conda env list  # 列出所有可用的环境
conda env remove -n xxxxxxx  # 删除指定环境

在这里插入图片描述
激活环境即可看到命令行已经显示进入xxxxxxx环境，虚拟环境是会把你当前环境配置一起带过去的，所以安装的python3.12在本机环境配置基础上叠加。需要自行验证一下

python -V  # 可能是本机原本的python2版本
python3 -V  # 可能是本机原本的python3版本
python3.12 -V # 这个肯定是新安装的指定python版本了
pip -V # 检查一下对应的python版本
pip3 -V # 检查一下对应的python版本
brower use安装
pip install browser-use  # 安装browr user
pip install playwright #安装playwright，前面装过的就不用装了
playwright install #安装playwright支持的浏览器，前面装过的就不用装了
webui安装使用
git clone https://github.com/browser-use/web-ui.git
cd web-ui # 进入项目地址
pip install -r requirements.txt  # 安装项目的依赖
python3.12 webui.py --ip 127.0.0.1 --port 7788  # 启动webui服务

浏览器访问127.0.0.1:7788
需要配置LLM，使用前面申请的DeepSeek APIKey即可，URL https://api.deepseek.com
如果使用其他不在默认配置中的模型，根据API风格选择openai，URL&API Key填写对应的即可
在这里插入图片描述
DeepSeek不支持多模态需要关掉设置UseVision（不关掉执行会报错，其他支持视觉的模型不需要关）
在这里插入图片描述
Run Agent直接写入你需要执行的操作步骤，点击Run Agent执行即可.
会自动搜索百度官网地址并访问，解析网页dom检索第二个热搜并点击，自动获取标题文案。一站式自动化操作，更智能&成功率高（理论上加上视觉成功率会更高）
在这里插入图片描述

brower use mcp server配置使用（仅做mcp server集成，brower use自己本身也可以单独执行）

brower use 相当于集成了一个mcp client、一个mcp server、一个playwright工具
在集成一个mcp server相当于可以跟更多的工具联合使用

mcp server下载安装
git clone https://github.com/Saik0s/mcp-browser-use
pip install uv  # 安装uv

配置mcp server到clients

uv  # 命令
--directory /xxxxxxx/mcp-browser-use run src/mcp_server_browser_use/server.py  # 参数，该mcp server配置方式与上面不同，直接运行项目文件# 环境变量，参数意义参考https://glama.ai/mcp/servers/@Saik0s/mcp-browser-use?locale=zh-CN#readme-md
MCP_MODEL_PROVIDER=DeepSeek
MCP_MODEL_NAME=deepseek-chat
MCP_BASE_URL=https://api.deepseek.com
DEEPSEEK_API_KEY=xxxxxx
MCP_TEMPERATURE=0.6
MCP_USE_VISION=false
MCP_HEADLESS=flase
MCP_KEEP_BROWSER_OPEN=true
BROWSER_HEADLESS=false
BROWSER_USE_LOGGING_LEVEL=INFO
PYTHONIOENCODING=utf-8
PYTHONUNBUFFERED=1
PYTHONUTF8=1

在这里插入图片描述

发送命令实行报错，需要修改项目代码

发送命令后发现报错没有DeepSeek模型，根据报错查看项目源码，发现是get_llm_model函数中模型provider的判断是==‘deepseek’，运行有bug，所以函数里面添加一个行代码

/mcp-browser-use/src/mcp_server_browser_use/utils/utils.py. # 需要修改文件的路径provider = provider.lower()  # provider转为全小写，添加至如下图位置

在这里插入图片描述

使用mcp能力调用brower use

在这里插入图片描述

相关文章：

  • 凸包问题 Graham 扫描算法 MATLAB
  • Android Framework 探秘
  • 大模型训练平台：重构 AI 研发范式的智慧基建
  • 新ubuntu物理机开启ipv6让外网访问
  • RAG产品的核心功能原型及构成模块
  • 【星海出品】K8S调度器leader
  • 企业用电管理革新利器 —— Acrel-3000 电能管理系统应用解析
  • 腾讯云服务器独立ip服务器优点是什么?服务器需要固定ip吗？
  • 【MCP教程系列】如何自己打包MCP服务并部署到阿里云百炼上【nodejs+TypeScript】搭建自己的MCP【Cline】
  • 计网分层体系结构(包括OSI,IP,两者对比和相关概念)
  • 如何创建并使用极狐GitLab 受保护标签？
  • iPhone闹钟无法识别调休致用户迟到，苹果客服称会记录反馈
  • 在uni-app中使用Painter生成小程序海报
  • 简单分析自动驾驶发展现状与挑战
  • 无人船 | 图解基于LQR控制的路径跟踪算法(以全驱动无人艇WAMV为例)
  • 【硬件系统架构】哈佛架构
  • Wireshark快速入门--对启动的后端程序进行抓包
  • JVM 生产环境问题定位与解决实战（八）：实战篇——正则表达式回溯引发的CPU 100%
  • 【备份】杂谈
  • mybatis的xml ${item}总是更新失败
  • 油电同智，安全超充！从上海车展看中国汽车产业先发优势
  • 六朝文物草连空——丹阳句容南朝石刻考察纪
  • 上海论坛2025年会聚焦创新的时代，9份复旦智库报告亮相
  • 玉渊谭天丨“稀土管制让美国慌了”，美军工稀土储备仅够数月
  • 为国出征指纹却无法识别？他刷新了我军在这一项目的最好成绩
  • 国家市场监管总局：民生无小事，严打民生领域侵权假冒违法行为