Agent Native: Build Apps Your AI Agent Can Actually Edit With You
Agent Native is an open-source TypeScript framework for apps where AI agents and humans edit the same live interface. Here's how it works.
What is Agent Native?
Agent Native is an open-source TypeScript framework from Builder for building applications where an AI agent and a human work inside the same interface, editing the same underlying data in real time. Instead of describing every change in a chat window and waiting for the app to catch up, you click into the interface and edit directly, and the agent picks up from whatever state the app is actually in. The framework ships with example apps, most notably a Slides app, and supports React, bring-your-own model, and self-hosted deployment from your own repository.
TL;DR
- Agent Native is an open-source TypeScript framework that lets you build interfaces where both a human and an AI agent can edit the same live application state, not just chat about it.
- The flagship example is a Slides app, where you can generate a deck from a prompt, manually edit text and slide order, and then ask the agent to continue from your edited version.
- Edits flow through shared actions, functions like “update slide” that define inputs, validation, and the actual change logic, callable from both the UI and the agent.
- A context awareness layer tells the agent what you’re currently looking at or have selected, so a request like “shorten this” applies to the right slide or draft instead of a guess.
- You can run the framework locally with Node 22.22+ and PNPM, connect your own model provider (including local Ollama), and the core framework itself is free, though model usage and infrastructure can cost money.
- Because the project is open source, you can hand the generated codebase to Claude Code or Codex and ask it to add new features, like a review checklist, that work through the same shared-action pattern.
- The example apps are labeled alpha, so expect to spend time testing prompts, actions, and edge cases rather than treating any generated output as final.
Other agents ship a demo. Remy ships an app.
Real backend. Real database. Real auth. Real plumbing. Remy has it all.
How does Agent Native actually work?
The core idea is that the application UI and the agent are not separate systems bolted together. They both operate on the same data through the same defined operations, called actions. In the Slides example, an action like “update slide” has a description of what it does, a schema defining its inputs (deck ID, slide ID, and either a targeted text replacement or new slide content), and a run function that performs the edit, checks permissions, and notifies connected clients after saving.
React components call these actions through hooks such as useActionQuery for reads and useActionMutation for writes. The same actions can also be exposed over HTTP and MCP, which means the agent calls the identical operation a button in your UI would call. The practical benefit: if you later add a rule (say, rejecting an empty slide title), both the human-facing editor and the agent inherit that rule automatically, because they’re going through the same code path.
Slides also illustrates a nuance worth knowing: the browser editor sends granular editing operations through a broader “patch deck” action, while the agent uses more specific actions like “update slide.” Both route through the same underlying deck and locking mechanism, so different entry points can have different shaped inputs while still operating safely on the same shared record.
What does the Slides example actually do?
Slides is a presentation builder where you can type a prompt like “create a six-slide presentation for React developers about building an AI content assistant” and get a generated deck, slide by slide, visible as it’s built. From there you can:
- Double-click any heading or body text to edit it directly, with standard text formatting controls.
- Drag slide thumbnails in the filmstrip to reorder them.
- Select a sentence and choose “revise with AI” from a bubble menu, which opens a small prompt scoped to just that selected text.
- Go back to the agent and ask for a specific edit, for example “keep the heading I just edited exactly as it is, replace the body with three points about X.”
The meaningful test here isn’t whether the agent can write slide copy. It’s whether the agent respects what you already changed by hand: did it edit the slide you had open, did it preserve your manual heading edit, did it leave the slide in the position you dragged it to. Those details are the actual proof that the agent is working against current application state rather than some earlier generated version.
Slides also supports import (PDF, Google Slides, PPT) and templates to start from, plus export to HTML, PDF, PPTX, or Google Slides when you want to move the result into another tool.
Why does context awareness matter here?
One coffee. One working app.
You bring the idea. Remy manages the project.
An agent that can edit things is only useful if it edits the right thing. Agent Native’s context awareness layer passes along information like the current view and current selection, so an action can fetch the relevant record without the user having to restate it. In Slides, that context identifies which deck and which slide or element is selected. In a hypothetical content editor built on the same framework, it could be the current draft and the specific paragraph being edited.
This matters in practice: if a user has a video description open and asks the agent to “shorten it,” the request needs to be tied to that specific open draft, not resolved by the agent guessing among several similarly named documents. The framework leaves the job of wiring up this context to the developer. A reasonable approach is to start with a few meaningful IDs (the open document, the current selection) and confirm the agent can retrieve the right content before building more complex behavior on top.
A simple way to test this yourself while developing: open one draft, make a manual edit, ask the agent to summarize “the current version,” then switch to a different draft and repeat the same request. If the agent’s answer tracks whatever you actually have open, the context layer is doing its job.
How do you run and customize it yourself?
Getting a local copy running requires Node 22.22 or later and PNPM. The documented path uses a scaffolding command (create-my-dash-slides via the agent-native/core package) with --standalone --template slides flags, followed by pnpm install and pnpm dev to launch a local instance. Corepack enable is the documented fallback if PNPM isn’t already available.
Once running, you connect a model: options include Builder’s own hosted setup, your own provider connection (the video’s walkthrough used Open Router), or a local Ollama model. The framework itself is free and open source, but model usage and any hosting infrastructure you choose can still carry costs, so it’s worth starting with small decks and avoiding unnecessary image generation while you’re still learning the editing workflow.
Because the generated project is just a TypeScript codebase you own, you can open it in Claude Code or Codex and ask for new features in plain language, for example adding a review checklist to each deck that both a human and the embedded agent can read and update through a shared action. The practical test is the same as before: tick an item manually, then ask the agent which items are still incomplete, and confirm both sides are reading from the same saved state.
Is Agent Native worth building with right now?
It depends on what kind of app you’re building. The framework is explicitly aimed at workflows involving multiple rounds of browsing, selecting, editing, and reviewing, things like presentations, content calendars, or document editors, where order, layout, and exact wording matter and a single chat exchange doesn’t capture that well. If your use case is really just “ask a question, get a short answer,” a plain chat interface already covers that and the added complexity of shared actions and context wiring isn’t worth it.
Worth noting: the example apps are currently labeled alpha. Connecting an agent to a live editor doesn’t guarantee every generated edit is good, and you’re still responsible for evaluating the model, your prompts, and how your actions validate changes before you trust the pattern for anything important.
Frequently Asked Questions
What is Agent Native used for?
- ✕a coding agent
- ✕no-code
- ✕vibe coding
- ✕a faster Cursor
The one that tells the coding agents what to build.
It’s used for building applications where an AI agent and a human both edit the same live interface and data, such as presentations, rather than an agent just generating output that a person reviews separately in chat.
Do I need to use Builder’s hosted models to use Agent Native?
No. You can connect your own model provider, including services like Open Router, or run a local model through Ollama. Builder’s hosted option is one choice among several.
What’s the difference between Agent Native and a normal AI chat assistant?
A chat assistant typically works through back-and-forth text describing changes. Agent Native wires the agent directly into the application’s shared actions and context, so it edits the same live state you can also edit by hand, and it’s aware of what you currently have open or selected.
Can I customize the open-source example apps myself?
Yes. Because the code lives in your own repository, you can use a coding agent like Claude Code or Codex to inspect the existing project structure and add new features that follow the same shared-action and context patterns already in place.
Is Agent Native free to use?
The framework itself is free and open source. Costs come from the model provider and any hosting infrastructure you choose to connect, so actual spend depends on your setup.
