Midscene.js：用自然语言驱动全平台UI自动化的AI助手

Midscene.js：用自然语言驱动全平台UI自动化的AI助手

【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

你是否曾因重复的界面操作而感到厌倦？无论是每天登录多个系统、填写相同的表单，还是在不同设备间执行繁琐的测试流程，这些重复性工作不仅耗时耗力，还容易出错。传统自动化工具需要编写复杂的代码，学习曲线陡峭，让许多非技术用户望而却步。

现在，这一切都将改变。Midscene.js——一个基于视觉语言模型的AI自动化框架，让你用自然语言就能控制任何平台的用户界面。无论是Web浏览器、Android设备、iOS系统，还是自定义界面，Midscene都能理解你的意图并自动执行操作。

🎯 核心价值：告别代码，拥抱自然语言

Midscene.js的核心创新在于纯视觉驱动的UI自动化方案。与传统的基于DOM元素定位的工具不同，Midscene完全依赖屏幕截图和AI视觉理解能力，这意味着：

• 零代码门槛：只需要用自然语言描述你想要做什么
• 跨平台兼容：从Web到移动端，再到桌面应用，统一的操作体验
• 视觉智能：像人眼一样“看到”界面，理解按钮、输入框和菜单

想象一下，你只需要告诉AI：“在淘宝搜索无线耳机，按价格排序，然后提取前5个商品的信息”，Midscene就能自动完成所有操作，并将结果以结构化数据返回给你。

🌟 三大核心优势

1. 真正的自然语言交互不再需要学习复杂的XPath或CSS选择器，也不需要记忆API调用方式。Midscene理解你的日常语言，将意图转化为精确的界面操作。

2. 纯视觉定位技术基于先进的视觉语言模型（如Qwen3-VL、Doubao-1.6-vision、Gemini-3-Pro、UI-TARS），Midscene通过分析屏幕截图来定位界面元素，完全摆脱了对DOM结构的依赖。

3. 全平台覆盖能力从浏览器扩展、移动设备到桌面应用，Midscene提供了一致的自动化体验，真正实现了“一次学习，处处可用”。

🏗️ 创新架构：视觉优先的设计哲学

Midscene的技术架构体现了“视觉优先”的设计理念。传统UI自动化工具通常依赖DOM结构来定位元素，但这种方法存在诸多限制：

• 动态内容难以处理
• 跨平台兼容性差
• 对Canvas等非DOM元素支持有限

Midscene彻底改变了这一范式。它采用纯视觉路线进行UI操作：

# 传统方式需要定位DOM元素 click: "#search-button" type: "#search-input", "Midscene.js" # Midscene只需要自然语言 action: "点击搜索框，输入Midscene.js，然后点击搜索按钮"

这种设计带来的直接好处是：

• 大幅减少token消耗：跳过DOM解析，处理速度更快
• 跨平台一致性：无论底层技术栈如何，视觉界面都是通用的
• 更好的容错性：即使界面结构变化，只要视觉布局相似，AI仍能正确操作

Midscene Android Playground界面 - 通过自然语言控制Android设备完成自动化任务

🚀 5分钟快速体验：从零到自动化

让我们从最简单的开始，体验Midscene的魔力。你不需要安装任何开发环境，也不需要编写一行代码。

第一步：安装Chrome扩展

最快捷的方式是通过Midscene Chrome扩展开始体验：

1. 打开Chrome浏览器，访问chrome://extensions/
2. 启用右上角的“开发者模式”
3. 点击“加载已解压的扩展程序”
4. 选择项目中的apps/chrome-extension/dist目录

安装完成后，你会在浏览器右上角看到Midscene的图标。点击它，一个简洁的控制面板就会出现在浏览器右侧。

Midscene Chrome扩展界面 - 直接在浏览器中使用AI自动化功能

第二步：你的第一个自动化任务

让我们从一个简单的搜索任务开始：

1. 打开Google搜索页面
2. 激活Midscene扩展
3. 在Action标签中输入：“在搜索框输入‘Midscene.js AI自动化’，然后点击搜索按钮”
4. 点击“Run”执行

观察奇迹发生！AI会自动定位搜索框，输入文本，并点击搜索按钮——完全按照你的自然语言指令执行。

第三步：探索三种操作模式

Midscene提供了三种直观的操作类型，满足不同场景需求：

🎮 Action（操作）- 执行点击、输入、滚动等交互动作

• 适合：自动化流程、批量操作、重复性任务

🔍 Query（查询）- 从页面提取结构化数据

• 适合：数据采集、信息监控、竞品分析

✅ Assert（断言）- 验证页面状态是否符合预期

• 适合：自动化测试、状态验证、质量检查

🔧 进阶应用：解锁专业级自动化能力

当你掌握了基础操作后，Midscene还有更多高级功能等待探索。

Bridge模式：本地控制远程浏览器

Bridge模式是Midscene的杀手级功能，它允许你通过本地终端运行的SDK来控制远程浏览器。这种设计特别适合：

• 脚本与手动操作结合：在自动化流程中随时插入人工干预
• Cookie复用：保持登录状态，避免重复认证
• 跨设备控制：从你的开发机器控制测试环境的浏览器

Bridge模式界面 - 通过本地SDK远程控制浏览器

通过简单的JavaScript代码，你就能建立连接：

// 建立桥接连接 const agent = new AgentOverChromeBridge(); await agent.connectCurrentTab(); // 执行AI驱动的操作 await agent.aiAction(`在淘宝搜索"无线耳机"，按价格排序`);

Playground：安全的测试环境

当你需要调试复杂的交互逻辑时，Playground提供了完美的解决方案：

• 环境隔离：在独立空间执行操作，不影响主浏览器
• 实时反馈：清晰的操作结果和错误提示
• 多任务支持：同时管理多个自动化流程

Playground界面 - 在独立环境中调试自动化流程

跨平台自动化：不止于浏览器

Midscene的真正强大之处在于它的跨平台能力。除了Web浏览器，你还可以：

控制Android设备：

# 连接Android设备 npx @midscene/android connect # 执行自动化任务 npx @midscene/android run --action "打开设置，查看Android版本"

Android设备控制界面 - 通过网页端控制Android设备

控制iOS设备：

# 连接iOS设备 npx @midscene/ios connect # 执行自动化任务 npx @midscene/ios run --action "打开设置，查看iOS版本"

iOS设备控制界面 - 通过网页端控制iOS设备

🛠️ 生态整合：与现有工具无缝协作

Midscene设计时就考虑了与现有开发工具的集成，让你能在熟悉的开发环境中使用AI自动化能力。

与Playwright/Puppeteer集成

如果你已经是Playwright或Puppeteer的用户，Midscene可以无缝集成到你的现有工作流中：

// 集成Midscene到Playwright const { chromium } = require('playwright'); const { createMidsceneAgent } = require('@midscene/web'); async function runAutomation() { const browser = await chromium.launch(); const page = await browser.newPage(); // 创建Midscene代理 const agent = await createMidsceneAgent(page); // 使用自然语言自动化 await agent.aiAction('登录GitHub账户'); await agent.aiQuery('提取仓库列表和star数量'); await browser.close(); }

MCP（Model Context Protocol）支持

Midscene提供MCP服务，将原子化的Midscene Agent操作暴露为MCP工具，让上层AI代理能够用自然语言检查和操作UI：

# MCP配置示例 tools: - name: midscene_ui_action description: 执行UI操作 parameters: action: "string" - name: midscene_ui_query description: 查询UI信息 parameters: query: "string"

这意味着你可以让ChatGPT、Claude等AI助手直接控制Midscene执行自动化任务！

📈 实际应用场景

电商自动化：价格监控与数据采集

场景：监控多个电商平台的商品价格变化传统方式：需要为每个平台编写特定的爬虫，处理反爬机制，维护成本高Midscene方式：

- action: "打开淘宝，搜索'无线耳机'" - query: "提取前10个商品的价格、名称和店铺" - action: "打开京东，搜索相同关键词" - query: "提取前10个商品的价格、名称和店铺" - assert: "比较两个平台的最低价格"

自动化测试：回归测试与兼容性验证

场景：验证Web应用在不同浏览器和设备上的兼容性传统方式：编写大量测试用例，维护复杂的测试脚本Midscene方式：

- action: "使用Chrome打开应用首页" - assert: "验证登录表单显示正确" - action: "使用Safari打开应用首页" - assert: "验证登录表单显示正确" - action: "在Android设备上打开应用" - assert: "验证移动端布局正确"

日常工作自动化：提升个人效率

场景：每天重复的日常工作流程传统方式：手动操作，耗时且容易出错Midscene方式：

# 早晨工作流程自动化 - action: "打开邮箱，标记重要邮件" - action: "登录项目管理工具，更新今日任务" - action: "打开日历，查看今日会议安排" - query: "从新闻网站提取行业动态"

🔮 未来展望：AI自动化的无限可能

Midscene.js正在快速发展，未来的路线图包括：

🤖 更智能的AI模型集成

• 支持更多视觉语言模型
• 优化模型推理速度和准确性
• 降低使用成本

🌐 更广泛的平台支持

• 桌面应用自动化（Windows、macOS、Linux）
• 游戏界面自动化
• IoT设备控制

🛠️ 更强大的开发工具

• 可视化脚本编辑器
• 智能调试工具
• 性能分析和优化建议

👥 社区驱动的生态建设Midscene是一个开源项目，我们欢迎所有开发者、测试工程师和自动化爱好者的贡献。无论你是想修复bug、添加新功能，还是编写文档，都可以通过以下方式参与：

1. 在GitHub上提交Issue和Pull Request
2. 加入Discord社区讨论
3. 分享你的使用案例和经验
4. 为项目文档做出贡献

🚀 立即开始你的AI自动化之旅

现在就是开始使用Midscene的最佳时机。无论你是想自动化日常工作流程，还是构建复杂的跨平台测试系统，Midscene都能为你提供强大的支持。

立即行动步骤：

1. 克隆仓库：git clone https://gitcode.com/GitHub_Trending/mid/midscene
2. 安装依赖：cd midscene && pnpm install
3. 构建项目：pnpm build
4. 体验Chrome扩展：加载apps/chrome-extension/dist目录
5. 尝试Android/iOS自动化：参考packages/android和packages/ios目录的文档

学习资源：

• 官方文档：docs/
• API参考：packages/core/src/
• 示例项目：apps/playground/
• 社区案例：apps/site/docs/public/blog/

记住，最好的学习方式就是动手实践。从今天开始，每天尝试一个自动化任务，一周后你会发现工作效率大幅提升。Midscene.js将陪伴你在AI自动化的道路上走得更远，让繁琐的界面操作成为过去，让AI成为你的得力助手！

💡 专业提示：从简单的日常任务开始，逐步扩展到复杂的业务流程。Midscene的强大之处在于它的灵活性和可扩展性——你可以从小处着手，慢慢构建完整的自动化解决方案。

拥抱AI技术，开启智能自动化的新时代！让Midscene.js成为你连接人类意图与机器执行的桥梁，释放创造力，专注于真正重要的工作。🚀

【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene