OwlLayer AI: 让 AI Agent 直接操作你的 UI，而非取代它

Most AI-in-product integrations fall into two camps, and both have a ceiling. A chatbot bolted onto the side of your app can talk, but it can’t act - it has no real connection to your components, your state, or your business logic. 目前大多数产品中的 AI 集成方案主要分为两类，且都存在局限性。一种是挂载在应用侧边的聊天机器人，它能对话却无法执行操作——它与你的组件、状态或业务逻辑之间没有真正的连接。

Generative UI goes the other way: the LLM regenerates the interface on the fly, and the first time it hallucinates a layout, your design system and your carefully built business rules are gone. I wanted a third option. That’s what OwlLayer AI is. 另一种是生成式 UI（Generative UI）：大模型（LLM）实时重新生成界面，但一旦它在布局上产生“幻觉”，你的设计系统和你精心构建的业务规则就会瞬间失效。我想要第三种选择，这就是 OwlLayer AI 的由来。

The core idea: Neural-DOM Binding. Instead of scraping the DOM or handing a model raw control over your page, your components declare their own actions - named, typed, schema-validated, with an explicit risk level. 其核心理念是：神经 DOM 绑定（Neural-DOM Binding）。它不再通过抓取 DOM 或将页面的原始控制权交给模型，而是让组件声明自己的操作——这些操作具有名称、类型、模式验证（schema-validated）以及明确的风险等级。

useAgentTool(
  {
    name: 'add_to_cart',
    description: 'Add the current product to the shopping cart',
    schema: z.object({ quantity: z.number().int().min(1) }),
    risk: 'low',
  },
  async ({ quantity }) => {
    await cart.add(product, quantity);
    return { productId: product.id, quantity };
  },
);

The tool’s lifecycle is tied to the component’s. Mount it, the tool appears in the agent’s capability registry. Unmount it, it’s gone. 工具的生命周期与组件绑定。组件挂载时，工具出现在 Agent 的能力注册表中；组件卸载时，工具随之消失。

Security isn’t a wrapper, it’s in the protocol. Every tool carries a risk level. High and critical risk pause and render a Human-in-the-Loop approval prompt, isolated via Shadow DOM. Nothing critical runs without an explicit human “yes.” 安全性不是外加的包装，而是内置于协议中。每个工具都带有风险等级。高风险和关键风险操作会暂停执行，并通过 Shadow DOM 隔离渲染出“人在回路”（Human-in-the-Loop）的确认提示。没有人类明确的“同意”，任何关键操作都不会执行。

Voice is first-class, not bolted on. A voice command routes through the exact same tool-calling and approval pipeline as text. Built on OpenAI Realtime, Gemini Live, and LiveKit. 语音是原生支持的一等公民，而非后期添加的补丁。语音指令与文本指令通过完全相同的工具调用和审批流程。该系统基于 OpenAI Realtime、Gemini Live 和 LiveKit 构建。

One protocol, native bindings everywhere. AITP (Agent-to-Interface Transfer Protocol) connects your LLM to your UI. One TypeScript server orchestrates everything; framework-idiomatic bindings sit on top for React, Vue, Svelte, Angular, vanilla JS/HTML, and PHP. 一套协议，处处原生绑定。AITP（Agent-to-Interface Transfer Protocol，代理至界面传输协议）将你的 LLM 与 UI 连接起来。一个 TypeScript 服务器负责统筹一切；针对 React、Vue、Svelte、Angular、原生 JS/HTML 和 PHP 的框架惯用绑定则构建于其上。

Where it stands, actively developed. 12 packages under @owllayer on npm, MIT licensed, code and docs public now. Official site and demo video landing soon. Built from Abidjan, Côte d’Ivoire 🇨🇮. 项目现状：正在积极开发中。npm 上 @owllayer 下已有 12 个包，采用 MIT 协议，代码和文档现已公开。官网和演示视频即将发布。项目诞生于科特迪瓦阿比让 🇨🇮。

Repo: https://github.com/borisbob91/owllayer 仓库地址：https://github.com/borisbob91/owllayer