@agent-native/core 0.84.35 → 0.84.36

package/docs/content/locales/de-DE/getting-started.mdx

@@ -1,259 +1,193 @@
 ---
 title: "Erste Schritte"
-description: "Erstellen Sie eine Agenten-App, verstehen Sie die Anweisungen skills und actions und beobachten Sie dann, wie der Agent seine erste Aktion aufruft."
+description: "Erstellen Sie eine chat-first agentic app, fügen Sie eine action hinzu, rendern Sie strukturierte Ergebnisse inline und wachsen Sie zu einer persistenten Seite, die der Agent öffnen kann."
 ---
 
 # Erste Schritte
 
-Agent-Native-Apps geben einem KI-Agenten und Ihrem UI die gleichen actions, Daten und
-Zustand. Ein Basisagent besteht aus Anweisungen, die ihn leiten, skills, die ihn lehren
-wiederholbares Verhalten und actions, mit dem es echte Arbeit leisten kann.
-
-**Möchten Sie eine vollständige App als Ausgangspunkt?** Klonen Sie eine unserer umfangreichen Vorlagen –
-[Chat](/docs/template-chat), [Mail](/docs/template-mail),
-[Calendar](/docs/template-calendar), [Content](/docs/template-content),
-[Analytics](/docs/template-analytics) und [many more](/docs/cloneable-saas) –
-Jede davon ist eine App mit vollem Funktionsumfang, die Sie anpassen können.
-
-Von Grund auf neu bauen? Die einzige Wahl im Voraus ist, ob Sie einen UI möchten –
-alles danach (Anweisungen schreiben, skills hinzufügen, actions definieren, ausführen
-der Agent) ist in beiden Fällen gleich.
-
-<FileTree
-  id="doc-block-1m1bjf2"
-  title="Ein einfacher Agent-Native-Agent"
-  entries={[
-    {
-      path: "AGENTS.md",
-      note: "Immer aktive Anweisungen: Zweck, Regeln, Ton und Karte dessen, was der Agent tun kann",
-    },
-    {
-      path: ".agents/skills/customer-research/SKILL.md",
-      note: "Ein wiederverwendbares Playbook, das der Agent lädt, wenn die Aufgabe passt",
-    },
-    {
-      path: "actions/summarize-week.ts",
-      note: "Typisierter Code, den Agent, UI, CLI, HTTP, MCP, A2A, Jobs und Webhooks ausführen können",
-    },
-  ]}
-/>
-
-Dies gilt unabhängig davon, ob Sie mit einem Chat-Oberfläche, einem Headless-Agenten oder einer vollständigen App beginnen.
-Der UI verändert die Oberfläche; Anweisungen, skills und actions geben dem Agenten seine
-Anleitung und Verhalten.
-
-## 1. Erstellen Sie Ihre App
-
-Sie benötigen [Node.js 22+](https://nodejs.org) und [pnpm](https://pnpm.io).
-
-Führen Sie `create` ohne Flags aus und Sie werden gefragt, wie Sie beginnen möchten (eine vollständige Vorlage).
-Chat oder Headless) vor allem anderen:
+Agent-Native ist für agentic applications gedacht: AI agent und UI teilen dieselben [actions](/docs/actions), SQL-Daten und application state. Der Standardpfad beginnt mit Chat, damit Benutzer sofort mit dem Agent sprechen können, und wächst dann zu den Produktoberflächen, die der Workflow braucht.
 
-```bash
-npx @agent-native/core@latest create my-app
-```
+Der nützliche Einstieg:
 
-Oder übergeben Sie ein Flag, um die Eingabeaufforderung zu überspringen:
+1. Eine Chat app erstellen.
+2. Eine action hinzufügen.
+3. Das action-Ergebnis inline im Chat rendern.
+4. Daten in SQL persistieren.
+5. Eine Seite hinzufügen, die der Agent öffnen kann, wenn visuelle Prüfung besser ist.
 
-**Möchten Sie ein UI?** Beginnen Sie mit der Chat-Vorlage. Sie erhalten einen Arbeitsagenten plus ein
-Anpassbarer Chat-Oberfläche, und jede von Ihnen hinzugefügte Aktion wird automatisch darin angezeigt:
+## 1. Chat app erstellen {#create-your-app}
+
+Sie brauchen [Node.js 22+](https://nodejs.org) und [pnpm](https://pnpm.io).
 
 ```bash
 npx @agent-native/core@latest create my-app --template chat
+cd my-app
+pnpm install
+pnpm dev
 ```
 
-**Nur das Headless-Grundelement?** Headless starten – derselbe actions und Agent
-Schleife, keine UI-Shell:
-
-```bash
-npx @agent-native/core@latest create my-agent --headless
+Das Template enthält durable chat threads, auth, live sync, ein `actions/`-Verzeichnis, die Standard-actions `view-screen` und `navigate` sowie eine React app, die Sie erweitern können.
+
+## 2. Action hinzufügen {#add-an-action}
+
+Eine action ist eine typisierte Operation, die Agent und UI gemeinsam aufrufen. Für diesen Ablauf erstellen Sie `actions/analyze-responses.ts`: Sie analysiert Formularantworten und gibt eine validierte Form für ein eigenes Chat-Diagramm zurück.
+
+{/* prettier-ignore */}
+```ts
+// actions/analyze-responses.ts
+import { defineAction } from "@agent-native/core/action";
+import { z } from "zod";
+
+const responseChartResultSchema = z.object({
+  title: z.string(),
+  points: z.array(z.object({ day: z.string(), responses: z.number() })),
+});
+
+export default defineAction({
+  description: "Analyze recent form responses and render a custom chart.",
+  schema: z.object({ 
+    formId: z.string().default("demo") 
+  }),
+  outputSchema: responseChartResultSchema,
+  chatUI: { 
+    renderer: "responses.response-chart", 
+    title: "Antwortdiagramm" 
+  },
+  readOnly: true,
+  run: async ({ formId }) => ({
+    title: `Responses for ${formId}`,
+    points: [{ day: "Mon", responses: 12 }, { day: "Tue", responses: 18 }, { day: "Wed", responses: 24 }, { day: "Thu", responses: 21 }],
+  }),
+});
 ```
 
-Installieren Sie dann aus dem von Ihnen erstellten Ordner:
+Direkt ausführen:
 
 ```bash
-cd my-agent # oder my-app, wenn Sie die Chat-Vorlage gewählt haben
-pnpm install
+pnpm action analyze-responses --formId demo
 ```
 
-Von hier an sind die beiden identisch.
-
-## 2. Fügen Sie eine Aktion hinzu
-
-Eine Aktion ist ein Vorgang, den Ihr Agent – und Ihr UI – aufrufen kann. Beide Gerüste
-Versenden Sie mit diesem Beispiel:
-
-<AnnotatedCode
-  id="doc-block-lcwfj3"
-  title="Deine erste Action"
-  filename="actions/hello.ts"
-  language="ts"
-  code={
-    'import { defineAction } from "@agent-native/core/action";\nimport { z } from "zod";\n\nexport default defineAction({\n  description: "Sage Hallo vom lokalen Agenten.",\n  schema: z.object({\n    name: z.string().default("world"),\n  }),\n  http: { method: "GET" },\n  readOnly: true,\n  run: async ({ name }) => {\n    return { message: `Hello, ${name}!` };\n  },\n});'
-  }
-  annotations={[
-    {
-      lines: "5",
-      label: "Tool-Beschreibung",
-      note: "Der Agent liest `description`, um zu entscheiden, wann er dies als Tool aufruft.",
-    },
-    {
-      lines: "6-8",
-      label: "Typisierter Vertrag",
-      note: "Ein zod-`schema` validiert Eingaben von jeder Oberfläche: Agent, UI, HTTP, MCP und A2A.",
-    },
-    {
-      lines: "9",
-      label: "HTTP-Verb",
-      note: "Schalte diese Action für einen automatisch eingebundenen HTTP-Endpunkt frei.",
-    },
-    {
-      lines: "10",
-      label: "Schreibgeschützt",
-      note: "`readOnly` markiert die Action als ohne Genehmigung sicher aufrufbar und für Abfragen cachebar.",
-    },
-    {
-      lines: "11-13",
-      label: "Eine Implementierung",
-      note: "Der `run`-Block ist die einzige Wahrheit, die jede Oberfläche ausführt.",
-    },
-  ]}
-/>
-
-Ersetzen Sie `hello` durch den ersten echten Vorgang in Ihrer Domäne. Sie definieren es einmal;
-Jede Oberfläche nimmt es auf.
-
-Verwenden Sie `AGENTS.md` als Anleitung, die in jeder Runde gelten sollte. Verwenden Sie eine Fertigkeit, wenn
-Agent benötigt einen wiederverwendbaren Workflow oder eine wiederverwendbare Domänenprozedur. Verwenden Sie eine Aktion, wenn
-Der Agent benötigt eine typisierte, testbare Möglichkeit, Daten zu lesen, Daten zu schreiben, einen API aufzurufen oder
-Führen Sie eine Genehmigung durch.
-
-## 3. Führen Sie es aus
-
-Aktion direkt aufrufen:
+Oder im Browser den Agent fragen:
 
-```bash
-pnpm action hello --name Steve
-```
+> Analysiere die letzten Antworten für das Demo-Formular.
 
-Oder bitten Sie den Agenten, für Sie anzurufen:
+## 3. Ergebnis im Chat rendern {#render-inline}
 
-```bash
-pnpm agent "Call the hello action for Steve and explain what happened."
-```
+Weil die action `outputSchema` und eine produktspezifische `chatUI.renderer` deklariert, muss der Transcript strukturierte Daten nicht in Fließtext verwandeln. Registrieren Sie beim App-Start eine React-Komponente für genau diese Renderer-ID, zum Beispiel indem `app/chat-renderers.tsx` einmal aus `app/root.tsx` importiert wird:
 
-Wenn Sie mit der Chat-Vorlage begonnen haben, führen Sie die App aus und verwenden Sie denselben Agenten in
-Browser – er kann bereits jede von Ihnen definierte Aktion aufrufen:
+{/* prettier-ignore */}
+```tsx
+import { registerActionChatRenderer, type ToolRendererProps,} from "@agent-native/core/client/chat";
+
+type ResponseChartResult = {
+  title: string;
+  points: Array<{ day: string; responses: number }>;
+};
+
+function ResponseChart({ context }: ToolRendererProps) {
+  const result = context.resultJson as ResponseChartResult;
+  const max = Math.max(...result.points.map((point) => point.responses), 1);
+  return (
+    <section className="rounded-lg border bg-card p-4">
+      <h3 className="text-sm font-medium">{result.title}</h3>
+      <div className="mt-4 flex h-32 items-end gap-2">
+        {result.points.map((point) => (
+          <div key={point.day} className="flex flex-1 flex-col items-center gap-2">
+            <div className="w-full rounded-t bg-primary" style={{ height: `${(point.responses / max) * 100}%` }} />
+            <span className="text-xs text-muted-foreground">{point.day}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
 
-```bash
-pnpm dev
+registerActionChatRenderer({
+  id: "responses.response-chart",
+  renderer: "responses.response-chart",
+  Component: ResponseChart,
+});
 ```
 
-Diese eine Aktion ist jetzt über den Chat-Oberfläche, CLI, HTTP, MCP, A2A, erreichbar.
-geplante Jobs und webhooks. Einmal festlegen, von überall aus anrufen.
-
-<Diagram id="doc-block-lkqelv" title={"Eine Aktion, jede Oberfläche"} summary={"Eine einzelne defineAction-Datei wird ohne zusätzliche Verkabelung an jeden Verbraucher verteilt."}>
-
-```html
-<div class="diagram-fan">
-  <div class="diagram-box" data-rough>defineAction</div>
-  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
-  <div class="diagram-surfaces">
-    <span class="diagram-pill">Chat-Oberfläche</span
-    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
-    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
-    ><span class="diagram-pill">Geplante Jobs</span
-    ><span class="diagram-pill">Webhooks</span>
-  </div>
-</div>
-```
+Für wiederverwendbare generische Ausgaben liefert das Framework außerdem eingebaute `data-chart`- und `data-table`-Renderer sowie `data-insights` für kombinierte Zusammenfassung-/Diagramm-/Tabellenkarten. Siehe [Native Chat UI](/docs/native-chat-ui).
 
-```css
-.diagram-fan {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-.diagram-fan .diagram-surfaces {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-width: 420px;
-}
-.diagram-fan .diagram-arrow {
-  font-size: 22px;
-  line-height: 1;
-}
-```
+<WireframeBlock id="doc-block-inline-result-wireframe-de">
+  <Screen
+    surface="desktop"
+    html={
+      "<div style='min-height:340px;box-sizing:border-box;padding:24px;display:flex;justify-content:center;align-items:center;background:var(--wf-bg)'><div style='width:min(530px,100%);display:flex;flex-direction:column;gap:14px'><div class='wf-card' data-rough style='align-self:flex-end;max-width:70%;padding:12px 14px'><strong>User</strong><p style='margin:6px 0 0'>Analysiere Demo-Antworten.</p></div><div class='wf-card' data-rough style='align-self:flex-start;width:min(370px,100%);padding:14px'><strong>Agent</strong><p class='wf-muted' style='margin:6px 0 12px'>Gerendert mit responses.response-chart.</p><section class='wf-card' data-rough style='padding:14px'><h3 style='margin:0 0 12px;font-size:14px'>Antwortdiagramm</h3><div data-rough='line:bottom' style='height:104px;display:flex;align-items:end;gap:8px;border-bottom:1.4px solid var(--wf-line);padding-bottom:4px'><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:38px;width:100%;background:color-mix(in srgb, var(--wf-accent) 24%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Mo</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:62px;width:100%;background:color-mix(in srgb, var(--wf-accent) 30%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Di</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:86px;width:100%;background:color-mix(in srgb, var(--wf-accent) 36%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Mi</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:54px;width:100%;background:color-mix(in srgb, var(--wf-accent) 42%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Do</span></div></div></section></div></div></div>"
+    }
+  />
+</WireframeBlock>
 
-</Diagram>
+## 4. Daten in SQL persistieren {#persist-data}
 
-## Status ist integriert
+Wenn Ergebnisse erneut geprüft, verglichen oder aktualisiert werden müssen, speichern Sie sie in SQL und halten Lese-/Schreibzugriffe hinter actions:
 
-Kopflos bedeutet nicht staatenlos. Actions, Sitzungen, Anwendungsstatus, Threads,
-Ausführungsverlauf und Anmeldeinformationen sind alle in SQL gespeichert. Lokal ist das SQLite bei
-`data/app.db`; In der Produktion legen Sie `DATABASE_URL` fest. Siehe
-[Deployment](/docs/deployment).
+Definieren Sie die Tabelle mit den portablen Framework-Helpern, nicht mit Imports aus `drizzle-orm/sqlite-core` oder `drizzle-orm/pg-core`:
 
-<Callout id="doc-block-8hc1bg" tone="info">
+```ts
+// server/db/schema.ts
+import { integer, now, table, text } from "@agent-native/core/db/schema";
 
-**Headless ist immer noch eine echte App.** Die App-Agent-Schleife speichert Sitzungen, Threads, Ausführungen, Einstellungen und Anmeldeinformationen in SQL – es handelt sich nicht um eine zustandslose Eingabeaufforderung. Sie können später eine Benutzeroberfläche hinzufügen, ohne Ihre Aktionen oder Ihren Status zu ändern.
+export const responseInsights = table("response_insights", {
+  id: text("id").primaryKey(),
+  formId: text("form_id").notNull(),
+  title: text("title").notNull(),
+  summary: text("summary").notNull(),
+  responseCount: integer("response_count").notNull(),
+  createdAt: text("created_at").notNull().default(now()),
+  updatedAt: text("updated_at").notNull().default(now()),
+});
+```
 
-</Callout>
+Diese Helper wählen das konfigurierte SQL-Backend, sodass dasselbe Schema lokal mit SQLite und in Produktion mit Postgres, Turso/libSQL, D1 oder einem anderen unterstützten SQL-Provider laufen kann.
 
-## UI anpassen
+- `create-response-insight` schreibt einen neuen insight.
+- `list-response-insights` liest Daten für die Seite.
+- `update-response-insight` aktualisiert einen Datensatz.
+- `analyze-responses` gibt weiterhin das native Chat-widget zurück.
 
-Wenn Sie mit der Chat-Vorlage begonnen haben, können Sie UI bearbeiten. Der Chat selbst
-ist eine kleine Route, die auf der `<AgentChatSurface>`-Komponente basiert:
+Erstellen Sie keine doppelte REST route nur für den Browser; UI und Agent sollten actions teilen.
 
-```tsx
-// app/routes/_index.tsx
-import { AgentChatSurface } from "@agent-native/core/client";
+## 5. Seite hinzufügen, die der Agent öffnen kann {#add-a-page}
 
-export default function ChatRoute() {
-  return <AgentChatSurface mode="page" className="h-full" />;
-}
-```
+Fügen Sie eine Route `/response-insights` mit `useActionQuery("list-response-insights")` und `useActionMutation("create-response-insight")` hinzu. Die Seite ist eine Projektion des SQL state; geschrieben wird weiter über dieselben actions.
 
-- **`app/routes/_index.tsx`** – die Chat-Seite. Ändern Sie die Vorschläge, leer
-  Zustand und Layout.
-- **`app/root.tsx`** – die App-Shell. Fügen Sie Ihre eigenen Routen und Bildschirme rund um das
-  Agent.
-- Legen Sie den Agenten mit `<AgentSidebar>` in einen beliebigen Bildschirm und bearbeiten Sie ihn von einem aus
-  mit `sendToAgentChat()` oder führen Sie eine Aktion direkt mit
-  `useActionMutation()`.
+<WireframeBlock id="doc-block-response-insights-page-wireframe-de">
+  <Screen
+    surface="desktop"
+    html={
+      "<main style='min-height:440px;box-sizing:border-box;padding:28px;background:var(--wf-bg)'><section style='max-width:960px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch'><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:16px'><header><h2 style='margin:0 0 4px;font-size:28px'>Antwort-Insights</h2><p class='wf-muted' style='margin:0'>Insights, die der Agent aus Formularantworten erstellt hat.</p></header><button class='primary' data-rough style='align-self:flex-start'>Demo-Formular analysieren</button><section style='display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px'><article class='wf-box' data-rough style='padding:12px'><strong>Preisthema</strong><p class='wf-muted' style='margin:8px 0 0'>Nutzer fragen nach einem Team-Tarif.</p></article><article class='wf-box' data-rough style='padding:12px'><strong>Onboarding-Abbruch</strong><p class='wf-muted' style='margin:8px 0 0'>Drei Schritte brauchen klarere Texte.</p></article></section><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:10px'><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>Demo-Formular</strong><span class='wf-muted'>42 Antworten analysiert</span></div><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>Nächster Schritt</strong><span class='wf-muted'>Zwei Insight-Entwürfe prüfen</span></div></section></section><aside class='wf-card' data-rough style='height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px'><strong>Chat</strong><div class='wf-box' data-rough style='align-self:flex-end;max-width:210px;padding:10px 12px'><span class='wf-muted'>Sie</span><p style='margin:4px 0 0'>Öffne Antwort-Insights.</p></div><div class='wf-box' data-rough style='align-self:flex-start;max-width:210px;padding:10px 12px'><span class='wf-muted'>Agent</span><p style='margin:4px 0 0'>Antwort-Insights geöffnet.</p></div></aside></section></main>"
+    }
+  />
+</WireframeBlock>
 
-Siehe [Drop-in Agent](/docs/drop-in-agent) für den vollständigen Komponentensatz und
-[Native Chat-Oberfläche](/docs/native-chat-ui) zum Rendern von Aktionsergebnissen als Tabellen
-Diagramme und getippte Karten anstelle von reinem Text.
+Erweitern Sie `view-screen` und `navigate`, damit der Agent die aktuelle Route kennt und `/response-insights` öffnen kann. Ergebnisse können außerdem `href: "/response-insights"` enthalten, um im Chat einen Button "Antwort-Insights öffnen" zu zeigen.
 
-**Kopflos gestartet und später ein UI wollen?** Die Chat-Vorlage _ist_ die UI-Auffahrt –
-seine `app/`-Schicht (React Router + Vite) ist genau das, was das Headless-Gerüst ist
-lässt weg. Der sauberste Schritt besteht darin, vom Chat aus zu starten (oder ein neues Gerüst zu erstellen)
-Vorlage; Ihr `actions/`-, Agent- und SQL-Status wird unverändert übernommen. Siehe
-[Agent Surfaces](/docs/agent-surfaces) für jede Fläche dazwischen.
+Wenn der Vollseiten-Chat eine App-Seite öffnet, verwenden Sie `AgentChatSurface`, `AgentSidebar`, `useAgentChatHomeHandoff`, `useAgentChatHomeHandoffLinks` und `chatViewTransition` aus [Agent Surfaces](/docs/agent-surfaces#rich-chat), damit der Chat in die Seitenleiste gleitet und derselbe Thread erhalten bleibt.
 
-## Projektstruktur
+## Projektstruktur {#project-structure}
 
 ```text
 my-app/
-  actions/         # Vom Agenten aufrufbare Actions
-  app/             # React-Frontend (nur UI-Templates; entfällt bei headless)
-  server/          # Nitro-API-Server (Routen, Plugins)
-  AGENTS.md        # Ständig geltende Agentenanweisungen
-  .agents/         # Skills, die der Agent bei Bedarf laden kann
+  actions/         # Operationen, die Agent und UI aufrufen können
+  app/             # React-Routen, Seiten und Chat-Oberflächen
+  server/          # Nitro-Server und SQL-Schema
+  AGENTS.md        # Immer aktive Anweisungen für den App-Agenten
+  .agents/         # Skills, die der Agent bei Bedarf lädt
   data/app.db      # Lokaler SQLite-Status, wenn DATABASE_URL nicht gesetzt ist
 ```
 
-## Wohin gehen Sie als nächstes?
-
-- **[Key Concepts](/docs/key-concepts)** – die Kernarchitektur: SQL, actions,
-  Synchronisierung und Kontextbewusstsein.
-- **[Actions](/docs/actions)** – die vollständige Aktion API: Schemata, HTTP, Authentifizierung und
-  Genehmigung.
-- **[Agent Surfaces](/docs/agent-surfaces)** – Headless, Chat, eingebetteter Sidecar,
-  und vollständige App.
-- **[Drop-in Agent](/docs/drop-in-agent)** – Fügen Sie den Agenten-Chat zu jeder React-App hinzu.
-- **[Deployment](/docs/deployment)** – platzieren Sie Ihre App auf Ihrer eigenen Domain.
-- **[FAQ](/docs/faq)** – Fragen zur Einrichtung und zum Produkt.
+## Sie möchten einen vollständigen Analytics-Startpunkt? {#analytics-starting-point}
+
+Das Response-insights-Beispiel oben ist absichtlich klein, damit die Framework-Bausteine sichtbar bleiben. Wenn Sie ein echtes Analytics-Produkt bauen, starten Sie stattdessen mit [Analytics](/docs/template-analytics). Das ist der robuste Startpunkt: Provider verbinden, vorhandene Dashboards und agent actions nutzen und von dort aus anpassen.
+
+## Nächste Schritte {#next}
+
+- **[Actions](/docs/actions)** — schemas, auth, approvals, hooks und transport.
+- **[Native Chat UI](/docs/native-chat-ui)** — Tabellen, Diagramme und typed cards für action-Ergebnisse.
+- **[Chat Template](/docs/template-chat)** — die minimale chat-first app.
+- **[Analytics Template](/docs/template-analytics)** — ein robuster Analytics-Startpunkt; Provider verbinden und dann anpassen.
+- **[Context Awareness](/docs/context-awareness)** — `view-screen`, `navigate`, route state und ausgewählte Objekte.
+- **[Agent Surfaces](/docs/agent-surfaces)** — chat, inline UI, app pages, embedded sidecars, automation und externe Agents.

package/docs/content/locales/de-DE/pure-agent-apps.mdx

@@ -1,16 +1,11 @@
 ---
-title: "Pure-Agent-Apps"
-description: "Apps, bei denen der Agent das gesamte Produkt darstellt: Die App-Agent-Schleife ist die Eingangstür, und UI wird nur hinzugefügt, wenn Menschen sie benötigen."
+title: "Automation-First Apps"
+description: "Agent-Native Apps ohne Browser für scheduled jobs, Queues, Skripte, integration workers und externe Agents."
 ---
 
-# Pure-Agent-Apps
+# Automation-First Apps
 
-Eine reine Agent-App ist das minimale Ende von Agent-Native: Die App-Agent-Schleife ist die
-Produkt, kein Dashboard. Sie senden eine Anfrage vom Terminal, Slack, E-Mail, a
-geplanter Job, ein anderer Agent oder Chat – „meine ungelesenen E-Mails zusammenfassen“, „veröffentlichen
-tägliche Metriken an Slack“ – und der Agent handelt und gibt das Ergebnis zurück, wo immer es ist
-gehört. Es ist immer noch eine echte App: actions, Sitzungen, App-Status, Verlauf,
-Einstellungen, Anmeldeinformationen und Freigabedatensätze sind alle live in SQL.
+Eine automation-first app ist eine Agent-Native App ohne Browser für scheduled jobs, Queues, Skripte, integration workers und externe Agents. Sie ist nicht der Standardpfad im Getting Started, aber nützlich, wenn der Workflow noch keine Seite braucht. Es ist immer noch eine echte App: actions, sessions, application state, run history, settings, credentials und Freigabedatensätze leben in SQL.
 
 <Diagram id="doc-block-vbpp1d" title={"Die App-Agent-Schleife ist die Eingangstür"} summary={"Viele Einstiegspunkte erreichen eine Agentenschleife über SQL-backed-Aktionen und -Status; Die Ergebnisse kehren dorthin zurück, woher die Anfrage kam. Die Benutzeroberfläche wird nur dann hinzugefügt, wenn eine Überwachung durch Menschen erforderlich ist."}>
 

package/docs/content/locales/de-DE/template-chat.mdx

@@ -7,7 +7,7 @@ description: "Eine minimalistische, agentennative Chat-First-App: dauerhafte Cha
 
 Chat ist der grundlegende Ausgangspunkt für agentennative Apps. Sie erhalten eine saubere Shell im ChatGPT-Stil mit Chat in der Mitte, einer Thread-Liste auf der linken Seite, Standard-App-Navigation, Authentifizierung, Live-Synchronisierung, actions und einer Beispielaktion. Beginnen Sie hier, wenn Sie eine echte Browser-App wünschen, auf der Sie aufbauen können, ohne sich auf eine Domain-Vorlage festzulegen.
 
-Wenn Sie die kleinste reine Aktionslaufzeit ohne Browser UI wünschen, beginnen Sie mit [Pure-Agent Apps](/docs/pure-agent-apps). Wenn Sie eine fertige Domänenproduktform wünschen, beginnen Sie mit [Calendar](/docs/template-calendar), [Mail](/docs/template-mail), [Content](/docs/template-content), [Forms](/docs/template-forms), [Analytics](/docs/template-analytics) oder einer anderen Domänenvorlage.
+Wenn Sie eine automation-first Laufzeit ohne Browser UI wünschen, beginnen Sie mit [Automation-First Apps](/docs/pure-agent-apps). Wenn Sie eine fertige Domänenproduktform wünschen, beginnen Sie mit [Calendar](/docs/template-calendar), [Mail](/docs/template-mail), [Content](/docs/template-content), [Forms](/docs/template-forms), [Analytics](/docs/template-analytics) oder einer anderen Domänenvorlage.
 
 <WireframeBlock id="doc-block-av9kdb">
   <Screen
@@ -200,4 +200,4 @@ Der Agent sollte ein Drizzle-Schema, actions, Route, Navigation und Anweisungen
 - [**Agent Surfaces**](/docs/agent-surfaces) – Headless-, Chat-, eingebettete und vollständige App-Muster
 - [**Actions**](/docs/actions) – der Aktionssystem-Chat und UI rufen beide auf
 - [**Native Chat-Oberfläche**](/docs/native-chat-ui) – Chat-Oberflächenprimitive und Laufzeitoptionen
-- [**Pure-Agent Apps**](/docs/pure-agent-apps) – reine Aktions-Apps, die später in Chat integriert werden können
+- [**Automation-First Apps**](/docs/pure-agent-apps) – Automationen, Queues, Skripte und externe Agent-Workflows ohne Browser-UI

package/docs/content/locales/de-DE/using-your-agent.mdx

@@ -99,7 +99,7 @@ Der Agent ist keine separate App, zu der Sie wechseln. Es wird als eine Handvoll
 
 Nicht jede App benötigt ein vollständiges Dashboard. Wenn der Agent das Produkt ist, können Sie die meisten benutzerdefinierten UI überspringen: Öffnen Sie die App, fragen Sie nach, was Sie möchten, und lassen Sie den Agenten den Rest erledigen. Der Agent verfügt immer noch über seine Verwaltungsoberfläche – Verlauf, Arbeitsbereich, Einstellungen –, aber die primäre Interaktion besteht aus Gesprächen und nicht aus Klicks.
 
-→ [**Pure-Agent Apps**](/docs/pure-agent-apps) – Apps, bei denen der Agent das gesamte Produkt ist.
+→ [**Automation-First Apps**](/docs/pure-agent-apps) – Apps ohne Browser für Jobs, Queues, Skripte und externe Agents.
 
 ## Sie sind Mitherausgeber {#you-co-edit}
 
@@ -113,5 +113,5 @@ Wenn Sie und der Agent an demselben Dokument arbeiten, wechseln Sie sich nicht a
 - [**Agent Mentions**](/docs/agent-mentions) – leiten Sie es mit `@`-Erwähnungen
 - [**Voice Input**](/docs/voice-input) – steuern Sie es durch Sprechen
 - [**Drop-in Agent**](/docs/drop-in-agent) – in jede React-App einbetten
-- [**Pure-Agent Apps**](/docs/pure-agent-apps) – gehen Sie zu UI-arm, wenn der Agent das Produkt ist
+- [**Automation-First Apps**](/docs/pure-agent-apps) – Apps ohne Browser für Jobs, Queues, Skripte und externe Agents
 - [**Real-Time Collaboration**](/docs/real-time-collaboration) – gemeinsam dasselbe Dokument bearbeiten

package/docs/content/locales/es-ES/cloneable-saas.mdx

@@ -30,7 +30,7 @@ Cada una es una aplicación real que puedes usar hoy y la plataforma de lanzamie
 | [**Plan**](/docs/template-plan)           | Planos visuales y resúmenes de relaciones públicas con diagramas, esquemas y anotaciones.                                                        |
 | [**Dispatch**](/docs/template-dispatch)   | El plano de control del espacio de trabajo: secretos compartidos, integraciones reutilizables, Slack/Telegram, trabajos programados.             |
 
-¿No quieres una aplicación de dominio? Utilice [Chat](/docs/template-chat) cuando desee una aplicación básica con la que los usuarios puedan hablar inmediatamente, o comience con una acción en [Pure-Agent Apps](/docs/pure-agent-apps).
+¿No quieres una aplicación de dominio? Usa [Chat](/docs/template-chat) cuando quieras una app básica con la que los usuarios puedan hablar inmediatamente y que pueda crecer con actions, resultados nativos y pantallas. Usa [Automation-First Apps](/docs/pure-agent-apps) solo cuando el flujo todavía no necesite UI de navegador.
 
 Vea el catálogo completo en [Apps](/apps) o vaya directamente a uno; por ejemplo, [Dispatch](/docs/template-dispatch) es un excelente lugar para comenzar si desea una aplicación estilo espacio de trabajo.
 
@@ -168,7 +168,7 @@ No es necesario. Cada plantilla también está disponible como una aplicación a
 
 ## Aprovechando esto
 
-- [**Getting Started**](/docs/getting-started): crea una aplicación de chat mínima o un agente sin cabeza
+- [**Getting Started**](/docs/getting-started): crea una app chat-first, añade una action, renderiza un resultado estructurado y crece hacia una página
 - [**Messaging the agent**](/docs/messaging): cómo los usuarios (y usted) hablan con el agente que se envía con cada plantilla
 - [**Multi-App Workspace**](/docs/multi-app-workspace): agrupa varias plantillas en un espacio de trabajo que comparte autenticación, marca y agente
 - [**Dispatch**](/docs/template-dispatch): la plantilla del plano de control del espacio de trabajo
@@ -182,7 +182,7 @@ Si está realizando un scaffolding ahora, el comando CLI es:
 npx @agent-native/core@latest create my-platform
 ```
 
-Obtendrás un selector de selección múltiple. Elija una aplicación (independiente) o varias (espacio de trabajo: las aplicaciones comparten autenticación, marca, configuración del agente y base de datos). Cada plantilla seleccionada se estructura en `apps/<name>/` con cada archivo que necesita. Para una aplicación de solo acción en lugar de una plantilla UI, use `npx @agent-native/core@latest create my-agent --headless`.
+Obtendrás un selector de selección múltiple. Elija una aplicación (independiente) o varias (espacio de trabajo: las aplicaciones comparten autenticación, marca, configuración del agente y base de datos). Cada plantilla seleccionada se estructura en `apps/<name>/` con cada archivo que necesita. Para una automatización sin UI de navegador en lugar de una plantilla UI, use `npx @agent-native/core@latest create my-agent --headless`.
 
 Complete `.env` (principalmente `ANTHROPIC_API_KEY` y `DATABASE_URL`), `pnpm install`, `pnpm dev` y funciona. Sin "TODO: implementar inicio de sesión", sin rutas de marcador de posición.
 

package/docs/content/locales/es-ES/faq.mdx

@@ -11,15 +11,15 @@ Preguntas comunes sobre el agente nativo, organizadas desde "Solo estoy mirando"
 
 ### ¿Qué es el agente nativo? {#what-is-agent-native}
 
-Agent-native es un marco para crear aplicaciones en las que el agente de IA y la superficie del producto que lo rodea son socios iguales. Esa superficie puede comenzar como un agente sin cabeza con una acción personalizada, convertirse en un chat enriquecido o convertirse en un UI completo. La invariante es que los agentes y los humanos comparten el mismo actions, base de datos y estado. Consulte [What Is Agent-Native?](/docs/what-is-agent-native) para obtener la explicación completa.
+Agent-native es un marco para crear aplicaciones en las que el agente de IA y la superficie del producto que lo rodea son socios iguales. El camino habitual empieza con chat, añade actions tipadas, renderiza resultados estructurados en línea y crece hacia páginas duraderas sobre el mismo estado SQL. La invariante es que los agentes y los humanos comparten el mismo actions, base de datos y estado. Consulte [What Is Agent-Native?](/docs/what-is-agent-native) para obtener la explicación completa.
 
 ### ¿Para quién es esto? {#who-is-this-for}
 
 El agente nativo es para personas que desean que una aplicación real y un agente de IA trabajen con los mismos datos y actions. Las rutas comunes son:
 
 - **Utilice una aplicación alojada** si desea Correo, Calendario, Formularios, Plan u otra plantilla terminada sin configuración; comience en [template gallery](/templates).
-- **Comience con Chat** si desea una aplicación básica con la que los usuarios puedan hablar inmediatamente, luego amplíe con actions y pantallas; comience con [Getting Started](/docs/getting-started) o [Chat](/docs/template-chat).
-- **Inicie primitivo primero** si desea una acción y un bucle de agente de aplicación sin cabeza antes de comprometerse con UI; comience con [Getting Started](/docs/getting-started).
+- **Comience con Chat** si desea el camino predeterminado desde cero: los usuarios hablan con el agent inmediatamente, y usted amplía con actions, resultados nativos y pantallas; comience con [Getting Started](/docs/getting-started) o [Chat](/docs/template-chat).
+- **Comience automation-first** si crea tareas programadas, colas, scripts, integration workers o flujos de agents externos sin UI de navegador todavía; comience con [Automation-First Apps](/docs/pure-agent-apps).
 - **Bifurque y personalice una plantilla** si desea su propio producto SaaS con autenticación, base de datos, UI y agente actions ya conectados; consulte [Templates](/docs/cloneable-saas).
 - **Compile desde cero** si desea las primitivas del marco para un nuevo producto impulsado por agentes, comience con [Getting Started](/docs/getting-started).
 - **Conecte otro agente o herramienta de código** si desea que Claude, ChatGPT, Codex, Cursor o GitHub Copilot/VS Code utilice una aplicación nativa del agente; consulte [External Agents](/docs/external-agents) y [Skills Guide](/docs/skills-guide).
@@ -130,7 +130,7 @@ Ese es el punto. Bifurca una plantilla y personalízala preguntándole al agente
 
 ### ¿Puedo crear algo que las plantillas no cubran? {#build-from-scratch}
 
-Sí. Si desea una aplicación de chat básica, ejecute `npx @agent-native/core@latest create my-chat-app --template chat`; obtienes hilos de chat duraderos, actions, autenticación, estado de ejecución respaldado por SQL y espacio para agregar tus propias pantallas. Si desea la aplicación más pequeña de acción primero sin UI, ejecute `npx @agent-native/core@latest create my-agent --headless`. Consulte [Getting Started](/docs/getting-started), [Pure-Agent Apps](/docs/pure-agent-apps) y [Chat](/docs/template-chat).
+Sí. Si desea una app agentic básica, ejecute `npx @agent-native/core@latest create my-chat-app --template chat`; obtiene hilos de chat duraderos, actions, autenticación, estado de ejecución respaldado por SQL, renderizado nativo en línea y espacio para agregar sus propias pantallas. Si crea una automatización sin navegador, ejecute `npx @agent-native/core@latest create my-agent --headless`. Consulte [Getting Started](/docs/getting-started), [Automation-First Apps](/docs/pure-agent-apps) y [Chat](/docs/template-chat).
 
 ### ¿Puedo probarlo sin bifurcar una plantilla? {#try-with-a-skill}