autonomo (Sebringj)

自治 MCP

给你的AI眼睛和手。

厌倦了“它奏效了”的谎言？Autonomo MCP让你的AI在真实的硬件上证明这一点，就在你最喜欢的编辑器中。

你的人工智能终于可以看到并驱动你正在运行的应用程序——所有这些应用程序，一次完成。 它读取结构化的JSON状态，与UI元素交互，并立即知道某些东西是正常工作还是损坏。

没有截图。没有幻觉。没有“相信我，兄弟”

只是真实的、实时的、可视化的结对编程。

适用于：GitHub Copilot•Claude Code•Cursor•Windsurf•任何兼容MCP的AI

🌐 https://sebringj.github.io/autonomo/

______________________________________________________________________

什么是Autonomo MCP？

你的AI编码助手非常出色。它可以编写代码，重构系统，并对架构进行推理。但它一直在做这一切 盲的 --无法查看它构建的内容或驱动它创建的接口。

它编写一个组件，告诉你“应该工作”，然后继续。你编译。你跑。你检查屏幕。你回复说：“没有，还是坏了。”

Autonomo解决了这个问题。

它给你的AI 实时访问应用程序的结构化JSON状态 --屏幕、元素、错误、用户信息——跨网络、iOS、Android和桌面。你的AI可以读取该状态，与UI元素交互，并立即知道某个东西是工作还是坏了。不是通过观察像素，而是通过读取真实数据。 当你还在发育的时候之后不行。

旧循环：

Write code → Compile → Run → Squint at screen → Describe what you see → Hope the AI understands

Autonomo循环：

Tell the AI what you want → Watch it build and interact live → Correct in real time

运作原理

在每一个动作之后，你的AI都会得到所发生一切的统一快照：

AI sends command: {"action": "press", "target": "Submit"}
                              ↓
            ═══ UNIFIED SNAPSHOT RETURNED ═══

UI State:
  screen: "confirmation"
  elements: ["Order.Number", "Order.Details", "Home.Button"]

App State:
  orderId: "ORD-12345"
  cartCleared: true

Network:
  POST /api/orders → 201 (245ms)
  response: { id: "ORD-12345", status: "confirmed" }

Errors:
  [] (none)

Console:
  ["Order created successfully"]

你的AI无法猜测发生了什么。它 看到一切。如果有什么东西坏了，它会立即修复。

为什么不截图？

______________________________________________________________________

安装

JavaScript/TypeScript（npm）

# React
npm install autonomo-react

# Core (for vanilla JS/TS)
npm install autonomo-core

MCP服务器（全局）

npm install -g autonomo

看 QUICKSTART.md 有关完整的设置说明。

______________________________________________________________________

⚡ 30秒内开始

告诉你的AI助手：

Install Autonomo in my project. Read https://github.com/sebringj/autonomo/blob/main/QUICKSTART.md

你的人工智能会处理其余的事情——安装软件包、配置MCP以及将网桥添加到你的应用程序中。

平台特定提示

复制粘贴您平台的提示：

React/Next.js/Remix：

Install Autonomo for my React app. Read https://www.npmjs.com/package/autonomo-react

React Native/Expo：

Install Autonomo for my React Native app. Read https://www.npmjs.com/package/autonomo-react-native

Swift/iOS：

Install Autonomo for my Swift iOS app. Read https://github.com/sebringj/autonomo/blob/main/packages/autonomo-swift/README.md

颤振：

Install Autonomo for my Flutter app. Read https://github.com/sebringj/autonomo/blob/main/packages/autonomo_flutter/README.md

python

Install Autonomo for my Python app. Read https://github.com/sebringj/autonomo/blob/main/packages/autonomo-python/README.md

红宝石：

Install Autonomo for my Ruby app. Read https://github.com/sebringj/autonomo/blob/main/packages/autonomo-ruby/README.md

Kotlin/Android：

Install Autonomo for my Kotlin app. Read https://github.com/sebringj/autonomo/blob/main/packages/autonomo-kotlin/README.md

C净值：

Install Autonomo for my C# app. Read https://github.com/sebringj/autonomo/blob/main/packages/Autonomo.CSharp/README.md

角度：

Install Autonomo for my Angular app. Read https://www.npmjs.com/package/autonomo-angular

Deno新鲜：

Install Autonomo for my Deno Fresh app. Read https://github.com/sebringj/autonomo/blob/main/docs/DENO_FRESH_INTEGRATION.md

安装后

问你的AI：

“你能在我的应用程序中看到哪些元素？”

“按登录按钮，告诉我会发生什么”

人工智能将实际与您的跑步应用程序交互并报告结果。 🎉

演示项目

想看看Autonomo的实际应用吗？看看 LocalStack Todo应用程序 --具有Autonomo集成的全栈React+AWS Lambda应用程序：

git clone https://github.com/sebringj/localstack.git
cd localstack

演示包括：

• React 19前端 useAutonomo 钩子
• LocalStack（本地AWS模拟器）上的Python Lambda函数
• 预先配置的MCP设置
• VS一键启动代码任务

尝试提示您的AI： *使用testuser/testpass登录，添加待办事项，标记完成，然后删除*

需要帮助？

让你的AI调用帮助工具获取文档：

"Call autonomo_help to show me how to set up local development"
"Call autonomo_help with topic recommend for guidance"
"Call autonomo_help with topic local-development/auth-bypass"

主题包括： overview, recommend, elements, custom-actions, troubleshooting，以及 local-development/* AWS、Azure、GCP模拟器、身份验证绕过、支付等子主题。

______________________________________________________________________

为什么这很重要：盲编码的终结

AI编码助手有一个肮脏的秘密：他们会产生幻觉。他们编写代码，说“应该行得通”，然后继续前进。如果不关注正在运行的应用程序，他们就无法证明任何事情。

Autonomo改变了方程式：

你的AI从“我认为”变为“我验证”：

Before: AI writes code → hopes it works → moves on → bugs found later

After:  AI writes code → sees the result → spots the failure → fixes it →
        confirms success → moves on with confidence

这就是缺失的感觉。愿景。让人工智能编码真正可靠和快乐的东西。

______________________________________________________________________

专为内环设计

Autonomo存在于你开发的地方——你的本地机器、你正在运行的应用程序、你紧凑的迭代周期：

                      YOUR LOCAL MACHINE

    [Editor]          [Autonomo]          [Your App]
    + AI Tool    ◄───►  Server     ◄───►  (localhost)
        │
        ▼
    Write code → AI interacts immediately → See results → Fix → Repeat

    ════════════════════════════════════════════════════════
    100% LOCAL • NO CLOUD • NO LATENCY • NO DATA LEAVING
    ════════════════════════════════════════════════════════

关键原则：

• 🔌 MCP本地 -一个集成适用于Copilot、Claude、Cursor等
• 🔒 100%本地 -永远不会有任何东西离开你的机器
• 🌐 语言无关 -HTTP协议适用于任何堆栈
• 🆓 大多数人免费 -收入低于100万美元免费， 查看许可证

检测→ Act → 迭代

这是你的AI持续运行的开发循环：

1. 检测 -获取当前状态（UI+应用程序+网络+错误）
2. 法案 -发送命令（导航、按下、填充、调用API）
3. 迭代 -查看统一结果，决定下一步或修复代码

AI无法猜测发生了什么。它 看到一切 并且可以立即解决问题。

多设备开发

构建聊天功能？多人游戏？有多个用户吗？

Autonomo支持 多个同时运行的应用程序实例 --浏览器选项卡、模拟器窗口、独立进程。你的AI可以驱动它们：

🟢 my-app-a3f7c2d1 (web)     ← Browser Tab 1
   Screen: checkout
   Elements: 12

🟢 my-app-b8e4f9a2 (web)     ← Browser Tab 2
   Screen: settings
   Elements: 8

🟢 my-app-c1d6e3b7 (mobile)  ← iOS Simulator
   Screen: home
   Elements: 15

示例：“在设备A上，发送消息。在设备B上，验证消息是否到达。”

你的AI看到了双方。实时。一次发展会议。

自定义操作

有些交互很复杂——OTP条目、OAuth流、多步骤向导。自定义操作允许您创建AI可以像其他命令一样调用的快捷方式：

示例：注册a devLogin 在本地开发过程中绕过OTP/OAuth的操作——你的AI会像其他任何操作一样调用它。

看 自定义操作指南 了解详情。

______________________________________________________________________

安全生产（devOnly）

所有Autonomo软件包都包含 devOnly 选项（默认值： true)这会自动禁用生产环境中的网桥。这意味着：

• ✅ 默认安全 -Bridge不会在生产构建中运行
• ✅ 无代码更改 -只需正常部署您的应用程序
• ✅ 零开销 -没有WebSocket连接，没有状态报告

它是如何工作的：

在生产中明确启用 （很少需要）：

// React/React Native
useAutonomo({ name: 'my-app', devOnly: false })

// Angular
autonomo.init({ name: 'my-app', devOnly: false })

官方开发者徽章（React）

React包包括一个用于本地开发品牌和状态的小型官方浮动徽章：

• 灰色边框=未激活
• 绿色边框+✓ 脉冲=激活
• 红色边框+×脉冲=错误

import { useAutonomo, AutonomoDevBadge } from 'autonomo-react';

function App() {
  const { connected, status } = useAutonomo({ name: 'my-app' });

  return (
    <>
      
      
    
  );
}

AutonomoDevBadge 默认情况下仅为dev(devOnly: true)并支持放置覆盖 placement, offset，以及 style.

平台支持

注： WebSocket是跨包的主要架构。已发布的npm包是 autonomo-core, autonomo-react，以及 autonomo-react-native。其他平台SDK目前是GitHub/源代码测试包。

架构：基于元数据，而非基于HTML

Autonomo不解析DOM或HTML。 它使用自注册模式：

              ═══ METADATA REGISTRY PATTERN ═══

Your UI Framework (any)
    │
    ▼
Component mounts → registers with bridge:

    { id: "Checkout.Submit",
      type: "button",
      onTap: () => handleSubmit() }

Component unmounts → unregisters
    │
    ▼
Bridge maintains registry:

    elements: Map

When command arrives → look up handler → invoke

此模式适用于支持以下内容的任何框架：

1. 生命周期挂钩 -了解视图/控件何时装载/卸载
2. 回调 -将处理程序附加到元素
3. HTTP客户端 -报告状态，接收命令

这基本上是所有构建过的UI框架。

适用于所有地方（相同模式）

无论框架如何，控制API都是相同的：

// Register a tappable element
registerTapHandler("Checkout.Submit", () => handleSubmit());

// Register a fillable input
registerFillHandler("Checkout.Email", (value) => setEmail(value));

// Register a screen/view
registerScreen("checkout", { cartItems: 3, total: 45.99 });

如果你的框架有生命周期挂钩和回调，Autonomo就可以工作。

MCP工具

智能元素分组

当应用程序有许多重复元素（如日历日或列表项）时， autonomo_get_state 自动折叠它们以减少噪音：

Elements:
- AIChat.Panel → tap
- AIChat.Input → fill
- WebApp.Schedule.Day.* (44 items, tap)   ← Collapsed!
- WebApp.Nav.teams → tap

扩展组： 使用 expand 用于钻取折叠组的参数：

get_state(bridge: "web", expand: "WebApp.Schedule.Day")

错误首次显示

错误总是显示在状态输出的顶部，而不是隐藏在元素中：

⚠️ Error: league_id, title, and start_at are required

Screen: "schedule"
Elements:
- ...

集成模式：文档+AI，而非SDK

传统方法： 每个框架发布一个SDK，维护20个包，版本地狱。

自主方法： 船 集成指南 （markdown），人工智能编码代理用于集成。

Developer: "Add Autonomo to my Vue app"
                    ↓
AI Agent reads: autonomo/guides/vue.md

  Contains:
    • Vue lifecycle patterns (onMounted, onUnmounted)
    • Composable template for registration
    • Example integration code
    • Verification steps
                    ↓
AI Agent writes the integration code tailored to YOUR app

    • Creates autonomo.ts composable
    • Wraps your existing components
    • Adds IDs to key elements
    • Verifies integration works via Autonomo itself!

AI验证自己的工作：

AI: "I've added Autonomo to your Vue app. Let me verify..."

[AI uses Autonomo tools to interact with the integration]

AI: "✅ Confirmed - I can see 12 elements registered.
     Pressed LoginButton - works correctly."

安装

npm：

# Core
npm install autonomo-core

# React
npm install autonomo-react

MCP服务器（全局）：

npm install -g autonomo

python

pip install git+https://github.com/sebringj/autonomo.git#subdirectory=packages/autonomo-python

红宝石：

# Gemfile
gem 'autonomo', git: 'https://github.com/sebringj/autonomo.git', glob: 'packages/autonomo-ruby/*.gemspec'

Swift（Package.Swift）：

.package(url: "https://github.com/sebringj/autonomo.git", from: "0.1.0")
// Then add to target: .product(name: "Autonomo", package: "autonomo")

颤振（pubspec.yaml）：

dependencies:
  autonomo:
    git:
      url: https://github.com/sebringj/autonomo.git
      path: packages/autonomo_flutter

启动MCP服务器（WebSocket模式）：

autonomomo-mcp
# Or with custom port:
autonomomo-mcp --port 9877
# Or via env var:
AUTONOMO_PORT=9877 autonomomo-mcp

应用程序通过WebSocket自动连接。无需 --bridge 标志或HTTP端点。

包裹

注： autonomo-core 是基本的JS/TS包-用于普通JavaScript、Node.JS、web组件、Electron或任何没有专用包的框架。React包是围绕核心的一个薄包装。

文档

• QUICKSTART.md - 最快路径 -30秒后开始跑步
• 贡献.md - 贡献 -如何为Autonomo做出贡献
• docs/CUSTOM_ACTIONS.md - 自定义操作 -复杂交互的快速路径操作
• MCP_INTEGRATION.md -Autonomo如何与AI工具协同工作
• 测试_桥梁_建筑.md -深入了解实施情况
• 协议_规格.md -通用HTTP API（语言识别）
• docs/DENO_FRESH_INTEGRATION.md -Deno Fresh Island建筑
• 产品_地图.md -功能路线图
• 业务_PLAN.md -开源→ 企业商业模式

许可证

双重许可证：AGPL-3.0+商用

太长，读不下去了：收入低于100万美元？随心所欲地使用它，免费。超过100万美元，想关闭你的代码？ 获得商业许可证.

看 许可证.md 了解全部细节。

______________________________________________________________________

通过观察而不是猜测来发展。

你的AI终于可以看到它正在构建什么了。

______________________________________________________________________

If Autonomo makes your AI coding better, a ⭐ or sponsorship helps keep it moving.