Adding an AI Chat Window to Your App

The Core: Streaming

The key feature of an AI chat UI is streaming — showing text generation token by token.

async function chat(messages) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: { 'Authorization': 'Bearer ' + apiKey },
    body: JSON.stringify({ model: 'gpt-4o-mini', messages, stream: true }),
  });
  for await (const chunk of parseStream(response.body)) {
    appendToChat(chunk);
  }
}

Context Management

Every request needs message history. More messages = more tokens = more cost. Truncate or summarize older messages. For cost details, see LLM API Cost Pitfalls.