TinyMCE AI Streaming

Real-time AI interactions using Server-Sent Events (SSE) for immediate feedback and progressive content generation.

Overview

TinyMCE AI services use Server-Sent Events (SSE) to provide real-time streaming responses. This allows users to see AI-generated content as it is being created, providing immediate feedback and enabling interactive experiences.

SSE Event Types

Different AI services provide different types of streaming events. For service-specific event details, see:

  • Chat: Interactive AI discussions with text streaming, web search sources, and reasoning.

  • Review: Content improvement suggestions and review progress.

  • Quick Actions: Content transformations and action progress.

SSE wire format

The response body is a text stream in Server-Sent Events format. Events are separated by blank lines. Each event can include an event: line (event name) and one or more data: lines (payload; long payloads may be split across several data: lines). For example:

event: <event-name-1>
data: <data>

event: <event-name-2>
data: <data2>

Parsing this format correctly (including chunk boundaries, multi-line data: fields, and comments) is easy to get wrong in hand-written loops. For production code, use a maintained SSE parser such as the eventsource-parser package.

Basic Implementation

After obtaining a streaming Response from fetch, pass the byte stream through an SSE parser. The following example uses eventsource-parser to turn raw chunks into parsed events; application code then inspects each event payload (for example JSON with an event field and data for TinyMCE AI services):

import { createParser } from 'eventsource-parser';

const response = await fetch('/v1/your-endpoint', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer <token>',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    // Request payload
  })
});

const parser = createParser({
  onEvent: (event) => {
    // event.event is the SSE event name (if present)
    // event.data is the reassembled data string for this event
    const data = JSON.parse(event.data);

    switch (data.event) {
      case 'error':
        console.error('Error:', data.data.message);
        break;
      default:
        // Handle all other events — see service-specific guides:
        // - Conversations: text-delta, source, reasoning, modification-delta
        // - Reviews: review-delta, review-metadata
        // - Actions: modification-delta, action-metadata
        console.log('Event:', data.event, data.data);
    }
  }
});

const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  parser.feed(decoder.decode(value, { stream: true }));
}

Error Handling

Always handle errors gracefully:

if (data.event === 'error') {
  const error = data.data;
  console.error('Streaming error:', error.message);
}

Progress Tracking

Use metadata events to show progress. For review streaming and progress-related events, see Review streaming.

API Reference

The interactive API documentation describes streaming endpoints, event shapes, and errors for each feature area.

Next Steps