AI SDK's useChat

import { useChat } from "@ai-sdk/react";
import { StreamstraightChatTransport } from "@streamstraight/client";
import { DefaultChatTransport, type UIMessage, generateId } from "ai";
import { useState } from "react";

export function ChatComponent({
  chatData,
  fetchToken,
}: {
  chatData: { id: string; messages: UIMessage[]; currentlyStreaming: boolean };
  fetchToken: () => Promise<string>;
}) {
  const [textInput, setTextInput] = useState<string>("");
  const { messages, status, error, sendMessage, resumeStream } = useChat({
    id: chatData.id,
    messages: chatData.messages,
    transport: new StreamstraightChatTransport({
      fetchToken,
      api: "/api/chat", // Or wherever your server route handler is located
    }),
    // Set this to true. When useChat is mounted, it will try to resume
    // the stream if one is in-progress for this chatId.
    resume: true,
  });

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

import { openai } from "@ai-sdk/openai";
import { readChat, saveChat } from "@util/chat-store";
import { convertToModelMessages, generateId, streamText, type UIMessage } from "ai";
import { after } from "next/server";
import { createResumableStreamContext } from "resumable-stream";

// Defined in https://github.com/vercel/ai/blob/61a16427ad1838d274fe2718ace3e3afc5f83d58/packages/ai/src/ui/http-chat-transport.ts#L183
interface ApiChatData {
  /** Unique identifier for the chat session */
  id: string;
  /** Array of UI messages representing the conversation history */
  messages: Array<UIMessage>;
  /** ID of the message to regenerate, or undefined for new messages */
  messageId?: string;
  /** The type of message submission - either new message or regeneration */
  trigger: "submit-message" | "regenerate-message";
  // Only present when you update prepareSendMessagesRequest
  message?: UIMessage;
}

export async function POST(req: Request) {
  const requestData = (await request.json()) as ApiChatData;
  if (!requestData.messages) {
    return new Response(JSON.stringify({ error: "Invalid request payload" }), {
      status: 400,
      headers: { "Content-Type": "application/json" },
    });
  }

  const chat = await readChat(requestData.id);
  let messages = chat.messages;

  messages = [...messages, requestData.message];

  // Clear any previous active stream and save the user message
  saveChat({ id: requestData.id, messages, currentlyStreaming: true });

  const result = streamText({
    model: openai("gpt-4.1-mini"),
    messages: convertToModelMessages(requestData.messages),
  });

  return result.toUIMessageStreamResponse({
    generateMessageId: generateId,
    onFinish: ({ isAborted, isContinuation, messages, responseMessage }) => {
      // Save to chat however you do so
      saveChat({ id: requestData.id, messages, currentlyStreaming: false });
    },

    // This method allows you to consume the SSE stream however you want, in addition
    // to returning it from this POST endpoint to the client. Here we consume the
    // SSE stream by sending it to Streamstraight.
    async consumeSseStream({ stream }) {
      const server = await streamstraightServer(
        { apiKey: apiKey.key, baseUrl: API_ORIGIN },
        {
          // Use chatId as the unique streamId. This means that Streamstraight will keep
          // at most a single stream for each chat. Subsequent streams will overwrite
          // previous ones in the same chat.
          // We must do it this way because AI SDK does not generate a unique messageId
          // until after the message has been fully generated.
          streamId: requestData.id,
          // This must be true for AI SDK, because we are unique on chatId
          overwriteExistingStream: true,
        },
      );

      await server.stream(stream);
    },
  });
}