React State

Install

pnpm add https://github.com/ReByteAI/rebyte-agent-sdk/releases/latest/download/rebyte-agent-react.tgz

This package provides browser chat state and SSE event reduction. It is not a Responses client. Your server calls Rebyte with the official OpenAI SDK.

useRebyteChat

useRebyteChat owns state, not markup.

import { useMemo } from "react";
import { createFetchTransport, useRebyteChat } from "@rebyte/agent-react";

export function Chat() {
  const transport = useMemo(
    () => createFetchTransport({
      url: "/api/responses",
      interruptUrl: "/api/conversations/interrupt",
    }),
    [],
  );
  const chat = useRebyteChat({ transport });

  return (
    <form onSubmit={(event) => {
      event.preventDefault();
      void chat.send("Hello");
    }}>
      {chat.messages.map((message) => (
        <p key={message.id}>{message.content}</p>
      ))}
      <button disabled={chat.status === "streaming"}>Send</button>
    </form>
  );
}

The hook returns messages, status, error, conversationId, send, stop, and reset.

Browser boundary

The browser should send only input and an optional Conversation ID to your server:

{
  "input": "Compare it with the previous company.",
  "conversation": "conv_..."
}

Your server authenticates its user, adds the fixed Agent ID, calls Rebyte with the official OpenAI SDK, and forwards the SSE body without buffering. Never expose REBYTE_API_KEY in browser JavaScript, local storage, or a public environment variable.