React

import { createId } from "@paralleldrive/cuid2";
import { connectStreamstraightClient } from "@streamstraight/client";
import type OpenAI from "openai";
import { useState } from "react";

async function fetchStreamstraightToken() {
  const response = await fetch("/api/streamstraight-token", { method: "POST" });
  if (!response.ok) {
    throw new Error("Failed to fetch Streamstraight token");
  }
  const { jwtToken } = (await response.json()) as { jwtToken: string };
  return jwtToken;
}

export default function AiChatPage() {
  const [textInput, setTextInput] = useState<string>("");

  async function handleSendMessage({ text }: { text: string }) {
    const messageId = createId(); // Assign a unique ID for this message stream

    // Start listening for the stream in the background before
    // making the network request to your backend. This way,
    // your client can start receiving chunks before the server responds.
    void handleMessageStream({ messageId });

    // Make the network request to your backend to start LLM generation.
    await fetch("/your/api", {
      method: "POST",
      body: JSON.stringify({ messageId, text }),
      headers: { "Content-Type": "application/json" },
    });
  }

  async function handleMessageStream({ messageId }: { messageId: string }) {
    const ssClient =
      // Type each chunk however you want; you're not tied to the OpenAI example here
      // Just make sure the type matches whats on your server
      await connectStreamstraightClient<OpenAI.Responses.ResponseStreamEvent>(
        { fetchToken: fetchStreamstraightToken },
        { streamId: messageId },
      );

    for await (const chunk of ssClient.toAsyncIterable()) {
      // Handle each chunk as it's streamed
    }
  }

  return (
    <div>
      {/* Your chat UI */}
      <input value={textInput} onChange={(e) => setTextInput(e.target.value)} />
      <Button onClick={async () => await handleSendMessage({ text: textInput })}>
        Send
      </Button>
    </div>
  );
}