Eine Web-Chat-App mit Next.js erstellen

​

Beispielprojekt

• GitHub: examples/web-chat-nextjs
• Lokaler Repository-Pfad: examples/web-chat-nextjs

​

Was die App macht

• • ruft verfügbare Modelle über GET /v1/models
• • sendet Chat-Beiträge über POST /v1/responses
• bewahrt den API-Schlüssel auf dem Server auf
• bietet einen einfachen Startpunkt für ein echtes Produkt ohne OAuth-Komplexität

​

Wichtige Dateien

• app/api/models/route.ts
• app/api/responses/route.ts
• app/components/ChatClient.tsx
• lib/gateway.ts

​

Warum das Beispiel so aufgebaut ist

​

1. Der Browser ruft Phaseo nicht direkt auf

• serverseitige Verwaltung von Geheimnissen
• einen zentralen Ort für Header und Request-Payloads
• einen einfacheren Weg für spätere Erweiterungen wie Authentifizierung, Ratenlimits oder Protokollierung

​

2. Modellerkennung und Generierung sind getrennt

• eine Route zum Auflisten von Modellen
• eine Route zum Ausführen der Chat-Anfrage

​

3. Die UI verwaltet nur den Interaktionsstatus

• den Eingabestatus
• den Ladestatus
• die Fehleranzeige
• die gerenderten Nachrichten

​

Voraussetzungen

• • Node.js und ein unterstützter Paketmanager
• ein Phaseo-API-Schlüssel

​

Beispiel ausführen

cd examples/web-chat-nextjs
npm install
cp .env.example .env.local

cd examples/web-chat-nextjs
pnpm install
cp .env.example .env.local

cd examples/web-chat-nextjs
yarn install
cp .env.example .env.local

cd examples/web-chat-nextjs
bun install
cp .env.example .env.local

• PHASEO_API_KEY
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

Ergebnis prüfen

• Der Modellauswahlschalter lädt Modelle über die Serverroute.
• Eine gesendete Nachricht erzeugt eine Antwort des Assistenten.
• Das Netzwerk-Panel des Browsers legt PHASEO_API_KEY.
• Eine fehlgeschlagene Gateway-Anfrage wird in der UI als hilfreicher Fehler angezeigt.

​

Die App anpassen

• ändere das Standardmodell auf dein gewünschtes Produktionsmodell
• füge Streaming hinzu, wenn deine Oberfläche Token für Token anzeigen soll
• ergänze später Authentifizierung, falls die App mehrere Nutzer unterstützt
• ersetze die interne Implementierung der Serverroute später durch das TypeScript-SDK, wenn du einen Client mit höherer Abstraktion möchtest

​

Wann ein anderer Startpunkt sinnvoll ist

• nutze den Node-Schnellstart für ein Skript oder einen Backend-Test statt einer UI
• nutze den Python-Schnellstart, wenn die erste Integration in einem Worker, einer CLI oder einem Backend-Dienst liegt

​

Verwandte Anleitungen

• Prompts für den Einstieg mit einer Mini-App
• Beispiele
• Schnellstart