<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: BorisBob91</title>
    <description>The latest articles on DEV Community by BorisBob91 (@borisbob_91).</description>
    <link>https://dev.to/borisbob_91</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4134650%2F021df884-54a2-4df1-a0d6-e8cbab155977.png</url>
      <title>DEV Community: BorisBob91</title>
      <link>https://dev.to/borisbob_91</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/borisbob_91"/>
    <language>en</language>
    <item>
      <title>OwlLayer AI: Letting AI Agents Act on Your UI Instead of Replacing It</title>
      <dc:creator>BorisBob91</dc:creator>
      <pubDate>Sun, 20 Sep 2026 22:41:40 +0000</pubDate>
      <link>https://dev.to/borisbob_91/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it-529d</link>
      <guid>https://dev.to/borisbob_91/owllayer-ai-letting-ai-agents-act-on-your-ui-instead-of-replacing-it-529d</guid>
      <description>&lt;p&gt;Most AI-in-product integrations fall into two camps, and both have a ceiling.&lt;/p&gt;

&lt;p&gt;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. 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.&lt;/p&gt;

&lt;p&gt;I wanted a third option. That's what &lt;strong&gt;OwlLayer AI&lt;/strong&gt; is.&lt;/p&gt;

&lt;h2&gt;
  
  
  The core idea: &lt;strong&gt;Neural-DOM Binding&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nf"&gt;useAgentTool&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;add_to_cart&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Add the current product to the shopping cart&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;object&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;number&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="na"&gt;risk&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;low&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;quantity&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;cart&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;product&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;productId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;product&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quantity&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Security isn't a wrapper, it's in the protocol&lt;br&gt;
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."&lt;/p&gt;

&lt;p&gt;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.&lt;br&gt;
One protocol, native bindings everywhere&lt;br&gt;
&lt;strong&gt;AITP&lt;/strong&gt; (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.&lt;br&gt;
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.&lt;br&gt;
Built from Abidjan, Côte d'Ivoire 🇨🇮.&lt;/p&gt;

&lt;p&gt;Repo: &lt;a href="https://github.com/borisbob91/owllayer" rel="noopener noreferrer"&gt;https://github.com/borisbob91/owllayer&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnsqaulnf2gf151wjixrv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnsqaulnf2gf151wjixrv.png" alt=" " width="640" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
