---
title: "Automation-First Apps"
description: "No-browser Agent-Native apps for scheduled jobs, queues, scripts, integration workers, and external agents."
---

# Automation-First Apps

Most Agent-Native products should start with chat and grow into inline results
and durable app pages. Use this pattern when the primary surface is not a
browser UI yet: scheduled reports, queues, integration workers, CLI loops, or
another app or agent calling this app over MCP/A2A.

Building something people browse, compare, edit, or share in a full app? See
[Templates](/docs/cloneable-saas) instead — this page covers the complementary
archetype, where the work runs without a persistent screen.

Automation-first does **not** mean stateless. The app-agent loop still uses the
same Agent-Native contract: actions, sessions, app state, history, settings,
credentials, and share records live in SQL.

<Diagram id="doc-block-automation-first" title="Automation-first still uses the app contract" summary={"Jobs, scripts, channels, and external agents reach one Agent-Native loop over SQL-backed actions and state."}>

```html
<div class="diagram-pure">
  <div class="diagram-col">
    <div class="diagram-pill">Scheduled job</div>
    <div class="diagram-pill">Queue worker</div>
    <div class="diagram-pill">CLI script</div>
    <div class="diagram-pill">Slack · email</div>
    <div class="diagram-pill">Another agent (A2A)</div>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel center" data-rough>
    <span class="diagram-pill accent">App-agent loop</span
    ><small class="diagram-muted">actions · sessions · app state in SQL</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-box" data-rough>
    Result returns<br /><small class="diagram-muted"
      >to the channel that asked</small
    >
  </div>
</div>
```

```css
.diagram-pure {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.diagram-pure .diagram-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diagram-pure .diagram-arrow {
  font-size: 22px;
  line-height: 1;
}
.diagram-pure .center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
```

</Diagram>

Reach for this shape when the work runs in the background, the output leaves the
app, the domain is one-shot, or you are building a callable workflow for another
system. If users need to inspect, compare, correct, or share persistent objects,
start with [Chat](/docs/template-chat) or add a small app page around the same
actions.

## Scaffold {#scaffold}

Use the no-browser scaffold when you know you do not want a browser UI yet:

```bash
npx @agent-native/core@latest create my-agent --headless
cd my-agent
pnpm install
```

Then add actions and instructions exactly as you would in a chat app:

```bash
pnpm agent "Run the daily response-insights report and post the summary."
```

The `--headless` flag only chooses the initial scaffold. It does not choose a
different architecture. You can later move the same `actions/`, instructions,
skills, and SQL state into a chat app or full application surface.

## Add a UI later {#add-chat-later}

`--headless` is not a permanent runtime mode, and there is no `agent-native`
command that converts an existing action-only project into a browser app in
place. When people need a UI, use the [Chat template](/docs/template-chat) as
the migration reference and keep the durable action and database contract:

<Diagram id="doc-block-ui-later" title="One contract, multiple surfaces" summary={"Start with a headless workflow, then add a browser UI without rewriting the actions, data, instructions, or skills underneath."}>

```html
<div class="diagram-ui-path">
  <div class="diagram-panel" data-rough>
    <span class="diagram-pill accent">Start headless</span
    ><small class="diagram-muted">jobs · CLI · external agents</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel" data-rough>
    <span class="diagram-pill">Add a UI</span
    ><small class="diagram-muted">chat · routes · durable pages</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel ok" data-rough>
    <span class="diagram-pill ok">Keep the contract</span
    ><small class="diagram-muted">actions · SQL · instructions · skills</small>
  </div>
</div>
```

```css
.diagram-ui-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.diagram-ui-path .diagram-panel {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.diagram-ui-path .diagram-arrow {
  font-size: 22px;
  line-height: 1;
}
```

</Diagram>

1. Scaffold the first workflow with `npx @agent-native/core@latest create my-agent --headless`.
2. When a browser surface becomes useful, bring in the template's shell, server
   plugins, and UI dependencies. For chat, that includes `<AgentChatSurface>`
   and an `agent-chat` plugin that loads the existing action registry.
3. Keep your action names, Zod schemas, SQL data, instructions, and skills. A
   UI calls those same actions; it does not replace them.
4. Verify both surfaces with `pnpm typecheck`, `pnpm dev`, and one UI flow that
   calls an existing action.

Use `agent-native add` for integration blueprints, not for this conversion.
Choose chat when people need conversational steering, approvals, or durable
thread history; add app pages when they need to browse, compare, edit, or share
persistent objects.

## What's next {#whats-next}

- [**Getting Started**](/docs/getting-started) — the chat-first tutorial from action to inline result to durable page
- [**Agent Surfaces — Automation-first app**](/docs/agent-surfaces#headless) — the full decision guide and APIs
- [**Actions**](/docs/actions) — the operations your automation calls
- [**Messaging the agent**](/docs/messaging) — how users talk to the agent across web, Slack, Telegram, and email
- [**Recurring Jobs**](/docs/recurring-jobs) — scheduled prompts the agent runs on its own
- [**Dispatch**](/docs/template-dispatch) — the workspace control plane for shared secrets, scheduled jobs, and delegated work