use custom chat transports in v5 for client-only streamText

[lixun910]

The recommended approach would be to implement your own chat transport, then fetch is never called.

https://github.com/vercel/ai/blob/main/packages/ai/src/ui/chat-transport.ts

// Vite 7.0.4 + React 19.1.0 + AI SDK 2.0.0-beta.11
import { createGoogleGenerativeAI } from "@ai-sdk/google"; // 2.0.0-beta.11
import { useChat } from "@ai-sdk/react"; // 2.0.0-beta.20
import { convertToModelMessages, DefaultChatTransport, streamText } from "ai"; // 5.0.0-beta.20
import { useState } from "react"; // 19.1.0

const google = createGoogleGenerativeAI({
  apiKey: import.meta.env.VITE_GOOGLE_GENERATIVE_AI_API_KEY, // Make .env with this value
});

const customFetch = async (_input: RequestInfo | URL, init?: RequestInit) => {
  const m = JSON.parse(init?.body as string);
  const result = streamText({
    model: google("gemini-2.0-flash"),
    messages: convertToModelMessages(m.messages),
    abortSignal: init?.signal as AbortSignal | undefined,
  });
  return result.toUIMessageStreamResponse();
};

function App() {
  const [input, setInput] = useState("");

  const { error, messages, sendMessage } = useChat({
    transport: new DefaultChatTransport({
      fetch: customFetch,
    }),
  });

  return (
    <main>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.parts.map((part, i) => {
            switch (part.type) {
              case "text":
                return <div key={`${message.id}-${i}`}>{part.text}</div>;
            }
          })}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput("");
        }}
      >
        {error && <div>Error: {error.message}</div>}
        <input
          value={input}
          placeholder="Say something..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
      </form>
    </main>
  );
}

export default App;