{"slug": "agent-native-builder-io-s-framework-for-building-true-agentic-apps", "title": "Agent-Native: Builder.io's Framework for Building True Agentic Apps", "summary": "Builder.io has open-sourced Agent-Native, a full-stack TypeScript framework that unifies human UI interactions and AI agent tool calls through a single \"Action\" primitive defined with Zod schemas. The framework exposes each action simultaneously as React hooks, direct agent tools, MCP protocol endpoints, and REST routes, and ships with a CLI, a Nitro-compatible server with embedded PGlite, and shared real-time application state between users and agents.", "body_md": "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.\n\nWhile chat sidebars are easy to bolt on, they create a fractured user experience:\n\nTo 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.\n\nHere 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.\n\nIn a traditional web application, frontend components trigger client-side functions or API calls. In an agentic system, LLMs invoke tools via JSON schema definitions.\n\nAgent-Native merges these two paradigms into a single unified primitive: **The Action**.\n\n```\n                           ┌────────────────────────┐\n                           │   defineAction(...)    │\n                           │  (Zod Schema & Logic)  │\n                           └───────────┬────────────┘\n                                       │\n         ┌──────────────────┬──────────┴──────────┬──────────────────┐\n         ▼                  ▼                     ▼                  ▼\n  [ React Hooks ]   [ AI Agent Tools ]     [ MCP Protocol ]   [ REST Endpoints ]\n (useActionQuery)    (Direct Invocation)   (Model Context)    (HTTP / CLI)\n```\n\nInstead of defining an API endpoint and then duplicating that logic in an LLM tool prompt, you define the action once using `@agent-native/core`:\n\n``` js\nimport { defineAction } from \"@agent-native/core/action\";\nimport { z } from \"zod\";\n\nexport default defineAction({\n  description: \"\\\"Update the status of a project task.\\\",\"\n  schema: z.object({\n    taskId: z.string().describe(\"The unique ID of the task\"),\n    status: z.enum([\"todo\", \"in_progress\", \"done\"]),\n  }),\n  http: { method: \"POST\" },\n  run: async ({ taskId, status }, ctx) => {\n    // Shared business logic, database mutation & permission checks\n    const updated = await ctx.db.tasks.update(taskId, { status });\n    return updated;\n  },\n});\n```\n\nBecause of this unified structure:\n\n```\n   const { mutate } = useActionMutation(\"updateTask\");\n```\n\nThe 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.\n\nAgent-Native treats application state as a shared real-time ledger between the human and the agent:\n\nBeyond the action layer, Agent-Native ships with full infrastructure support out of the box:\n\nYou can bootstrap a complete agent-native application using the official CLI:\n\n```\nnpx --yes @agent-native/core@latest create my-agent --standalone --template chat\n```\n\nOnce generated, navigate into your directory and start the local development environment:\n\n```\ncd my-agent\nnpm run dev\n```\n\nThis 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.\n\nAgent-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.", "url": "https://wpnews.pro/news/agent-native-builder-io-s-framework-for-building-true-agentic-apps", "canonical_source": "https://dev.to/terminalchai/agent-native-builderios-framework-for-building-true-agentic-apps-13mm", "published_at": "2026-09-20 20:44:57+00:00", "updated_at": "2026-09-20 20:54:08.800797+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "agent-protocols", "ai-tools", "ai-products"], "entities": ["Builder.io", "Agent-Native", "TypeScript", "Zod", "MCP", "Nitro", "PGlite", "React"], "alternates": {"html": "https://wpnews.pro/news/agent-native-builder-io-s-framework-for-building-true-agentic-apps", "markdown": "https://wpnews.pro/news/agent-native-builder-io-s-framework-for-building-true-agentic-apps.md", "text": "https://wpnews.pro/news/agent-native-builder-io-s-framework-for-building-true-agentic-apps.txt", "jsonld": "https://wpnews.pro/news/agent-native-builder-io-s-framework-for-building-true-agentic-apps.jsonld"}}