n8n AI API流式响应：打字机效果实战教程

Fallstudie: B2B-SaaS-Startup aus Berlin

• base_url-Austausch: Von generischen Endpunkten zu https://api.holysheep.ai/v1
• Key-Rotation: nahtloser Übergang mit YOUR_HOLYSHEEP_API_KEY
• Canary-Deployment: 5% → 25% → 100% Traffic über 72 Stunden

• Latenz: 420ms → 180ms (57% Verbesserung)
• Monatsrechnung: $4.200 → $680
• User Engagement: +35%
• Absprungrate: -28%

Warum Streaming-Responses entscheidend sind

Voraussetzungen und Setup

• n8n-Installation (Version 1.0+ empfohlen)
• HolySheep AI API-Key (erhältlich nach kostenloser Registrierung)
• Grundlegendes Verständnis von HTTP-Requests und Webhooks

Implementierung: Schritt-für-Schritt

1. HTTP-Request-Node konfigurieren

{
  "nodes": [
    {
      "name": "HolySheep Stream Request",
      "type": "n8n-nodes-base.httpRequest",
      "position": [250, 300],
      "parameters": {
        "url": "https://api.holysheep.ai/v1/chat/completions",
        "method": "POST",
        "sendHeaders": true,
        "headerParameters": {
          "parameters": [
            {
              "name": "Authorization",
              "value": "Bearer YOUR_HOLYSHEEP_API_KEY"
            },
            {
              "name": "Content-Type",
              "value": "application/json"
            }
          ]
        },
        "sendBody": true,
        "bodyParameters": {
          "parameters": [
            {
              "name": "model",
              "value": "deepseek-v3"
            },
            {
              "name": "messages",
              "value": "={{$json.messages}}"
            },
            {
              "name": "stream",
              "value": true
            }
          ]
        },
        "options": {
          "response": {
            "response": {
              "responseFormat": "stream"
            }
          }
        }
      }
    }
  ],
  "connections": {}
}

// n8n Function Node für SSE-Parsing
const streamData = $input.first().json;
const text = streamData.choices[0].delta.content || '';
const finishReason = streamData.choices[0].finish_reason;

return {
  json: {
    token: text,
    done: finishReason === 'stop',
    model: 'deepseek-v3',
    usage: streamData.usage || null
  }
};

<!-- HTML/JavaScript Frontend für Typewriter Effect -->
<div id="chat-container">
  <div id="response-display"></div>
</div>

<script>
async function streamResponse(userMessage) {
  const display = document.getElementById('response-display');
  
  const response = await fetch('YOUR_N8N_WEBHOOK_URL', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: [{ role: 'user', content: userMessage }] })
  });

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

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

    const chunk = decoder.decode(value);
    const lines = chunk.split('\n').filter(line => line.trim());

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = JSON.parse(line.slice(6));
        if (data.token) {
          fullResponse += data.token;
          display.innerHTML = fullResponse + '<span class="cursor">█</span>';
        }
      }
    }
  }

  display.innerHTML = fullResponse;
}
</script>

// Korrekter Body-Parameter
{
  "model": "deepseek-v3",
  "messages": [...],
  "stream": true  // ← Dieser Parameter ist zwingend erforderlich
}

// Headers müssen korrekt gesetzt sein
{
  "Authorization": "Bearer YOUR_HOLYSHEEP_API_KEY",
  "Content-Type": "application/json"
  // NICHT: text/event-stream im Request
}

// n8n HTTP-Node Timeout erhöhen
{
  "options": {
    "timeout": 300000,  // 5 Minuten für lange Generierungen
    "response": {
      "responseFormat": "stream"
    }
  }
}

// Token-Accumulation zurücksetzen bei neuem Request
let fullResponse = '';

function resetStream() {
  fullResponse = '';
  document.getElementById('response-display').innerHTML = '';
}

// Optimierter n8n Workflow mit Error-Handling
const holySheepRequest = async (messages) => {
  const maxRetries = 3;
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Authorization': Bearer ${$env.HOLYSHEEP_API_KEY},
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: 'deepseek-v3',
          messages,
          stream: true
        })
      });
      return response;
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(r => setTimeout(r, 1000 * Math.pow(2, i)));
    }
  }
};