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

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. 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 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:

   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 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. Aufgabenkosten und Aufbewahrungsverhalten wurden hier nicht gemessen.
3. Bitte im Get started-Chat: Call the hello action for Alex. Die Einstiegsanleitung 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 definiert eine Zod-Eingabe name, eine GET-Aktion und mcpTool: true. Behalte diese Eigenschaften bei. Erstelle app/routes/hello.tsx mit dieser kleinen Seite:

   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:

   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.

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 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 belegt die Codeeigenschaften einschließlich mcpTool: true am Commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. Dieser Stand beweist nicht, was eine spätere Erstellung installiert.
• Umgebungsvariablen 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.