Agent-Native: Builder.io's Open-Source TypeScript Framework Bridging AI Agents and React UI
An in-depth look at Builder.io's open-source Agent-Native framework. We explore how single defineAction declarations unify AI tools with React UI, synchronize s
Builder.io has released Agent-Native, an open-source TypeScript application framework designed to bridge autonomous AI agents and purpose-built user interfaces within a unified architecture. Distributed under the permissive MIT license, the project has gained significant traction across the developer ecosystem, surpassing 6,350 GitHub stars (6,353 stars) and more than 570 forks as of September 2026.
Image source: Builder.io / GitHub
Conventional agentic applications frequently suffer from a sharp architectural disconnect: autonomous agents either operate in headless background silos, or attempt to manipulate interactive interfaces by launching virtual browsers and simulating mouse clicks through brittle Computer Use approaches. Agent-Native eliminates this friction by establishing a shared action layer where frontend React components and autonomous AI tools operate on the exact same business logic and application state.
Unified defineAction Layer: Sharing Logic Across Tools, UI, and Protocols
The core architectural pillar of Agent-Native is 'define once, consume everywhere'. Developers specify domain functionality and business logic once using the defineAction function, and that single implementation becomes immediately accessible across multiple system interfaces.
- Automatic AI Tool Generation: Autonomous LLM agents running in the background automatically interpret defined actions as callable tool specifications, executing tasks as part of their reasoning loops.
- Direct React UI Invocations: Within frontend components, developers invoke the exact same action directly in code using dedicated React hooks such as
useActionQuery, treating it like a standard asynchronous query. - Multi-Protocol Surface: The same underlying action logic is concurrently exposed across standard HTTP endpoints, the Model Context Protocol (MCP), Agent-to-Agent (A2A) communications, and command-line interfaces (CLI).
This unified pattern removes the need to maintain redundant API contracts—such as separate tool schemas for LLMs and REST/GraphQL routes for frontend views—ensuring that user interactions and agent operations remain permanently in sync.
Replacing Fragile DOM Clicks: Synchronizing State via PGlite and PostgreSQL
Where Agent-Native fundamentally departs from visual automation and Computer Use paradigms is how agents interact with the application environment.
Scraping the DOM tree to simulate button clicks and form submissions introduces substantial fragility, often failing upon minor layout refactors or responsive styling shifts. Instead of simulating human screen interaction, Agent-Native enables agents and UI views to share structured application state and underlying database records directly through the action layer.
- Shared Runtime Context: Critical frontend state—such as the user's active page, selected table records, or form modifications—is continuously shared with the agent, providing immediate context without manual prompt assembly.
- Dual-Tier Database Support: For local development and testing, Agent-Native integrates PGlite, a lightweight WASM/Node-compatible embedded PostgreSQL database that requires zero external infrastructure.
- Production Scalability: In production deployments, the system connects directly to standard PostgreSQL databases, ensuring ACID transactions, data persistence, and enterprise scalability.
When a user selects a record on screen, the agent immediately inherits that context; conversely, when an agent executes an action that updates a database row, the React UI re-renders the latest state reactively without requiring full page reloads.
CLI Starter Workflow and Practical Architectural Considerations
To accelerate onboarding, Agent-Native provides a verified single-command CLI starter that scaffolds a complete project structure containing action definitions, React UI integration, and embedded PGlite storage:
npx --yes @agent-native/core@latest create my-agent --standalone --template chat
Running this command creates a standalone agentic application equipped with an interactive chat template, allowing developers to inspect action declarations and test dual agent-and-UI execution out of the box.
When evaluating Agent-Native for real-world development, teams should consider two verified architectural boundaries:
- Not a Computer Use Replacement: Agent-Native is not an external web-scraping or visual computer-control tool. It requires the host application to be architected around its action contracts and shared state conventions, making it ideal for new application development or deep codebase modernization.
- Hosting and Runtime Requirements: While embedded PGlite powers friction-free local development, production deployments require an external PostgreSQL instance alongside a Nitro-compatible hosting runtime to handle production traffic and protocol routing.