@agent-native/core 0.63.0 → 0.63.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli/code-agent-executor.js +1 -1
- package/dist/cli/code-agent-executor.js.map +1 -1
- package/dist/cli/create.js +1 -1
- package/dist/cli/create.js.map +1 -1
- package/dist/client/NewWorkspaceAppFlow.js +1 -1
- package/dist/client/NewWorkspaceAppFlow.js.map +1 -1
- package/dist/client/chat/index.d.ts +2 -1
- package/dist/client/chat/index.d.ts.map +1 -1
- package/dist/client/chat/index.js +2 -1
- package/dist/client/chat/index.js.map +1 -1
- package/dist/client/chat-view-transition.d.ts +17 -0
- package/dist/client/chat-view-transition.d.ts.map +1 -1
- package/dist/client/chat-view-transition.js +46 -0
- package/dist/client/chat-view-transition.js.map +1 -1
- package/dist/client/index.d.ts +2 -1
- package/dist/client/index.d.ts.map +1 -1
- package/dist/client/index.js +2 -1
- package/dist/client/index.js.map +1 -1
- package/dist/client/use-agent-chat-home-handoff.d.ts +27 -0
- package/dist/client/use-agent-chat-home-handoff.d.ts.map +1 -0
- package/dist/client/use-agent-chat-home-handoff.js +120 -0
- package/dist/client/use-agent-chat-home-handoff.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/agent-native.css +2 -6
- package/dist/templates/workspace-root/README.md +4 -4
- package/docs/content/actions.md +32 -42
- package/docs/content/agent-surfaces.md +105 -84
- package/docs/content/agent-teams.md +2 -14
- package/docs/content/agent-web-surfaces.md +4 -4
- package/docs/content/authentication.md +40 -24
- package/docs/content/automations.md +18 -36
- package/docs/content/blueprint-installer.md +3 -0
- package/docs/content/cli-adapters.md +24 -168
- package/docs/content/client.md +11 -77
- package/docs/content/cloneable-saas.md +1 -1
- package/docs/content/code-agents-ui.md +43 -0
- package/docs/content/components.md +10 -23
- package/docs/content/context-awareness.md +3 -3
- package/docs/content/creating-templates.md +20 -18
- package/docs/content/database.md +1 -1
- package/docs/content/deployment.md +5 -37
- package/docs/content/dispatch.md +17 -28
- package/docs/content/drop-in-agent.md +24 -111
- package/docs/content/durable-resume.md +4 -0
- package/docs/content/embedding-sdk.md +141 -135
- package/docs/content/evals.md +3 -3
- package/docs/content/extensions.md +1 -1
- package/docs/content/external-agents.md +34 -60
- package/docs/content/faq.md +5 -5
- package/docs/content/frames.md +13 -4
- package/docs/content/getting-started.md +96 -142
- package/docs/content/harness-agents.md +24 -7
- package/docs/content/human-approval.md +1 -1
- package/docs/content/key-concepts.md +14 -99
- package/docs/content/local-file-mode.md +2 -2
- package/docs/content/mcp-apps.md +9 -2
- package/docs/content/mcp-clients.md +8 -3
- package/docs/content/mcp-protocol.md +11 -29
- package/docs/content/messaging.md +1 -1
- package/docs/content/migration-workbench.md +14 -175
- package/docs/content/multi-app-workspace.md +1 -1
- package/docs/content/multi-tenancy.md +18 -47
- package/docs/content/native-chat-ui.md +15 -12
- package/docs/content/observability.md +16 -4
- package/docs/content/observational-memory.md +1 -1
- package/docs/content/pure-agent-apps.md +17 -124
- package/docs/content/real-time-collaboration.md +14 -14
- package/docs/content/routing.md +71 -0
- package/docs/content/sandbox-adapters.md +78 -4
- package/docs/content/security.md +59 -39
- package/docs/content/server.md +16 -8
- package/docs/content/sharing.md +1 -6
- package/docs/content/skills-guide.md +3 -1
- package/docs/content/template-analytics.md +1 -1
- package/docs/content/template-assets.md +12 -3
- package/docs/content/template-brain.md +64 -72
- package/docs/content/template-chat.md +32 -4
- package/docs/content/template-clips.md +35 -4
- package/docs/content/template-design.md +19 -3
- package/docs/content/template-dispatch.md +9 -0
- package/docs/content/template-forms.md +15 -10
- package/docs/content/template-plan.md +7 -0
- package/docs/content/template-slides.md +14 -14
- package/docs/content/template-videos.md +10 -12
- package/docs/content/tracking.md +66 -55
- package/docs/content/using-your-agent.md +6 -16
- package/docs/content/what-is-agent-native.md +5 -11
- package/docs/content/workspace-management.md +2 -2
- package/docs/content/workspace.md +20 -160
- package/package.json +1 -1
- package/src/templates/workspace-root/README.md +4 -4
|
@@ -1,42 +1,53 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "Getting Started"
|
|
3
|
-
description: "
|
|
3
|
+
description: "Create an agent app — with a chat UI or headless — add an action, and watch the agent call it."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Getting Started
|
|
7
7
|
|
|
8
|
-
Agent-Native
|
|
9
|
-
|
|
10
|
-
first useful UI can be Chat. Both paths use the same runtime, so you can move
|
|
11
|
-
between them without rewriting the operation the agent calls.
|
|
8
|
+
Agent-Native apps give an AI agent and your UI the same actions, data, and
|
|
9
|
+
state. The smallest useful app is a single action.
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
**Want a complete app to start from?** Clone one of our rich templates —
|
|
12
|
+
[Chat](/docs/template-chat), [Mail](/docs/template-mail),
|
|
13
|
+
[Calendar](/docs/template-calendar), [Content](/docs/template-content),
|
|
14
|
+
[Analytics](/docs/template-analytics), and [many more](/docs/cloneable-saas) —
|
|
15
|
+
each a full-featured app you customize.
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
| **Headless action** | You want the primitive first: one local action, the app-agent loop, CLI/HTTP/MCP/A2A, and no custom screen yet. | `actions/`, `.agents/`, runtime config, local SQLite state |
|
|
18
|
-
| **Chat app** | You want a browser app users can talk to immediately, with durable threads and tool-call UI. | Everything above, plus the Chat route, sidebar, auth, and live sync |
|
|
17
|
+
Building from scratch? The only choice up front is whether you want a UI —
|
|
18
|
+
everything after (defining actions, running the agent) is the same either way.
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
[Templates](/docs/cloneable-saas). If you are choosing between headless, chat,
|
|
22
|
-
embedded, or full app surfaces, go to [Agent Surfaces](/docs/agent-surfaces).
|
|
20
|
+
## 1. Create your app
|
|
23
21
|
|
|
24
|
-
|
|
22
|
+
You'll need [Node.js 22+](https://nodejs.org) and [pnpm](https://pnpm.io).
|
|
25
23
|
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
**Want a UI?** Start from the Chat template. You get a working agent plus a
|
|
25
|
+
customizable chat UI, and every action you add shows up in it automatically:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx @agent-native/core@latest create my-app --template chat
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**Just the headless primitive?** Start headless — the same actions and agent
|
|
32
|
+
loop, no UI shell:
|
|
28
33
|
|
|
29
34
|
```bash
|
|
30
35
|
npx @agent-native/core@latest create my-agent --headless
|
|
31
|
-
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Then install:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
cd my-app
|
|
32
42
|
pnpm install
|
|
33
|
-
pnpm action hello --name Steve
|
|
34
|
-
pnpm agent "Call the hello action for Steve and explain what happened."
|
|
35
43
|
```
|
|
36
44
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
From here on, the two are identical.
|
|
46
|
+
|
|
47
|
+
## 2. Add an action
|
|
48
|
+
|
|
49
|
+
An action is one operation your agent — and your UI — can call. Both scaffolds
|
|
50
|
+
ship with this example:
|
|
40
51
|
|
|
41
52
|
```ts
|
|
42
53
|
// actions/hello.ts
|
|
@@ -56,163 +67,106 @@ export default defineAction({
|
|
|
56
67
|
});
|
|
57
68
|
```
|
|
58
69
|
|
|
59
|
-
Replace `hello` with the smallest real operation in your domain.
|
|
60
|
-
|
|
61
|
-
integration webhooks, and any future UI.
|
|
62
|
-
|
|
63
|
-
Headless does not mean stateless. Actions, auth/session data, application
|
|
64
|
-
state, threads, run history, credentials, and share records use SQL. Locally
|
|
65
|
-
that defaults to SQLite at `data/app.db`; in production you will usually set
|
|
66
|
-
`DATABASE_URL`. See [Deployment](/docs/deployment).
|
|
70
|
+
Replace `hello` with the smallest real operation in your domain. You define it
|
|
71
|
+
once; every surface picks it up.
|
|
67
72
|
|
|
68
|
-
##
|
|
73
|
+
## 3. Run it
|
|
69
74
|
|
|
70
|
-
|
|
71
|
-
threads and visible tool calls:
|
|
75
|
+
Call the action directly:
|
|
72
76
|
|
|
73
77
|
```bash
|
|
74
|
-
|
|
75
|
-
cd my-chat-app
|
|
76
|
-
pnpm install
|
|
77
|
-
pnpm dev
|
|
78
|
+
pnpm action hello --name Steve
|
|
78
79
|
```
|
|
79
80
|
|
|
80
|
-
|
|
81
|
-
template includes the same `actions/hello.ts` shape as the headless scaffold,
|
|
82
|
-
plus a full-page chat route, the standard left sidebar, auth, live sync, and a
|
|
83
|
-
SQLite database at `data/app.db` unless you set `DATABASE_URL`.
|
|
84
|
-
|
|
85
|
-
Run the example action directly:
|
|
81
|
+
Or ask the agent to call it for you:
|
|
86
82
|
|
|
87
83
|
```bash
|
|
88
|
-
pnpm
|
|
84
|
+
pnpm agent "Call the hello action for Steve and explain what happened."
|
|
89
85
|
```
|
|
90
86
|
|
|
91
|
-
|
|
87
|
+
If you started from the Chat template, run the app and use the same agent in the
|
|
88
|
+
browser — it can already call every action you define:
|
|
92
89
|
|
|
93
90
|
```bash
|
|
94
|
-
pnpm
|
|
91
|
+
pnpm dev
|
|
95
92
|
```
|
|
96
93
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
## Move between paths {#move-between-paths}
|
|
94
|
+
That one action is now reachable from the chat UI, the CLI, HTTP, MCP, A2A,
|
|
95
|
+
scheduled jobs, and webhooks. Define once, call from anywhere.
|
|
101
96
|
|
|
102
|
-
|
|
103
|
-
operation first. Add Chat when a durable conversation UI helps users inspect,
|
|
104
|
-
approve, or continue the work. Start with Chat when the conversation itself is
|
|
105
|
-
the main workflow, then add screens only where structured UI clarifies the job.
|
|
97
|
+
## State is built in
|
|
106
98
|
|
|
107
|
-
|
|
108
|
-
|
|
99
|
+
Headless doesn't mean stateless. Actions, sessions, application state, threads,
|
|
100
|
+
run history, and credentials all live in SQL. Locally that's SQLite at
|
|
101
|
+
`data/app.db`; in production you set `DATABASE_URL`. See
|
|
102
|
+
[Deployment](/docs/deployment).
|
|
109
103
|
|
|
110
|
-
##
|
|
104
|
+
## Customize the UI
|
|
111
105
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
The agent can list, search, read, create, update, and delete repository files
|
|
115
|
-
through provider-scoped credentials.
|
|
106
|
+
If you started from the Chat template, the UI is yours to edit. The chat itself
|
|
107
|
+
is one small route built on the `<AgentChatSurface>` component:
|
|
116
108
|
|
|
117
|
-
|
|
109
|
+
```tsx
|
|
110
|
+
// app/routes/_index.tsx
|
|
111
|
+
import { AgentChatSurface } from "@agent-native/core/client";
|
|
118
112
|
|
|
119
|
-
|
|
120
|
-
|
|
113
|
+
export default function ChatRoute() {
|
|
114
|
+
return <AgentChatSurface mode="page" className="h-full" />;
|
|
115
|
+
}
|
|
121
116
|
```
|
|
122
117
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
- **`app/routes/_index.tsx`** — the chat page. Change the suggestions, empty
|
|
119
|
+
state, and layout.
|
|
120
|
+
- **`app/root.tsx`** — the app shell. Add your own routes and screens around the
|
|
121
|
+
agent.
|
|
122
|
+
- Drop the agent into any screen with `<AgentSidebar>`, hand work to it from a
|
|
123
|
+
button with `sendToAgentChat()`, or run an action directly with
|
|
124
|
+
`useActionMutation()`.
|
|
125
|
+
|
|
126
|
+
See [Drop-in Agent](/docs/drop-in-agent) for the full component set, and
|
|
127
|
+
[Native Chat UI](/docs/native-chat-ui) to render action results as tables,
|
|
128
|
+
charts, and typed cards instead of plain text.
|
|
126
129
|
|
|
127
|
-
|
|
130
|
+
**Started headless and want a UI later?** The Chat template _is_ the UI on-ramp —
|
|
131
|
+
its `app/` layer (React Router + Vite) is exactly what the headless scaffold
|
|
132
|
+
leaves out. The cleanest move is to start (or re-scaffold) from the Chat
|
|
133
|
+
template; your `actions/`, agent, and SQL state carry over unchanged. See
|
|
134
|
+
[Agent Surfaces](/docs/agent-surfaces) for every surface in between.
|
|
128
135
|
|
|
129
|
-
|
|
130
|
-
of one giant app. A `hubspot-pipeline` app can own CRM access, a
|
|
131
|
-
`gong-evidence` app can own transcripts, and a `deal-brief` app can call both
|
|
132
|
-
through A2A.
|
|
136
|
+
## Compose mini-apps
|
|
133
137
|
|
|
134
|
-
|
|
138
|
+
A big workspace is usually easier to reason about as a few focused apps than one
|
|
139
|
+
giant one. A `hubspot-pipeline` app can own CRM access, a `gong-evidence` app can
|
|
140
|
+
own transcripts, and a `deal-brief` app can call both over A2A:
|
|
135
141
|
|
|
136
142
|
```bash
|
|
137
143
|
pnpm agent-native agents list
|
|
138
144
|
pnpm agent-native invoke gong-evidence "Find transcript evidence for deal_123."
|
|
139
145
|
```
|
|
140
146
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
import { agentNative } from "@agent-native/core/agent-native";
|
|
145
|
-
|
|
146
|
-
const agents = await agentNative.listAgents();
|
|
147
|
-
const result = await agentNative.invoke(
|
|
148
|
-
"gong-evidence",
|
|
149
|
-
"Find transcript evidence for deal_123.",
|
|
150
|
-
{ userEmail: "steve@example.com" },
|
|
151
|
-
);
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
For production agent-native apps, set `A2A_SECRET` in each app environment and
|
|
155
|
-
pass the caller identity (`userEmail`) so outbound calls are signed. Use
|
|
156
|
-
`apiKeyEnv` only for legacy external peers that expect a static bearer token.
|
|
157
|
-
|
|
158
|
-
See [A2A Protocol](/docs/a2a-protocol) and
|
|
159
|
-
[Pure Agent Apps](/docs/pure-agent-apps) for the full pattern.
|
|
160
|
-
|
|
161
|
-
## What just happened? {#what-just-happened}
|
|
162
|
-
|
|
163
|
-
You now have a real app-agent loop:
|
|
164
|
-
|
|
165
|
-
- `hello` is one action definition, available to the agent, CLI, HTTP, MCP,
|
|
166
|
-
A2A, and any future UI.
|
|
167
|
-
- `pnpm agent` calls the production app-agent loop, not an external coding
|
|
168
|
-
harness.
|
|
169
|
-
- Changes and history stay in sync because the runtime uses SQL-backed state,
|
|
170
|
-
even when you have no custom UI yet.
|
|
171
|
-
|
|
172
|
-
That parity between agent and UI is the whole point. See
|
|
173
|
-
[What Is Agent-Native?](/docs/what-is-agent-native) for the bigger picture.
|
|
174
|
-
|
|
175
|
-
## Project structure {#project-structure}
|
|
147
|
+
Each app keeps its own actions, agent, and state, and can discover its siblings.
|
|
148
|
+
See [Multi-App Workspaces](/docs/multi-app-workspace) and
|
|
149
|
+
[A2A Protocol](/docs/a2a-protocol).
|
|
176
150
|
|
|
177
|
-
|
|
151
|
+
## Project structure
|
|
178
152
|
|
|
179
153
|
```text
|
|
180
154
|
my-app/
|
|
181
155
|
actions/ # Agent-callable actions
|
|
182
|
-
app/ # React frontend
|
|
156
|
+
app/ # React frontend (UI templates only; omitted when headless)
|
|
183
157
|
server/ # Nitro API server (routes, plugins)
|
|
184
158
|
.agents/ # Agent instructions and skills
|
|
185
|
-
data/app.db # Local SQLite
|
|
159
|
+
data/app.db # Local SQLite state when DATABASE_URL is unset
|
|
186
160
|
```
|
|
187
161
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
[
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
- **
|
|
198
|
-
|
|
199
|
-
- **Open Chat when conversation helps** - ask "what actions do you have, and
|
|
200
|
-
what can you do here?"
|
|
201
|
-
- **Connect a repo** - give the app-agent loop explicit GitHub repository
|
|
202
|
-
context when file CRUD is the job.
|
|
203
|
-
- **Compose siblings** - split provider-heavy workflows into focused mini-apps
|
|
204
|
-
and invoke them over A2A.
|
|
205
|
-
- **Deploy it** - see [Deployment](/docs/deployment) when you're ready to put
|
|
206
|
-
the app on your own domain.
|
|
207
|
-
|
|
208
|
-
Useful follow-up docs:
|
|
209
|
-
|
|
210
|
-
- [Key Concepts](/docs/key-concepts) for the architecture: SQL, actions,
|
|
211
|
-
polling sync, and context awareness
|
|
212
|
-
- [Agent Surfaces](/docs/agent-surfaces) for choosing headless, rich chat,
|
|
213
|
-
embedded, and full-app surfaces
|
|
214
|
-
- [Workspace](/docs/workspace) for instructions, skills, memory, and per-user
|
|
215
|
-
MCP connections
|
|
216
|
-
- [Messaging](/docs/messaging) for Slack, email, Telegram, and other ways to
|
|
217
|
-
reach the agent
|
|
218
|
-
- [FAQ](/docs/faq) for setup and product questions
|
|
162
|
+
## Where to go next
|
|
163
|
+
|
|
164
|
+
- **[Key Concepts](/docs/key-concepts)** — the core architecture: SQL, actions,
|
|
165
|
+
sync, and context awareness.
|
|
166
|
+
- **[Actions](/docs/actions)** — the full action API: schemas, HTTP, auth, and
|
|
167
|
+
approval.
|
|
168
|
+
- **[Agent Surfaces](/docs/agent-surfaces)** — headless, chat, embedded sidecar,
|
|
169
|
+
and full app.
|
|
170
|
+
- **[Drop-in Agent](/docs/drop-in-agent)** — add the agent chat to any React app.
|
|
171
|
+
- **[Deployment](/docs/deployment)** — put your app on your own domain.
|
|
172
|
+
- **[FAQ](/docs/faq)** — setup and product questions.
|
|
@@ -6,6 +6,10 @@ search: "harness agents AgentHarness ai-sdk HarnessAgent Claude Code Codex Pi Cu
|
|
|
6
6
|
|
|
7
7
|
# Harness Agents
|
|
8
8
|
|
|
9
|
+
> **Who is this for:** host authors wiring a full coding runtime (Claude Code,
|
|
10
|
+
> Codex, Pi) into Agent-Native as the agent. Building an app? Start with
|
|
11
|
+
> [Creating Templates](/docs/creating-templates).
|
|
12
|
+
|
|
9
13
|
A harness agent is a full agent runtime — Claude Code, Codex, Pi, and similar —
|
|
10
14
|
that owns its own loop, workspace, native file tools, session state, compaction,
|
|
11
15
|
approval model, and sandbox behavior. Agent-Native runs these through the
|
|
@@ -19,13 +23,19 @@ beneath `runAgentLoop`. A harness is not an `AgentEngine` provider — it runs i
|
|
|
19
23
|
own loop end to end, so Agent-Native drives it as a session, not as a single
|
|
20
24
|
model call.
|
|
21
25
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
| Render a Claude-Code/Codex-style **coding workspace UI** | [Agent-Native Code UI](/docs/code-agents-ui)
|
|
28
|
-
|
|
|
26
|
+
## Which coding doc do I want? {#which-doc}
|
|
27
|
+
|
|
28
|
+
| You want to… | Use |
|
|
29
|
+
| -------------------------------------------------------------------------- | -------------------------------------------- |
|
|
30
|
+
| Run Claude Code / Codex / Pi **as the agent**, with their own loop + tools | **Harness agents** (this page) |
|
|
31
|
+
| Render a Claude-Code/Codex-style **coding workspace UI** | [Agent-Native Code UI](/docs/code-agents-ui) |
|
|
32
|
+
| Swap the backend that runs the agent's **`run-code` tool** | [Adapters](/docs/sandbox-adapters) |
|
|
33
|
+
| Wrap a CLI tool (`gh`, `ffmpeg`) for the agent to call | [Adapters](/docs/sandbox-adapters) |
|
|
34
|
+
|
|
35
|
+
Adjacent surfaces: put an agent you built elsewhere behind Agent-Native's chat
|
|
36
|
+
UI with [`AgentChatRuntime`](/docs/native-chat-ui#byo-agent-runtimes); let an
|
|
37
|
+
external MCP host call into your app via [External Agents](/docs/external-agents);
|
|
38
|
+
spawn background / sub-agent runs with [Custom Agents & Teams](/docs/agent-teams).
|
|
29
39
|
|
|
30
40
|
## Built-in harnesses {#built-in}
|
|
31
41
|
|
|
@@ -45,6 +55,13 @@ app that never uses a harness does not pay for it. Each adapter carries an
|
|
|
45
55
|
error if the packages are missing, and `isAgentHarnessPackageInstalled(entry)`
|
|
46
56
|
lets you check first.
|
|
47
57
|
|
|
58
|
+
Codex auth has two paths. The `ai-sdk-harness:codex` adapter loads the AI SDK
|
|
59
|
+
Codex harness package and does not implement a separate Agent-Native OAuth flow.
|
|
60
|
+
For Agent-Native Code or Desktop coding sessions, Agent-Native can use the
|
|
61
|
+
local Codex CLI after the user runs `codex login`; that reuses whatever
|
|
62
|
+
ChatGPT subscription or API-key auth the installed Codex CLI reports through
|
|
63
|
+
`codex login status`.
|
|
64
|
+
|
|
48
65
|
## Register and resolve {#register-resolve}
|
|
49
66
|
|
|
50
67
|
```ts
|
|
@@ -5,20 +5,7 @@ description: "How agent-native apps work: actions first, SQL database, app-agent
|
|
|
5
5
|
|
|
6
6
|
# Key Concepts
|
|
7
7
|
|
|
8
|
-
How agent-native apps work under the hood — the principles
|
|
9
|
-
|
|
10
|
-
## Why agent-native {#why-agent-native}
|
|
11
|
-
|
|
12
|
-
Teams today have four options for AI-powered work, and none of them are ideal:
|
|
13
|
-
|
|
14
|
-
1. **Chat apps** (Claude Projects, ChatGPT) — accessible but not built for structured workflows. No persistent UI, no dashboards, no team collaboration.
|
|
15
|
-
2. **Raw agent interfaces** (Claude Code, Cursor) — powerful but inaccessible to non-devs. No guardrails, no onboarding, no structured UI.
|
|
16
|
-
3. **Custom AI apps** — limited. The AI can't see what you see, can't react to what you click, and can't update the app itself. No conversation history, no rollback, no skills.
|
|
17
|
-
4. **Existing SaaS** (Amplitude, HubSpot, Google Slides) — bolting AI onto architectures that weren't designed for it. You can feel the seams.
|
|
18
|
-
|
|
19
|
-
Agent-native apps solve this by making the agent and any UI equal citizens of the same system. Think of it as Claude Code, but with durable actions, SQL state, and visual interfaces when the workflow needs them. A workflow can start as one callable action, then grow into chat, screens, schedules, or a full app without rewriting the operation.
|
|
20
|
-
|
|
21
|
-
See [What Is Agent-Native?](/docs/what-is-agent-native) for the full vision and philosophy.
|
|
8
|
+
How agent-native apps work under the hood — the principles and the architecture. This page is the contract; for the vision and the case for building this way, see [What Is Agent-Native?](/docs/what-is-agent-native).
|
|
22
9
|
|
|
23
10
|
## The architecture {#the-architecture}
|
|
24
11
|
|
|
@@ -56,7 +43,7 @@ A feature with only UI is invisible to the agent. A full UI feature with only ac
|
|
|
56
43
|
|
|
57
44
|
## Data in SQL {#data-in-sql}
|
|
58
45
|
|
|
59
|
-
All application state lives in a SQL database via Drizzle ORM.
|
|
46
|
+
All application state lives in a SQL database via Drizzle ORM. Schemas are provider-agnostic; the supported databases, `DATABASE_URL` config, and portability rules live in [Database](/docs/database).
|
|
60
47
|
|
|
61
48
|
Core SQL stores are auto-created and available in every template:
|
|
62
49
|
|
|
@@ -186,43 +173,11 @@ The UI writes this on route change; the agent reads it (via `view-screen`) befor
|
|
|
186
173
|
|
|
187
174
|
See [Context Awareness](/docs/context-awareness) for the full pattern: navigation state, view-screen, navigate commands, and jitter prevention.
|
|
188
175
|
|
|
189
|
-
## One action, many
|
|
190
|
-
|
|
191
|
-
Agent-native supports a lot of agent-facing protocols because different hosts standardize different pieces of the same workflow. App authors should not have to choose among them or rebuild the same operation for each client. The center of gravity stays the action system.
|
|
176
|
+
## One action, many surfaces {#protocols}
|
|
192
177
|
|
|
193
|
-
|
|
194
|
-
| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
|
|
195
|
-
| Agent tool calling | Shipping | The in-app agent sees actions as function tools with zod-derived JSON Schema. | `defineAction()` |
|
|
196
|
-
| UI actions | Shipping | React calls the same action through `useActionMutation()` / `useActionQuery()`. | The same action |
|
|
197
|
-
| Native chat widgets | Shipping | Tool results with explicit widget discriminants can render native tables, charts, and typed app results in chat. | Structured action results |
|
|
198
|
-
| AgentChatRuntime connectors | Shipping | The chat shell can sit on top of OpenAI Agents, OpenAI Responses, Claude Agent SDK, Vercel AI SDK, AG-UI, or normalized HTTP streams. | Pick a runtime helper or stream normalized events |
|
|
199
|
-
| HTTP and CLI | Shipping | Actions auto-mount at `/_agent-native/actions/:name`, run via `pnpm action <name>`, and can be driven by the headless app-agent loop with `pnpm agent`. | The same action |
|
|
200
|
-
| MCP server | Shipping | External MCP hosts get Streamable HTTP tools, the `ask-agent` meta-tool, and optional MCP Apps resources. | The same action, plus optional `mcpApp` |
|
|
201
|
-
| MCP OAuth | Shipping | Standard remote MCP OAuth, PKCE, dynamic client registration, refresh tokens, and `mcp:read` / `mcp:write` / `mcp:apps` scopes. | Nothing per action |
|
|
202
|
-
| MCP Apps | Shipping | External hosts that support app resources can render iframe/native-host widgets, with deep-link fallback elsewhere. | Optional `mcpApp` metadata |
|
|
203
|
-
| A2A | Shipping | Other agents discover the agent card and call the app over JSON-RPC tasks. | The same actions and agent config |
|
|
204
|
-
| Deep links | Shipping | Action results can round-trip users into the running UI through `/_agent-native/open` and `agentnative://open`. | Optional `link` metadata |
|
|
205
|
-
| MCP clients | Shipping | The app can also consume local, remote, or hub-shared MCP servers as `mcp__...` tools. | `mcp.config.json` or settings |
|
|
206
|
-
| Instructions and skills | Shipping | `AGENTS.md`, skills, memory, slash commands, sub-agents, jobs, and automations live in the SQL-backed workspace. | Workspace resources, not protocol glue |
|
|
207
|
-
| Agent Web | Shipping | Public pages can publish `robots.txt`, `sitemap.xml`, `llms.txt`, markdown mirrors, and structured metadata. | Route access plus `agentWeb` config |
|
|
208
|
-
| Extensions | Shipping | Sandboxed mini-apps call app actions, persist extension data, and use proxied fetch helpers. | Extension HTML using `appAction()` |
|
|
209
|
-
| ACP | Coding-agent/editor | Useful for coding agents inside editors/IDEs; not the general BYO app-chat runtime contract. | Editor/agent adapter work |
|
|
178
|
+
Implement a domain operation once as an action; the framework exposes it to every consumer. The same `defineAction()` becomes an agent tool, a typesafe UI hook, an HTTP endpoint, a CLI command, an MCP tool, and an A2A tool, with optional `link`, `mcpApp`, or explicit native-widget metadata added only when a surface needs it. Skills and instructions cover behavior.
|
|
210
179
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
Adapter horizon: [A2UI](https://a2ui.org/) is worth watching for portable generated UI across trust boundaries, but first-party Agent-Native widgets should stay explicit native renderers. [ACP](https://zed.dev/acp) is important for coding-agent/editor interoperability, but it is not the general BYO app-agent UI contract.
|
|
214
|
-
|
|
215
|
-
## Three product shapes {#three-product-shapes}
|
|
216
|
-
|
|
217
|
-
Those protocol adapters let the same app grow across three product shapes:
|
|
218
|
-
|
|
219
|
-
| Shape | User experience | Best for |
|
|
220
|
-
| --------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
221
|
-
| **Headless agent** | Call actions and the agent from your code, another app, MCP, A2A, HTTP, or CLI. | Automation, integrations, background jobs, developer workflows |
|
|
222
|
-
| **Rich chat agent** | A standalone or embedded chat can guide setup, call tools, request approvals, and render native tables/charts/results. | Agent-first workflows that still need inspectable output |
|
|
223
|
-
| **Whole application** | Chat starts central when helpful, then becomes a sidebar next to forms, dashboards, editors, calendars, or documents. | Durable products where humans and agents share state over time |
|
|
224
|
-
|
|
225
|
-
You should be able to start with the headless contract, add rich chat, and then grow a full app around the same actions and SQL state instead of rebuilding. See [Agent Surfaces](/docs/agent-surfaces) for the concrete choice guide and APIs.
|
|
180
|
+
For the full protocol/surface matrix (MCP server and OAuth, MCP Apps, A2A, deep links, native chat widgets, AgentChatRuntime connectors, Agent Web, and the adapter horizon for ACP and A2UI), and for choosing a product shape — headless, rich chat, embedded sidecar, or full app — see [Agent Surfaces](/docs/agent-surfaces).
|
|
226
181
|
|
|
227
182
|
## Agent modifies code {#agent-modifies-code}
|
|
228
183
|
|
|
@@ -236,64 +191,24 @@ There's no shared codebase to break. You own the app, and the agent evolves it f
|
|
|
236
191
|
4. "Connect to our Stripe account" — the agent writes the integration
|
|
237
192
|
5. Your app keeps improving without manual development
|
|
238
193
|
|
|
239
|
-
##
|
|
240
|
-
|
|
241
|
-
The framework supports portable Drizzle-backed SQL databases. Write app schemas with `@agent-native/core/db/schema` and app reads/writes with Drizzle's query builder so code can run across providers.
|
|
194
|
+
## Portable by default {#hosting-agnostic}
|
|
242
195
|
|
|
243
|
-
|
|
244
|
-
- **Neon Postgres** — common in both dev and production
|
|
245
|
-
- **Turso** (libSQL) — edge-friendly SQLite-compatible
|
|
246
|
-
- **Supabase Postgres**
|
|
247
|
-
- **Cloudflare D1**
|
|
248
|
-
- **Plain Postgres**
|
|
196
|
+
Two architectural rules keep apps portable across databases and hosts:
|
|
249
197
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
```ts
|
|
253
|
-
import { and, desc, eq } from "drizzle-orm";
|
|
254
|
-
|
|
255
|
-
const forms = await db
|
|
256
|
-
.select()
|
|
257
|
-
.from(schema.forms)
|
|
258
|
-
.where(
|
|
259
|
-
and(eq(schema.forms.ownerEmail, email), eq(schema.forms.status, "open")),
|
|
260
|
-
)
|
|
261
|
-
.orderBy(desc(schema.forms.createdAt));
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
Use raw SQL only for additive migrations, health checks, or one-off maintenance, and keep it parameterized and dialect-agnostic.
|
|
265
|
-
|
|
266
|
-
## Hosting agnostic {#hosting-agnostic}
|
|
267
|
-
|
|
268
|
-
The server runs on Nitro, which compiles to any deployment target:
|
|
269
|
-
|
|
270
|
-
- Node.js — local dev, traditional servers
|
|
271
|
-
- Cloudflare Workers/Pages
|
|
272
|
-
- Netlify Functions/Edge
|
|
273
|
-
- Vercel Serverless/Edge
|
|
274
|
-
- Deno Deploy
|
|
275
|
-
- AWS Lambda
|
|
276
|
-
- Bun
|
|
277
|
-
|
|
278
|
-
Never use Node-specific APIs (`fs`, `child_process`, `path`) in server routes or plugins. These don't exist in Workers/edge environments. Actions in `actions/` run in Node.js and can use Node APIs freely.
|
|
279
|
-
|
|
280
|
-
Never assume a persistent server process. Serverless and edge environments are stateless — no in-memory caches, no long-lived connections. Use the SQL database for all state.
|
|
198
|
+
- **Database-agnostic.** Write schemas with `@agent-native/core/db/schema` and reads/writes with Drizzle's portable query DSL so the same code runs on any supported provider. Use raw SQL only for additive migrations or one-off maintenance, kept parameterized and dialect-agnostic. See [Database](/docs/database).
|
|
199
|
+
- **Hosting-agnostic.** The server runs on Nitro and compiles to any deployment target. Never use Node-specific APIs (`fs`, `child_process`, `path`) in server routes or plugins, and never assume a persistent server process — serverless and edge are stateless, so keep all state in SQL. See [Deployment](/docs/deployment).
|
|
281
200
|
|
|
282
201
|
## Workspace {#workspace}
|
|
283
202
|
|
|
284
203
|
Every user gets a personal **workspace** — instructions, skills, memory, custom sub-agents, scheduled jobs, and connected MCP servers — all stored in SQL rather than files. That makes Claude-Code-level customization viable inside multi-tenant SaaS without spinning up a container per user. See [Workspace](/docs/workspace).
|
|
285
204
|
|
|
286
|
-
##
|
|
287
|
-
|
|
288
|
-
**Dispatch** is the workspace control plane: a central inbox for Slack/email/Telegram, a shared secrets vault, scheduled jobs, and an orchestrator agent that delegates domain work to specialist apps over A2A. Run it alongside your domain apps when you have more than one. See [Dispatch](/docs/dispatch).
|
|
289
|
-
|
|
290
|
-
## Extensions {#extensions}
|
|
291
|
-
|
|
292
|
-
**Extensions** are sandboxed mini-apps the agent can create at runtime — Alpine.js HTML rendered inside an iframe, with built-in helpers for persistent storage (`extensionData`), calling app actions (`appAction`), and proxied external APIs (`extensionFetch`). No source-code changes, no schema migrations. (Distinct from LLM "tools" — the function-call surface area the agent uses, e.g. `defineAction` entries and MCP tools. See [Extensions](/docs/extensions).)
|
|
205
|
+
## Related building blocks {#building-blocks}
|
|
293
206
|
|
|
294
|
-
|
|
207
|
+
These sit on top of the same contract and have their own deep dives:
|
|
295
208
|
|
|
296
|
-
|
|
209
|
+
- **[Dispatch](/docs/dispatch)** — the workspace control plane: shared inbox, secrets vault, scheduled jobs, and an orchestrator that delegates to specialist apps over A2A.
|
|
210
|
+
- **[Extensions](/docs/extensions)** — sandboxed Alpine.js mini-apps the agent creates at runtime, no source changes or migrations.
|
|
211
|
+
- **[A2A Protocol](/docs/a2a-protocol)** — how apps in the same workspace discover and call each other over JSON-RPC.
|
|
297
212
|
|
|
298
213
|
## What you get for free {#what-you-get-for-free}
|
|
299
214
|
|
|
@@ -50,7 +50,7 @@ to SQL rows or local files.
|
|
|
50
50
|
|
|
51
51
|
A Content workspace can be as small as this:
|
|
52
52
|
|
|
53
|
-
```
|
|
53
|
+
```text
|
|
54
54
|
my-content-repo/
|
|
55
55
|
agent-native.json
|
|
56
56
|
docs/
|
|
@@ -285,7 +285,7 @@ Local File Mode can also load repo-backed extensions from the configured
|
|
|
285
285
|
`extensions` folder. Each extension is one directory with an `extension.json`
|
|
286
286
|
manifest and an HTML entry file:
|
|
287
287
|
|
|
288
|
-
```
|
|
288
|
+
```text
|
|
289
289
|
extensions/
|
|
290
290
|
doc-status/
|
|
291
291
|
extension.json
|
package/docs/content/mcp-apps.md
CHANGED
|
@@ -5,9 +5,16 @@ description: "Author and embed interactive MCP App UIs inside Claude, ChatGPT, a
|
|
|
5
5
|
|
|
6
6
|
# MCP Apps
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
**This page: inline UIs in Claude/ChatGPT.** Authoring MCP App resources and the embed bridge that renders a real app route inside a compatible host's chat. This page is also the single home for the **client support matrix** ([below](#client-support)).
|
|
9
|
+
|
|
10
|
+
| If you want to… | Read |
|
|
11
|
+
| ------------------------------------------------------------ | ---------------------------------------- |
|
|
12
|
+
| Connect an external agent/host to your app | [External Agents](/docs/external-agents) |
|
|
13
|
+
| Give your agent more tools (consume other MCP servers) | [MCP Clients](/docs/mcp-clients) |
|
|
14
|
+
| Build inline UIs that render in Claude/ChatGPT | **This page** — MCP Apps |
|
|
15
|
+
| Lower-level MCP server reference (auth, tools, custom mount) | [MCP Protocol](/docs/mcp-protocol) |
|
|
9
16
|
|
|
10
|
-
|
|
17
|
+
MCP Apps are the official `io.modelcontextprotocol/ui` extension that lets compatible hosts — Claude, Claude Desktop, ChatGPT, VS Code GitHub Copilot, Goose, Postman, MCPJam, and Cursor — render interactive UIs inline in chat. In agent-native apps, every MCP App is a **real React route**, not a separate plain-HTML widget.
|
|
11
18
|
|
|
12
19
|
Inside an Agent-Native app's own chat, prefer [native chat renderers](/docs/native-chat-ui) for first-party widgets such as tables, charts, typed results, and approval affordances. Use MCP Apps for external/cross-host inline UI in Claude, ChatGPT, Copilot, Cursor, and other compatible hosts, with the action `link` as the universal deep-link fallback.
|
|
13
20
|
|
|
@@ -5,9 +5,14 @@ description: "Connect your agent-native app to local MCP servers (claude-in-chro
|
|
|
5
5
|
|
|
6
6
|
# MCP Clients
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
**This page: give your agent more tools.** Point an agent-native app at MCP servers — local or remote — so their tools show up in the agent chat. This is the _client_ direction, the mirror image of [MCP Protocol](/docs/mcp-protocol) (which makes your app an MCP _server_).
|
|
9
|
+
|
|
10
|
+
| If you want to… | Read |
|
|
11
|
+
| ------------------------------------------------------------ | ---------------------------------------- |
|
|
12
|
+
| Connect an external agent/host to your app | [External Agents](/docs/external-agents) |
|
|
13
|
+
| Give your agent more tools (consume other MCP servers) | **This page** — MCP Clients |
|
|
14
|
+
| Build inline UIs that render in Claude/ChatGPT | [MCP Apps](/docs/mcp-apps) |
|
|
15
|
+
| Lower-level MCP server reference (auth, tools, custom mount) | [MCP Protocol](/docs/mcp-protocol) |
|
|
11
16
|
|
|
12
17
|
With one config file, every agent-native app in your workspace gains access to tools provided by MCP servers on your machine: `claude-in-chrome` for browser automation, `@modelcontextprotocol/server-filesystem` for reading files, `@playwright/mcp` for browser testing, and anything else that speaks MCP.
|
|
13
18
|
|