A streaming chatbot

1// app/api/chat/route.ts
2import OpenAI from "openai";
3 
4const client = new OpenAI({
5  baseURL: "https://ai.upfyn.com/v1",
6  apiKey: process.env.UPFYN_API_KEY,   // server-only: never NEXT_PUBLIC_
7  maxRetries: 0,
8});
9 
10const SYSTEM = "You are a support assistant. Be brief. Say when you do not know.";
11 
12export async function POST(req: Request) {
13  const { messages } = await req.json();
14 
15  // Never trust the client's message list wholesale — cap it, and own the system prompt.
16  const recent = messages.slice(-20);
17 
18  const stream = await client.chat.completions.create({
19    model: "upfyn-yuva",
20    messages: [{ role: "system", content: SYSTEM }, ...recent],
21    stream: true,
22    max_tokens: 800,
23  });
24 
25  const encoder = new TextEncoder();
26  return new Response(
27    new ReadableStream({
28      async start(controller) {
29        try {
30          for await (const chunk of stream) {
31            // A failed turn arrives as a frame, not a status code.
32            const err = (chunk as { error?: { message: string } }).error;
33            if (err) {
34              controller.enqueue(encoder.encode(`\n\n[error: ${err.message}]`));
35              break;
36            }
37            const delta = chunk.choices?.[0]?.delta?.content;
38            if (delta) controller.enqueue(encoder.encode(delta));
39          }
40        } finally {
41          controller.close();
42        }
43      },
44    }),
45    {
46      headers: {
47        "Content-Type": "text/plain; charset=utf-8",
48        "Cache-Control": "no-store",
49        "X-Accel-Buffering": "no",   // stop a proxy buffering the whole stream
50      },
51    },
52  );
53}

1"use client";
2import { useState } from "react";
3 
4export function Chat() {
5  const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
6  const [input, setInput] = useState("");
7  const [busy, setBusy] = useState(false);
8 
9  async function send() {
10    const question = input.trim();
11    if (!question || busy) return;
12 
13    const next = [...messages, { role: "user", content: question }];
14    setMessages([...next, { role: "assistant", content: "" }]);
15    setInput("");
16    setBusy(true);
17 
18    const res = await fetch("/api/chat", {
19      method: "POST",
20      headers: { "Content-Type": "application/json" },
21      body: JSON.stringify({ messages: next }),
22    });
23 
24    const reader = res.body!.getReader();
25    const decoder = new TextDecoder();
26    let answer = "";
27 
28    while (true) {
29      const { done, value } = await reader.read();
30      if (done) break;
31      answer += decoder.decode(value, { stream: true });
32      // Replace the last message rather than appending a new one each tick.
33      setMessages([...next, { role: "assistant", content: answer }]);
34    }
35    setBusy(false);
36  }
37 
38  return ( /* ...your UI... */ null );
39}