# Agent-Native

> Define a capability once as an action; the agent calls it as a tool, the UI calls it from code

- Category: App Orchestration / App Frameworks
- Language: TypeScript
- Repository: https://github.com/BuilderIO/agent-native
- Website: https://www.agent-native.com
- Canonical page: https://ai-tldr.dev/tools/agent-native/

## In short

Agent-Native is an open-source TypeScript framework from Builder.io for building agents that pair autonomous work with a purpose-built interface. It sits in the App Frameworks category of the App Orchestration tools and is open-source, written in TypeScript. To get started: create a project.

## Overview

Agent-Native is an open-source TypeScript framework from Builder.io for building agents that pair autonomous work with a purpose-built interface. Its central idea is the action: you define each capability once, and that single definition serves both callers — the agent receives it as a tool, and your React UI calls the same function from code. Both paths run through the same validation, permissions and implementation, so the two surfaces cannot drift apart.

The framework's argument for giving agents a UI comes from coding agents: they work well partly because their environment supplies context, tools, files, tests and previews that make capabilities and results visible. Agent-Native aims to bring that same kind of environment to knowledge work, where a UI shows what an agent can do and gives people familiar ways to inspect, edit, approve and share its output. Notably, the agent does not drive the interface by clicking through it — it works through the same action layer the UI uses.

Alongside shared actions, the framework shares data and application state: work the agent does shows up in the UI, work done in the UI is available to the agent, and the agent receives relevant UI state such as the current page or selected record. It ships agent chat, authentication and permissions, skills and memory, scheduled and event-driven automations, agent teams, and a PostgreSQL backend (with PGlite for local development) on any Nitro-compatible host. You bring your own LLM, database, tools and infrastructure.

## What it does

- Shared actions: one definition is exposed to the agent as a tool and to React as a callable function, with the same validation and permissions
- The same action is also reachable over HTTP, MCP, A2A and the CLI, without extra wiring
- Shared data and shared application state, so the agent sees the current page, selected record or active view
- Built-in agent chat, authentication and permissions, skills and memory, and scheduled or event-triggered automations
- Agent teams for delegating work to specialists in the same workspace or across connected agents
- PostgreSQL in production with PGlite for local development, deployable to any Nitro-compatible host

## Getting started

Scaffold a project with the framework's create command, then add capabilities by dropping action files into `actions/`. Each action becomes an agent tool and a UI function at the same time.

1. Create a project

   The create command scaffolds a standalone agent from a template; `chat` is the starting template in the README.

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

2. Define an action

   Create `actions/hello.ts`. `defineAction` takes a description, a Zod schema for the arguments and a `run` implementation. One action powers every surface: UI, agent, HTTP, MCP, A2A and the CLI.

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

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}!` };
  },
});
```

3. Call it from the UI

   The agent now receives `hello` as a tool. React reaches the same implementation through the framework's query hook, so both callers share validation and permissions.

```ts
useActionQuery("hello", { name: "Alex" })
```

4. Go further

   Follow the getting-started guide for a full intro to actions, agent surfaces, authentication, automations and agent teams. Several complete open-source agents are published as starting points and worked examples.

## When to use it

- Build a knowledge-work agent that needs a real interface for people to inspect, edit and approve its output rather than a bare chat box
- Expose one capability to an agent, a REST client, an MCP client and your own React screens without maintaining four code paths
- Add scheduled or event-driven agent automations to an existing product, with permissions controlling who can change shared work
- Delegate parts of a task to specialist agents in the same workspace while keeping one shared data layer