Client SDK

// userEnteredKey is obtained from a masked input, not from source or NEXT_PUBLIC_.
for await (const event of client.stream(messages, {
  body: { byok: { provider: "openai", model: "gpt-5-mini", apiKey: userEnteredKey } },
})) {
  if (event.type === "text-delta") renderDelta(event.delta);
}

pnpm add @aisdkpro/client

"use client";

import { useState, type FormEvent } from "react";
import { useAISDKProChat } from "@aisdkpro/client/react";

export function Chat() {
  const [input, setInput] = useState("");
  const chat = useAISDKProChat({ endpoint: "/api/chat" });

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!input.trim()) return;
    void chat.sendMessage({ text: input });
    setInput("");
  }

  return (
    <form onSubmit={onSubmit}>
      <div aria-live="polite">
        {chat.messages.map((message) => (
          <article key={message.id}>
            <strong>{message.role}</strong>
            {message.parts.map((part, index) =>
              part.type === "text" ? <p key={index}>{part.text}</p> : null,
            )}
          </article>
        ))}
      </div>
      <input
        value={input}
        onChange={(event) => setInput(event.target.value)}
        aria-label="Message"
      />
      <button type="submit" disabled={chat.status !== "ready"}>Send</button>
      <button type="button" onClick={chat.stop}>Stop</button>
    </form>
  );
}

import type { UIMessage } from "ai";
import { ChatClient } from "@aisdkpro/client";

const client = new ChatClient({
  baseUrl: "https://ai-sdk.pro",
  endpoint: "/api/chat",
});
const controller = new AbortController();
const messages: UIMessage[] = [{
  id: "user-1",
  role: "user",
  parts: [{ type: "text", text: "Explain ToolLoopAgent." }],
}];

for await (const event of client.stream(messages, { signal: controller.signal })) {
  if (event.type === "text-delta") process.stdout.write(event.delta);
  if (event.type === "error") console.error(event.errorText);
}

// Call this from a cancel button.
// client.stop();