给你的应用加一个 AI 聊天窗口

技术选型

前端 AI 聊天窗口的核心是流式响应——让用户看到逐字生成的效果。

实现要点

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);
  }
}

上下文管理

每次请求需要带上历史消息。消息越多 token 消耗越大，需要做截断或摘要。关于成本控制参考 LLM API 费用的那些坑。