Stream AI Chat Responses with OpenRouter

HTML

<div id="editor">
</div>

JAVASCRIPT

<script>
// OpenRouter settings. Replace the key with your own.
const OPENROUTER_API_URL = 'https://openrouter.ai/api/v1/chat/completions';
const OPENROUTER_API_KEY = 'sk-or-v1-YOUR_OPENROUTER_API_KEY';
const OPENROUTER_MODEL = 'openai/gpt-4o-mini';

// Reads a streamed response one line at a time.
// OpenRouter sends each piece of the answer as a "data: {...}" line.
async function readSSELines(response, onLine) {
  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split('\n');
    buffer = lines.pop(); // Keep the last, possibly incomplete, line for the next read.
    lines.forEach(onLine);
  }

  if (buffer) onLine(buffer); // Process anything left after the stream closes.
}

// Froala calls this function for every AI Chat and AI Assist request.
// AI Chat passes onChunk, so the answer streams in piece by piece.
// AI Assist leaves onChunk out, so the full answer comes back at once.
async function openRouterRequestHandler(request, signal, onChunk) {
  const streaming = typeof onChunk === 'function';

  const response = await fetch(OPENROUTER_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${OPENROUTER_API_KEY}`
    },
    body: JSON.stringify({
      model: OPENROUTER_MODEL,
      messages: [{ role: 'user', content: request.prompt }],
      stream: streaming
    }),
    signal // Lets the Cancel button end the request.
  });

  if (!response.ok) {
    throw new Error(`OpenRouter API error ${response.status}`);
  }

  // One-shot mode: the full answer arrives in a single JSON response.
  if (!streaming) {
    const data = await response.json();
    return (data.choices?.[0]?.message?.content || '').trim();
  }

  // Streaming mode: pass each new piece to onChunk as it arrives.
  let answer = '';

  await readSSELines(response, (line) => {
    const trimmed = line.trim();
    if (!trimmed.startsWith('data:')) return; // Skips keep-alive comments.

    const payload = trimmed.slice(5).trim();
    if (payload === '[DONE]') return; // OpenRouter's end-of-stream marker.

    let chunk;
    try {
      chunk = JSON.parse(payload);
    } catch (err) {
      console.warn('OpenRouter stream: skipped an unreadable line', err);
      return;
    }

    // Errors that happen mid-stream arrive as a data line with an "error" field.
    if (chunk.error) {
      throw new Error(`OpenRouter stream error: ${chunk.error.message}`);
    }

    const text = chunk.choices?.[0]?.delta?.content;
    if (text) {
      answer += text;
      onChunk(text);
    }
  });

  return answer.trim();
}

new FroalaEditor('#editor', {
  toolbarButtons: ['aiChatAssistant', 'aiAssist', '|', 'bold', 'italic', 'formatUL', '|', 'undo', 'redo'],
  heightMin: 300,
  aiSupplementalTermsAccepted: true, // Required for every AI feature.
  aiChatStreamResponse: true, // The default. Shown here for clarity.
  aiAssistRequest: openRouterRequestHandler
});
</script>