{"slug": "owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it", "title": "OwlLayer AI: Letting AI Agents Act on Your UI Instead of Replacing It", "summary": "A developer has released OwlLayer AI, an open-source protocol and toolkit that lets AI agents act on an application's existing UI rather than replacing it, with components declaring typed, schema-validated actions tied to their lifecycle. The system, built on the AITP (Agent-to-Interface Transfer Protocol), routes both text and voice commands through the same tool-calling pipeline and enforces risk levels with Shadow DOM-isolated human-in-the-loop approval prompts. It ships as 12 MIT-licensed packages under @owllayer on npm, with bindings for React, Vue, Svelte, Angular, vanilla JS/HTML, and PHP.", "body_md": "Most AI-in-product integrations fall into two camps, and both have a ceiling.\n\nA 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. 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.\n\nI wanted a third option. That's what **OwlLayer AI** is.\n\nInstead 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.\n\n```\nuseAgentTool(\n  {\n    name: 'add_to_cart',\n    description: 'Add the current product to the shopping cart',\n    schema: z.object({ quantity: z.number().int().min(1) }),\n    risk: 'low',\n  },\n  async ({ quantity }) => {\n    await cart.add(product, quantity);\n    return { productId: product.id, quantity };\n  },\n);\n```\n\nThe 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.\n\nSecurity isn't a wrapper, it's in the protocol\n\nEvery 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.\"\n\nVoice 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.\n\nOne protocol, native bindings everywhere\n\n**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.\n\nWhere it stands, actively developed. 12 packages under @owllayer on npm, MIT licensed, code and docs public now. Official site and demo video landing soon.\n\nBuilt from Abidjan, Côte d'Ivoire 🇨🇮.", "url": "https://wpnews.pro/news/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it", "canonical_source": "https://dev.to/borisbob_91/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it-529d", "published_at": "2026-09-20 22:41:40+00:00", "updated_at": "2026-09-20 22:53:08.715807+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "developer-tools", "ai-tools", "ai-products"], "entities": ["OwlLayer AI", "AITP", "npm", "React", "Vue", "Svelte", "Angular", "OpenAI Realtime"], "alternates": {"html": "https://wpnews.pro/news/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it", "markdown": "https://wpnews.pro/news/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it.md", "text": "https://wpnews.pro/news/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it.txt", "jsonld": "https://wpnews.pro/news/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it.jsonld"}}