Sign up (with export icon)

Streaming

Show the table of contents

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

Overview

Copy link

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

SSE Event Types

Copy link

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

  • Conversations – Interactive AI discussions with text streaming, web search sources, and reasoning.
  • Reviews – Content improvement suggestions and review progress.
  • Actions – Content transformations and action progress.

Basic Implementation

Copy link

Here is the standard pattern for consuming SSE streams:

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

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

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  const chunk = decoder.decode(value);
  const lines = chunk.split('\n');

  for (const line of lines) {
    if (line.startsWith('data: ')) {
      const data = JSON.parse(line.slice(6));

      // Handle different event types
      // See service-specific guides for detailed event handling:
      // - Conversations: text-delta, source, reasoning, modification-delta
      // - Reviews: review-delta, review-metadata
      // - Actions: modification-delta, action-metadata

      switch (data.event) {
        case 'error':
          // Handle errors
          console.error('Error:', data.data.message);
          break;
        default:
          // Handle all other events
          console.log('Event:', data.event, data.data);
      }
    }
  }
}
Copy code

Event Handling Patterns

Copy link

For detailed event handling examples specific to each service, see:

  • Conversations – Text streaming, web search sources, reasoning, and document modifications.
  • Reviews – Review suggestions and progress tracking.
  • Actions – Content transformations and action progress.

Error Handling

Copy link

Always handle errors gracefully:

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

  // Show user-friendly error message
  showErrorMessage(error.message);

  // Optionally retry or fallback
  if (error.retryable) {
    setTimeout(() => retryRequest(), 1000);
  }
}
Copy code

Progress Tracking

Copy link

Use metadata events to show progress. For service-specific progress tracking examples, see Review progress and status information.

API Reference

Copy link

For complete documentation on streaming endpoints, event schemas, and error codes, see:

Next Steps

Copy link