Most "AI integration" tutorials show you how to call the OpenAI API and print the response. That is fine for learning, but it is not production. Real applications need streaming, memory, structured data, cost control, and explainability.

I built all six patterns into a live banking application. Here is exactly what I did and why each one matters.

Pattern 01
GPT Streaming with Server-Sent Events
Instead of waiting 3-5 seconds for a full response, stream tokens as they arrive. Users see the response building word by word โ€” the same experience as ChatGPT.
// Backend โ€” Express SSE endpoint
app.post('/api/chat-stream', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.flushHeaders();

  const stream = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    stream: true,
    messages: req.body.messages,
  });

  for await (const chunk of stream) {
    const text = chunk.choices[0]?.delta?.content || '';
    if (text) res.write(`data: ${JSON.stringify({ text })}\n\n`);
  }
  res.write('data: [DONE]\n\n');
  res.end();
});
// Frontend โ€” read the stream
const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  for (const line of decoder.decode(value).split('\n')) {
    if (!line.startsWith('data:')) continue;
    const data = line.slice(5).trim();
    if (data === '[DONE]') break;
    const { text } = JSON.parse(data);
    setStreamingText(prev => prev + text);
  }
}
Key insight: The frontend reads chunks as they arrive and appends each token to state. React re-renders on every token โ€” the user sees live typing.
Pattern 02
Conversation Memory
Every chat message sends the full conversation history to the backend. GPT remembers what was said earlier โ€” the difference between a toy chatbot and a real assistant.
// Send full history on every request
const response = await fetch('/api/chat-stream', {
  method: 'POST',
  body: JSON.stringify({
    message: userMessage,
    history: messages.map(m => ({
      role: m.role,
      content: m.content
    }))
  })
});

// Backend builds context from history
const messages = [
  { role: 'system', content: 'You are a financial advisor...' },
  ...history,  // full conversation
  { role: 'user', content: message }
];
Pattern 03
Structured JSON Output
Use response_format: json_object to get typed data back from GPT instead of freetext. No regex parsing, no format errors.
const completion = await openai.chat.completions.create({
  model: 'gpt-4o-mini',
  response_format: { type: 'json_object' },
  messages: [{
    role: 'system',
    content: 'Return ONLY valid JSON. No markdown, no explanation.'
  }, {
    role: 'user',
    content: `Recommend 3 banking products for user with
              avg spend $${avgSpend}/month.
              Return: { "products": [{name, tagline, benefit, icon}] }`
  }]
});

const { products } = JSON.parse(completion.choices[0].message.content);
Pattern 04
Parallel Completions โ€” n:5
Get 5 different responses in one API call instead of 5 separate calls. Pick the best one or cache all of them for variety.
const completion = await openai.chat.completions.create({
  model: 'gpt-4o-mini',
  n: 5,  // 5 responses, 1 API call
  messages: [{ role: 'user', content: prompt }],
});

// Cache all 5 โ€” serve randomly to avoid repetition
const options = completion.choices.map(c => c.message.content);
fs.writeFileSync('cache.json', JSON.stringify({ options }));
Cost note: n:5 uses 5x the output tokens but only 1x the input tokens. For short responses this saves money vs 5 separate calls.
Pattern 05
Response Caching
Generate responses once, cache them, serve from cache. Avoids repeated API calls for similar prompts.
Pattern 06
ML + LLM Pipeline
Use a traditional ML model for the prediction (fast, cheap, explainable) and GPT to translate the result into plain English. Best of both worlds.
// ML model predicts the number
const predicted = regression.predict(months.length + 1);

// GPT explains it in human language
const advice = await openai.chat.completions.create({
  model: 'gpt-4o-mini',
  messages: [{
    role: 'user',
    content: `Predicted spending: $${predicted.toFixed(2)}.
              History: ${spending.join(', ')}.
              Give one specific saving tip.`
  }]
});

The live demo of all 6 patterns is at kirti.github.io/ai-banking-poc-frontend. Open DevTools โ†’ Network tab โ†’ filter by "stream" to watch the SSE events arrive in real time.

๐ŸŽ“ Want to build this yourself?

I teach React + AI integration from beginner to advanced. We work on real POC projects โ€” not toy examples. Book a free 30-minute session to discuss your learning goals.

๐Ÿ“… Book Free Session
โ† All articles Next: GitHub Actions Patterns โ†’