Browser SDK

Import browser helpers from @trycereal/sdk/browser. Your application server first authorizes the viewer and issues a token. These helpers never need your Cereal API key.

subscribe

Use subscribe({ format, tokenSource, onChunk }) for direct event handling. format is required. tokenSource is a function returning a fresh token response, not a token string. It is called again when credentials expire.

The subscriber reconnects with backoff and its last event cursor. Call close() on navigation/unmount, or supply an AbortSignal. The chat tutorial shows a working subscription and rendering code.

SubscribeOptions · subscribe · SSE protocol

AI SDK

CerealChatTransport integrates with the AI SDK chat transport interface. sendUrl is an endpoint in your app, which authorizes the customer and sends the message through Cereal's API. tokenSource returns a token for the corresponding session. toUIMessageStream exposes a ReadableStream when you do not need the transport class.

CerealChatTransport · toUIMessageStream

AG-UI

AgUiSubscriber wraps the AG-UI event stream and exposes event subscriptions. It is not a complete CopilotKit adapter. Use the declared events and callbacks to integrate with your UI. AgUiSubscriber signature

Framework-free transcript state

createSessionStore maintains transcript state for your UI. It requires onChange, subscribes in cereal format, and returns state() and close().

import { createSessionStore } from "@trycereal/sdk/browser"

const session = createSessionStore({
  tokenSource,
  onChange(state) {
    renderTranscript(state.messages)
    renderApprovals(state.pendingApprovals)
  },
  onError(error) { console.warn(error) }
})

// Read a snapshot:
console.log(session.state().status)
// On navigation or component cleanup:
// session.close()

Here tokenSource, renderTranscript, and renderApprovals are application callbacks. For a complete implementation without placeholder callbacks, use the browser tutorial. In React, create the subscription in an effect and clean it up on unmount; do not create it on every render.

createSessionStore · CerealSessionState

Answering an approval

The stream displays pending actions. The answer goes through your application's server route and sessions.decide. See the approval tutorial.