# Agent-Native: a TypeScript framework where the agent and the UI share actions

> Agent-Native is BuilderIO's open-source TypeScript framework for apps that are both rich UIs and autonomous agents: capabilities are defined once as actions, and the agent, the UI, HTTP, MCP, A2A and the CLI all call the same implementation. It is pre-1.0 and releasing at high velocity.

**BuilderIO/agent-native** — A framework for building agentic apps

- Repository: https://github.com/BuilderIO/agent-native
- Website: https://www.agent-native.com
- Stars: 6,913 · Forks: 626
- Language: TypeScript
- License: not declared
- Published: 2026-09-15 · Updated: 2026-09-15 · Language: en
- Canonical page: https://hysenlabs.com/projects/builderio-agent-native

## The agent does not click through your UI

The framework's central rule is one sentence in its own documentation: the agent does not click through the UI, it works through the same action layer. Every capability is defined once as an action, and two consumers call it, the agent as a tool and the interface from code, both passing through the same validation, permissions and implementation. Data is shared in both directions, so work the agent finishes shows up in the UI and work done in the UI is visible to the agent, and the agent additionally receives relevant application state, such as the current page, selected record or active view. The root package.json compresses the pitch into one line: don't choose between rich user interfaces and autonomous agents. The argument behind it borrows from coding agents, whose environments give them context, tools, files, tests and previews rather than a bare text box, and asks why knowledge work apps should offer their agents less.

## actions/hello.ts, one file serving six surfaces

An action is a TypeScript module with a zod schema and a run function:

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

// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
export default defineAction({
  description: "Return a friendly greeting.",
  schema: z.object({
    name: z.string().default("world").describe("Name to greet"),
  }),
  http: { method: "GET" },
  run: async ({ name }) => {
    return { message: `Hello, ${name}!` };
  },
});
```

Drop that in actions/hello.ts and the framework wires it everywhere at once. The agent receives hello as a tool. React code calls the same function with useActionQuery("hello", { name: "Alex" }). The http field exposes it as an HTTP endpoint, and the same definition is further exposed through MCP, A2A and the CLI. Writing the validation once, in the schema, is what keeps the six surfaces from drifting apart, and the permissions model applies uniformly because there is only one implementation to guard.

## npx create, and what ships in the box

Starting an app is one command with a template flag:

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

The chat template matches the framework's included surfaces. Agent chat lets people delegate work, ask questions and review results inside the same UI they use for everything else. Authentication and permissions control who can access and change shared work. Skills and memory give agents reusable expertise and persistent context, automations run agent work on schedules or events, and agent teams delegate to specialist agents in the same workspace or across connected agents. The backend story is concrete: PostgreSQL in production and PGlite for local development, deployable to any Nitro-compatible host. A getting started guide at agent-native.com/docs/getting-started carries the full introduction.

## /visual-edit: Claude Code editing the running app

One shipped skill signals how seriously the framework takes the agent-plus-UI pairing. Running /visual-edit inside Claude Code edits a running application on a canvas instead of prompting for each small UI adjustment, lets you compare live pages side by side, then asks Claude to apply the chosen edits to your source:

```text
/visual-edit the onboarding flow, plus home at every breakpoint
```

That example brings up the onboarding screens next to Home at desktop, tablet and mobile sizes, where a button's color or spacing can be adjusted directly and the pending edits handed back to the source tree. The full walkthrough, including sharing details, lives in skills/visual-edit/README.md. The interesting property is the direction: the agent moves the UI and the source together, rather than the UI being a read-only window onto the agent's work.

## Bring your own LLM, database and infrastructure

The vendor posture is unusually hands-off for a company-backed framework: bring your LLM, SQL database, tools and infrastructure, and everything you build stays yours. BuilderIO is the organization behind it, but the repository contains no hosting requirement and no model requirement, and deployment targets anything Nitro-compatible. The configuration directories in the tree tell their own story about how the project is built: .claude/, .codex/, .gemini/ and .agents/ alongside AGENTS.md and CLAUDE.md mean the codebase is set up to be worked on by multiple coding agents, which is the framework's philosophy applied to its own development. Product intent is documented in-tree too, in PRODUCT.md, DEVELOPMENT.md and a PARITY-LOG.md, rather than living only in issues.

## Six open-source agents as reference buildings

The README shows a gallery of example agents, each usable as a starting point or as a worked example. Clips records and understands meetings, screens and voice notes, and it is developed actively enough to have its own desktop release track, tagged Clips Desktop v0.1.322. Design generates and refines interactive designs, Slides creates and edits on-brand presentations, Analytics answers questions about your data and builds dashboards, Calendar handles time finding, scheduling and bookings, and Mail prioritizes email, drafts replies and follows up, with an Assets app also in the table. For a team evaluating the framework, these are more than demos: they are full applications exercising the action layer, the agent chat and the permissions model, written in the structure your own app would use.

## 0.1.x at daily velocity, with boundary tests in CI

Release cadence is extreme: v0.1.273, a nightly numbered v0.1.150-nightly.375 and Clips Desktop v0.1.322 were all tagged on 2026-09-29, and the last push came the same day. Semver at 0.1.x means no compatibility promises, and changesets under .changeset/ are the mechanism to watch for what moves. Engineering discipline shows up in the test chain, where two guard scripts run alongside the suites: test:core-package-reachability and test:toolkit-must-not-import-core, tests whose only job is to stop architectural boundaries from eroding, with test:fast excluding database, integration and end-to-end suites for quicker loops. Formatting runs on oxfmt with oxlint alongside, in .oxfmtrc.json and .oxlintrc.json. The licence question needs attention: GitHub recognizes none at the repository level, while the root package.json declares ISC, so commercial adopters read both before relying on either.

## Conclusion

Adopt Agent-Native if you are building a product where people and an agent work on the same data through the same actions, and a TypeScript stack with PostgreSQL fits. Pin carefully or wait if you need a stable API, since the project sits at 0.1.x with multiple releases on a single day. Verify first what licence applies to your use, because GitHub recognizes none at the repository level while the root package.json declares ISC, and work through the getting-started guide before committing to the action structure.

## FAQ

### What is Agent-Native?

Agent-Native is an open-source TypeScript framework from BuilderIO for building apps that pair autonomous agents with a purpose-built UI. Each capability is defined once as an action that the agent uses as a tool and the UI calls from code.

### How do you create an Agent-Native app?

Run npx --yes @agent-native/core@latest create my-agent --standalone --template chat. The full introduction is in the getting started guide at agent-native.com/docs/getting-started.

### What is included with Agent-Native?

Agent chat, authentication and permissions, skills and memory, automations that run on schedules or events, agent teams, and a PostgreSQL backend that uses PGlite for local development. Six open-source example agents, from Clips to Mail, ship as references.

## Sources

- [BuilderIO/agent-native on GitHub](https://github.com/BuilderIO/agent-native)
- [Issues](https://github.com/BuilderIO/agent-native/issues)
- [Project website](https://www.agent-native.com)
- [README](https://github.com/BuilderIO/agent-native/blob/main/README.md)
- [Releases](https://github.com/BuilderIO/agent-native/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/builderio-agent-native