---
title: "Templates"
description: "Start from a working SaaS product and make it yours — agent included."
---

# Templates

Want to ship your own AI-powered analytics tool? Mail client? Forms builder? Pick a template, and you've got a working SaaS in minutes — agent, database, auth, and deploy pipeline already wired up.

Most starter templates give you a blank scaffold and a long TODO list. Agent-native flips that. Each template is a **complete, SaaS-grade product** — already runnable on day one, already shippable, and entirely yours to customize, brand, and deploy. Think of them as Cloneable SaaS, not starter kits: you're starting from a finished product, not staring at boilerplate.

Building a workflow with no browser UI at all — a Slack bot, a nightly report, a webhook responder? See [Automation-First Apps](/docs/pure-agent-apps) instead; the templates on this page all ship a full browser UI alongside the agent.

## Example apps {#catalog}

Each one is a real app you could use today, and the launching pad for your own version of it.

| App                                       | What it is                                                                                                                   |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| [**Chat**](/docs/template-chat)           | Minimal chat-first app with durable threads, actions, auth, and a clean path to custom UI or your own backend.               |
| [**Mail**](/docs/template-mail)           | An agent-native Superhuman. Inbox, labels, AI triage, keyboard-first, drafts and sends through the agent.                    |
| [**Calendar**](/docs/template-calendar)   | An agent-native Google Calendar. Events, sync, public booking links, agent-driven scheduling.                                |
| [**Content**](/docs/template-content)     | Open-source Obsidian for MDX. Local Markdown/MDX editing with a Tiptap editor, Notion sync, and real-time multi-user collab. |
| [**Brain**](/docs/template-brain)         | Clean company chat backed by cited institutional memory, approved sources, review gates, and citations.                      |
| [**Assets**](/docs/template-assets)       | Digital asset manager for brand libraries, uploads, references, and on-brand image/video generation.                         |
| [**Slides**](/docs/template-slides)       | An agent-native Google Slides. React-based decks the agent generates and edits directly.                                     |
| [**Analytics**](/docs/template-analytics) | An agent-native Amplitude/Mixpanel. Connect data sources, prompt for charts, pin to dashboards.                              |
| [**Clips**](/docs/template-clips)         | Async screen + camera recording with transcription, chapters, and AI summaries.                                              |
| [**Design**](/docs/template-design)       | Agent-native HTML prototyping studio for interactive Alpine/Tailwind designs.                                                |
| [**Forms**](/docs/template-forms)         | An agent-native Typeform. Build, share, collect, and route submissions to Slack, Sheets, webhooks, or Discord.               |
| [**Plan**](/docs/template-plan)           | Visual plans and PR recaps with diagrams, wireframes, and annotations.                                                       |
| [**Dispatch**](/docs/template-dispatch)   | The workspace control plane: shared secrets, reusable integrations, Slack/Telegram, scheduled jobs.                          |

Don't want a domain app? Use [Chat](/docs/template-chat) when you want a basic app users can talk to immediately and extend with actions, native results, and screens. Use [Automation-First Apps](/docs/pure-agent-apps) only when the workflow truly does not need a browser UI yet.

See the full catalog under [Apps](/apps), or jump straight to one — for example, [Dispatch](/docs/template-dispatch) is a great place to start if you want a workspace-style app.

## What you get out of the box {#what-you-get}

Every example app ships with the parts that normally take months to build:

- **A working agent** — already wired into the app, already able to take actions on your data, already context-aware about what you're looking at. See [Messaging the agent](/docs/messaging) for how it works.
- **Auth** — sign in, sessions, organizations, multi-tenant isolation. Already done.
- **A database** — every example app has its schema, queries, and migrations ready to go. Bring your own SQL database (Postgres, SQLite, Turso, D1) — the framework adapts.
- **A real-time UI** — the screen stays in sync with what the agent does. Click "draft an email" in chat, watch the draft appear in your inbox immediately.
- **Deploy-ready** — push to Netlify, Vercel, Cloudflare, AWS, or anywhere else that runs Node. No vendor lock-in.
- **Branding hooks** — name, colors, logo, copy are all easy to change.

This isn't a theoretical claim. The framework's author runs his actual inbox on the Mail app, his actual calendar on the Calendar app, and his actual analytics on the Analytics app. These are daily-driver apps.

## What you do {#what-you-do}

The path from "I want my own SaaS" to "I have my own SaaS" is short:

<Diagram id="doc-block-1ab5jb9" title="Start from a working app" summary="Pick a finished product, brand it, evolve it in plain English, and ship it to your own domain.">

```html
<div class="diagram-fork">
  <div class="diagram-card">
    <span class="diagram-pill">1</span><strong>Pick</strong
    ><small class="diagram-muted">a complete app</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-card">
    <span class="diagram-pill">2</span><strong>Brand</strong
    ><small class="diagram-muted">name, colors, logo, copy</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-card">
    <span class="diagram-pill accent">3</span><strong>Customize</strong
    ><small class="diagram-muted">ask the agent &#8635;</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-card">
    <span class="diagram-pill ok">4</span><strong>Ship</strong
    ><small class="diagram-muted">your own domain</small>
  </div>
</div>
```

```css
.diagram-fork {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.diagram-fork .diagram-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  min-width: 130px;
}
.diagram-fork .diagram-arrow {
  font-size: 22px;
  line-height: 1;
}
```

</Diagram>

1. **Pick an example app.** Use the CLI picker, or browse the docs and pick one to start from.
2. **Brand it.** Change the name, colors, logo, and copy. Most example apps expose this in a single config file.
3. **Customize it.** Ask the agent to add the column you need, change how the inbox groups, connect to your internal API, add a new view. The agent edits the code; you review the diff.
4. **Ship it.** Run the deploy command. You now have your own production SaaS at your own domain.

Steps 2–4 typically take days, not months. Step 3 is open-ended — your customized SaaS evolves over time, in plain English, by talking to the agent.

## Why this is practical {#why}

A separate-codebase-per-user model breaks down at scale: every user maintaining their own inbox sounds like a maintenance nightmare. Two framework decisions make it work:

1. **The agent does the maintenance.** You don't write code to add a column or wire a new integration — you ask the agent. So "your own customized inbox" is a feature, not a burden.
2. **Per-user customization without per-user code.** Skills, memory, instructions, connected MCP servers, and sub-agents all live in SQL. Every user gets their own customization layer; the shared codebase hosts all of them at once.

The result: Claude-Code-level flexibility for each user, with normal SaaS deployment economics.

<Diagram id="doc-block-bhg7mw" title="Why per-user customization scales" summary={"Two ideas keep the start-from-a-working-app model practical: the agent does the maintenance, and per-user customization lives in SQL — not in per-user code."}>

```html
<div class="diagram-why">
  <div class="diagram-panel" data-rough>
    <strong>Shared codebase</strong
    ><small class="diagram-muted">one app, deployed once</small>
    <div class="diagram-pill accent">agent does the maintenance</div>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
  <div class="diagram-panel" data-rough>
    <strong>Per-user layer in SQL</strong
    ><small class="diagram-muted"
      >skills · memory · instructions · MCP · sub-agents</small
    >
    <div class="diagram-pill ok">no per-user code</div>
  </div>
</div>
```

```css
.diagram-why {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.diagram-why .diagram-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  min-width: 240px;
  flex: 1;
}
.diagram-why .diagram-arrow {
  font-size: 24px;
  line-height: 1;
}
```

</Diagram>

## Don't want to customize? {#hosted}

You don't have to. Every example app is also available as a hosted app on `agent-native.com` — `mail.agent-native.com`, `calendar.agent-native.com`, and so on. Use the hosted version for free or paid; create your own app from a template when you want to change something the hosted version doesn't expose.

## Try it with a skill {#try-with-a-skill}

Not ready to scaffold? You can add agent-native superpowers to a coding agent you already use with a single command — no app needed. See the [Skills Guide](/docs/skills-guide#app-backed-skills).

## What's next

- [**Automation-First Apps**](/docs/pure-agent-apps) — the complementary archetype for workflows with no browser UI
- [**Getting Started**](/docs/getting-started) — create a chat-first app, add an action, render a structured result, and grow into a page
- [**Messaging the agent**](/docs/messaging) — how users (and you) talk to the agent that ships with each app
- [**Multi-App Workspace**](/docs/multi-app-workspace) — bundle several apps into one workspace that shares auth, brand, and agent
- [**Dispatch**](/docs/template-dispatch) — the workspace control plane app
- [**Creating Templates**](/docs/creating-templates) — author and publish your own app template

### For developers {#dev-details}

If you're scaffolding now, the CLI command is:

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

The CLI first asks **How do you want to start?** — pick **Full template(s)**
to reach the multi-select picker (Chat and Headless each scaffold a single
standalone app directly instead, skipping the picker). Pick one app
(standalone) or several (workspace — apps share auth, brand, agent config, and
database). Each picked app is scaffolded into `apps/<name>/` with every file
you need. For a no-browser automation instead of an app UI, use
`npx @agent-native/core@latest create my-agent --headless`.

Fill in `.env` (mostly `ANTHROPIC_API_KEY` and `DATABASE_URL`), `pnpm install`, `pnpm dev`, and it works. No "TODO: implement login," no placeholder routes.

Deploy targets: any Nitro-compatible host (Node, Cloudflare, Netlify, Vercel, Deno, Lambda, Bun) and any Drizzle-compatible SQL database (SQLite, Postgres, Turso, D1, Supabase, Neon). For workspaces, `npx @agent-native/core@latest deploy` builds every app at once and ships them behind a single origin. See [Deployment](/docs/deployment).

To author and publish your own app template, see [Creating Templates](/docs/creating-templates).
