---
title: "Chat Template"
description: "A minimal chat-first agent-native app: durable chat threads, actions, application state, live sync, auth, and room to add your own UI."
---

# Chat Template

Chat is the plainest agent-native starting point: a ChatGPT-style shell with chat at the center, a thread list, auth, and one example action — nothing domain-specific. It's for developers who want a real, deployable app to build their own agent and screens on top of, not a finished product for a specific job.

If you want a finished domain product shape, start from [Calendar](/docs/template-calendar), [Mail](/docs/template-mail), [Content](/docs/template-content), [Forms](/docs/template-forms), [Analytics](/docs/template-analytics), or another domain template. If you truly do not need a browser UI yet, see [Automation-First Apps](/docs/pure-agent-apps).

<WireframeBlock id="doc-block-chat1">
  <Screen
    surface="desktop"
    html={
      "<div style='min-height:560px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:56px 40px'><div style='display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:min(700px,92%);min-height:430px'><div style='height:34px'></div><div style='text-align:center'><h1 style='margin:0'>How can I help?</h1><p class='wf-muted' style='margin:10px 0 0'>Chat about anything. Add actions, components, pages, jobs, or your own backend.</p></div><div class='wf-card' style='width:100%;min-height:150px;display:flex;flex-direction:column;gap:18px'><span class='wf-muted'>Message the agent...</span><div style='flex:1'></div><div style='display:flex;align-items:center;gap:10px'><span data-icon='plus' aria-label='Attach'></span><div style='flex:1'></div><span class='wf-pill'>GPT-5.6 Luna · Auto</span><span class='wf-pill'>Act</span><button class='primary'>↑</button></div></div><div style='height:34px'></div></div></div>"
    }
  />
</WireframeBlock>

## What's in it {#whats-in-it}

- **Full-page chat** on `/` using the framework chat surface and durable chat threads.
- **Thread list in the app sidebar** so users can create, reopen, rename, pin, and archive chats.
- **Agent chat plugin** pre-configured so the chat talks to the built-in app-agent loop once your agent credentials are set.
- **Auth** via Better Auth — login, signup, sessions, organizations. See [Chat — runtime and admin surfaces](/docs/template-chat-developers#auth) for how sessions, orgs, and dev-mode email verification are configured.
- **Actions directory** with one example (`actions/hello.ts`) plus the standard `view-screen` and `navigate` actions.
- **The framework's core tables** for chat threads, application state, settings, sessions, resources, and run history — plus a Database admin page and an Observability dashboard mounted by default, whether or not you ever open them. See [Chat — runtime and admin surfaces](/docs/template-chat-developers).
- **Live sync** (`useDbSync`) already wired so UI auto-refreshes when the agent writes to SQL.
- **Extensions** routes mounted by default too, for sandboxed mini-apps your users build inside the chat later. See [Extensions](/docs/extensions).
- **AGENTS.md** with chat-first guidance for adding actions, routes, skills, and application state.

## What's _not_ in it {#not-in-it}

- No domain tables or seed data.
- No dashboards, lists, charts, forms, or provider integrations.
- No domain-specific actions beyond the example stub.

That's the point. Chat is a thin, useful default shell for your own agent, not a domain product pretending to be generic.

<Diagram id="doc-block-chat2" title="What ships in the Chat shell" summary={"A thin chat surface over the framework's standard runtime — actions, durable threads, live sync, and auth — with room to add your own UI."}>

```html
<div class="diagram-chat">
  <div class="diagram-col left">
    <div class="diagram-node">
      Thread list<br /><small class="diagram-muted"
        >create · reopen · pin · archive</small
      >
    </div>
    <div class="diagram-node">
      Full-page chat<br /><small class="diagram-muted"
        >framework chat surface on /</small
      >
    </div>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel center">
    <span class="diagram-pill accent">Actions</span
    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-col right">
    <div class="diagram-box">
      Core SQL tables<br /><small class="diagram-muted"
        >threads · application_state · settings · sessions · runs</small
      >
    </div>
    <div class="diagram-pill ok">Live sync &#8635;</div>
    <div class="diagram-box">
      Better Auth<br /><small class="diagram-muted"
        >login · orgs · sessions</small
      >
    </div>
  </div>
</div>
```

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

</Diagram>

## When to pick it {#when-to-pick}

- **You want a basic app users can talk to immediately** and then extend with actions and UI.
- **You want the default Agent-Native on-ramp**: chat first, then actions, native results, and app pages.
- **You want to plug your own agent backend into a familiar chat UI** while keeping Agent-Native's actions, state, auth, and deployment shape.
- **You are prototyping a custom internal tool** that does not match a domain template.

## Scaffolding {#scaffolding}

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

See [Getting started](/docs/getting-started) for `cd`, install, first run, and what the generated app looks like.

For automation-first work with no browser UI at all:

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

Use it for scheduled jobs, queues, CLI loops, or external-agent workflows where chat and app pages are not useful yet. The key invariant stays the same: actions are the shared surface for chat, UI, HTTP, MCP, A2A, and CLI. See [Automation-First Apps](/docs/pure-agent-apps) for that path in depth.

## What's next

- [**Your first feature in Chat**](/docs/template-chat-first-edits) — the starter chat route, annotated, plus a full walkthrough of adding a real feature
- [**Chat — runtime and admin surfaces**](/docs/template-chat-developers) — core tables, auth, and the Database/Observability/Extensions pages that ship by default
- [**Getting Started**](/docs/getting-started) — build the chat-first path from action to inline result to app page
- [**Templates**](/docs/cloneable-saas) — the Cloneable SaaS model, and every domain template to start from instead
- [**Agent Surfaces**](/docs/agent-surfaces) — chat, inline UI, app pages, embedded, automation, and external-agent patterns
- [**Actions**](/docs/actions) — the action system chat and UI both call
- [**Native Chat UI**](/docs/native-chat-ui) — chat surface primitives and runtime options
- [**Automation-First Apps**](/docs/pure-agent-apps) — no-browser workflows for jobs, queues, scripts, and external agents