Markdown-Ausgabe

AI-translated from English; not yet reviewed by a fluent editor.

# Eine Agent-Native-Aktion im Chat und auf einer React-Seite prüfen

> Rufe die hello-Aktion der Chat-Vorlage aus dem Agentenchat und einer React-Route auf, ändere einen Rückgabewert und vergleiche die dokumentierten Ergebnisse samt Belegen für den Werkzeugaufruf.

By BIG CHANGE Editorial

Published: 2026-10-19T10:08:15.758Z
Updated: 2026-10-19T10:08:15.758Z
Canonical: https://bigchange.ai/blog/agent-native-chat-react-action-parity-guide

![Conceptual charcoal illustration of one laptop showing two blank side-by-side work areas: conversation shapes on the left and a plain input and output area on the right.](https://bigchange.ai/api/media/file/agent-native-chat-react-comparison-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual product interface, action invocation or test result is depicted.

Die Chat-Vorlage von Agent-Native enthält eine `hello`-Aktion, die der Agent aufrufen kann. TypeScript-Entwickler können eine kleine React-Route ergänzen, die dieselbe Aktion aufruft, einen Rückgabewert ändern und beide Ergebnisse vergleichen. Diese Anleitung folgt dem [dokumentierten Beispiel von Agent-Native](https://www.agent-native.com/docs/). BIG CHANGE hat Dokumentation und Vorlagencode geprüft, die App aber nicht ausgeführt.

## Die große Veränderung

- **Was sich ändert:** Eine Aktion kann einem Agentenwerkzeug und einer React-Abfrage dieselbe typisierte Operation anbieten. Der Begrüßungscode liegt hier in einer einzigen Datei.
- **Warum das wichtig ist:** Entwickler können prüfen, ob beide Aufrufer nach einer Codeänderung dasselbe Ergebnis erhalten. So sinkt die Wahrscheinlichkeit, getrennte Begrüßungslogik für Chat und Seite zu pflegen. Gemeinsam gespeicherter Anwendungszustand ist damit nicht nachgewiesen.
- **Worauf achten:** Vergleiche den tatsächlichen Aktionsaufruf und seinen Rückgabewert, wenn die Chatoberfläche sie zeigt. Ein plausibler Satz des Modells allein beweist keinen Aufruf von `hello`. Prüfe vor wichtigen Operationen Berechtigung, Validierung und Zustandsänderungen getrennt.

## Die dokumentierte Chat-Vorlage einrichten

Du brauchst Node.js 22.22 oder neuer, `pnpm`, einen Codeeditor und einen OpenAI API-Schlüssel für den Chataufruf. Die Oberfläche lässt sich vor der Modellverbindung einrichten. Das geprüfte [core-Paket](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) und die npm-Registry meldeten am 18. Oktober 2026 Version `0.209.2`. Der offizielle Erstellungsbefehl verwendet das veränderliche `@latest`; prüfe dessen Version vor Beginn erneut.

1. Erstelle und starte in einem neuen Verzeichnis eine eigenständige Chat-App:

```bash
   npx --yes @agent-native/core@latest create my-app --standalone --template chat
   cd my-app
   corepack enable
   pnpm install
   pnpm dev
```

   Öffne die von `pnpm dev` ausgegebene lokale URL und wähle **Continue as local dev**. Ist 8080 belegt, kann die Portnummer steigen. Die erzeugte App enthält `actions/hello.ts`.

2. Verbinde den Chatagenten über **Custom keys** mit deinem OpenAI API-Schlüssel und wähle in Settings ein verfügbares Modell. Laut [Umgebungsvariablen-Anleitung](https://www.agent-native.com/docs/environment-variables/) speichert Custom keys die auf einen Geltungsbereich begrenzten Zugangsdaten verschlüsselt im datenbankgestützten Speicher der App. Schlüssel gehören weder in die Versionsverwaltung noch in browseröffentliche `VITE_`-Variablen. Modellanfragen nutzen das Anbieterkonto des Schlüsselinhabers. Prüfe vor sensiblen Inhalten aktuelle Preise und [Datenkontrollen](https://developers.openai.com/api/docs/guides/your-data). Aufgabenkosten und Aufbewahrungsverhalten wurden hier nicht gemessen.
3. Bitte im Get started-Chat: `Call the hello action for Alex.` Die [Einstiegsanleitung](https://www.agent-native.com/docs/) nennt `Hello, Alex!` als erwartete Antwort. Zeigt die Oberfläche Werkzeugdetails, bestätige den Aufruf von `hello` mit `name: "Alex"` und den entsprechenden Rückgabewert. Ein übereinstimmender Satz ohne Aufrufbeleg ist nicht schlüssig.
4. Sieh dir `actions/hello.ts` an. Die [auf diese Revision festgelegte Chat-Vorlage](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) definiert eine Zod-Eingabe `name`, eine GET-Aktion und `mcpTool: true`. Behalte diese Eigenschaften bei. Erstelle `app/routes/hello.tsx` mit dieser kleinen Seite:

```typescript
   import { useActionQuery } from "@agent-native/core/client/hooks";
   import { useState } from "react";

   export default function HelloRoute() {
     const [name, setName] = useState("Alex");
     const { data } = useActionQuery("hello", { name });

     return (
       <main>
         <label htmlFor="greeting-name">Name</label>
         <input
           id="greeting-name"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
         <p>{data?.message}</p>
       </main>
     );
   }
```

   Starte `pnpm dev` neu, damit die Route erkannt wird, und hänge `/hello` an die ausgegebene lokale URL an. Bei der Eingabe `Alex` ist `Hello, Alex!` das dokumentierte Ergebnis.

5. Ersetze in der bestehenden Funktion `run` von `actions/hello.ts` ausschließlich die Rückgabeanweisung:

```typescript
   return { message: `Welcome, ${name}.` };
```

   Lade `/hello` neu und bitte den Chat erneut um einen `hello`-Aufruf für Alex. Dokumentiert ist `Welcome, Alex.` an beiden Stellen. Vergleiche die Seitenanzeige mit dem Aktionsergebnis im Chat und, falls verfügbar, dessen Werkzeugdetails. Die Seite hält ihre Eingabe im React-Zustand. Diese Begrüßungsaktion liest und schreibt keinen gemeinsamen Datensatz.

| Prüfung | Vor der Rückgabeänderung | Nach der Rückgabeänderung |
| --- | --- | --- |
| `/hello` mit `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Chat-Aktionsergebnis für `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Dies sind die erwarteten Werte der Dokumentation. Notiere deine tatsächlich angezeigten Werte und verfügbare Aufrufdetails, bevor du den Versuch als abgeschlossen wertest.

Fehlt `pnpm`, führe in der erzeugten App `corepack enable` aus. Bei Peer-Dependency-Fehlern schlägt die offizielle Anleitung vor einem neuen Versuch `npx clear-npx-cache` vor. Zeigt der Chat **Connect AI**, schließe zuerst die Anbietereinrichtung ab. Fehlt `/hello`, starte nach dem Anlegen der Route den Entwicklungsserver neu. Dies sind dokumentierte Abhilfen, keine von uns beobachteten Ergebnisse.

## Quellen und weiterführende Informationen

- [Agent-Native-Einstieg](https://www.agent-native.com/docs/) beschreibt Erstellung, Agentenanweisung, React-Hook, erwartete Antworten und Fehlerbehebung. Im Aktionsauszug fehlt eine Eigenschaft der festgelegten Vorlage; bearbeite deshalb die erzeugte Aktion direkt.
- [Die festgelegte Chat-Aktion `hello` im Quellcode](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) belegt die Codeeigenschaften einschließlich `mcpTool: true` am Commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Dieser Stand beweist nicht, was eine spätere Erstellung installiert.
- [Umgebungsvariablen](https://www.agent-native.com/docs/environment-variables/) erklärt Schlüsselbereiche, Modellauswahl und die öffentliche Grenze von `VITE_`. Prüfe die Bedingungen deines Anbieters gesondert. Eine echte Chatanfrage wurde für diese Anleitung nicht untersucht.

## Sources

- [Agent-Native-Einstieg](https://www.agent-native.com/docs/) — [Agent-Native-Einstieg](https://www.agent-native.com/docs/) beschreibt Erstellung, Agentenanweisung, React-Hook, erwartete Antworten und Fehlerbehebung. Im Aktionsauszug fehlt eine Eigenschaft der festgelegten Vorlage; bearbeite deshalb die erzeugte Aktion direkt.
- [Festgelegte Chat-Aktion hello](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — Die [festgelegte Chat-Aktion `hello`](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) belegt die Codeeigenschaften einschließlich `mcpTool: true` am Commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Dieser Stand beweist nicht, was eine spätere Erstellung installiert.
- [Festgelegtes core-Paket](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Paketversion, Node-Anforderung und Lizenz.
- [Agent-Native-Umgebungsvariablen](https://www.agent-native.com/docs/environment-variables/) — [Umgebungsvariablen](https://www.agent-native.com/docs/environment-variables/) erklärt Schlüsselbereiche, Modellauswahl und die öffentliche Grenze von `VITE_`. Prüfe die Bedingungen deines Anbieters gesondert. Eine echte Chatanfrage wurde für diese Anleitung nicht untersucht.
- [OpenAI API-Datenkontrollen](https://developers.openai.com/api/docs/guides/your-data) — Referenz zur Datenverarbeitung des Anbieters; kein aufgabenspezifischer Datenverkehr beobachtet.