Agent-Native: Builder.io's Framework for Building True Agentic Apps

Over the past two years, the software industry rushed to add AI to existing applications. In 95% of cases, the implementation looked identical: an iframe or floating chat sidebar pinned to the right-hand corner of a traditional web app.

While chat sidebars are easy to bolt on, they create a fractured user experience:

To solve this architectural disconnect, Builder.io has open-sourced Agent-Native (BuilderIO/agent-native)—a full-stack TypeScript framework designed for applications where human users and AI agents collaborate as first-class citizens across the exact same action layer.

Here is an architectural deep dive into how Agent-Native works, how it bridges the UI with agent toolsets, and how to build your first agent-native application.

In a traditional web application, frontend components trigger client-side functions or API calls. In an agentic system, LLMs invoke tools via JSON schema definitions.

Agent-Native merges these two paradigms into a single unified primitive: The Action.

                           ┌────────────────────────┐
                           │   defineAction(...)    │
                           │  (Zod Schema & Logic)  │
                           └───────────┬────────────┘
                                       │
         ┌──────────────────┬──────────┴──────────┬──────────────────┐
         ▼                  ▼                     ▼                  ▼
  [ React Hooks ]   [ AI Agent Tools ]     [ MCP Protocol ]   [ REST Endpoints ]
 (useActionQuery)    (Direct Invocation)   (Model Context)    (HTTP / CLI)

Instead of defining an API endpoint and then duplicating that logic in an LLM tool prompt, you define the action once using @agent-native/core:

import { defineAction } from "@agent-native/core/action";
import { z } from "zod";

export default defineAction({
  description: "\"Update the status of a project task.\","
  schema: z.object({
    taskId: z.string().describe("The unique ID of the task"),
    status: z.enum(["todo", "in_progress", "done"]),
  }),
  http: { method: "POST" },
  run: async ({ taskId, status }, ctx) => {
    // Shared business logic, database mutation & permission checks
    const updated = await ctx.db.tasks.update(taskId, { status });
    return updated;
  },
});

Because of this unified structure:

   const { mutate } = useActionMutation("updateTask");

The biggest frustration with AI assistants is context-blindness. If a user is inspecting a financial report or viewing a specific kanban column, having to prompt the agent with "Look at the quarterly column" is tedious.

Agent-Native treats application state as a shared real-time ledger between the human and the agent:

Beyond the action layer, Agent-Native ships with full infrastructure support out of the box:

You can bootstrap a complete agent-native application using the official CLI:

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

Once generated, navigate into your directory and start the local development environment:

cd my-agent
npm run dev

This starts a local Nitro-compatible server with embedded PGlite, auto-registers all actions inside the /actions directory, and serves an interactive collaborative UI with built-in agent chat and inspection panels.

Agent-Native represents the natural evolution of software engineering in the age of generative AI. By retiring disconnected chat bubbles and unifying the action layer across code and models, it enables developers to build applications where AI is an active, reliable collaborator.