大模型集成实战：如何用 GPT 构建智能对话应用

大模型集成实战：如何用 GPT 构建智能对话应用

直接用 OpenAI API 就能跑起一个智能对话应用。核心就两步：按规范拼装请求结构、拿到流式返回后实时渲染。剩下的全是工程细节。

基础请求结构

我一般先写一个最朴素的客户端，不追求花哨，先验证链路通不通。

const resp = await fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${API_KEY}`
  },
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [
      { role: 'user', content: '你好' }
    ]
  })
});

这段代码能跑出结果，但离生产环境还远。我接下来会加上流式处理和错误边界。

流式响应处理

非流式请求会让用户盯着空白等几秒，体验很差。我用 ReadableStream 逐 token 拼接，边接收边渲染。

const stream = resp.body;
const reader = stream.getReader();
const decoder = new TextDecoder();
let fullText = '';

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  
  const chunk = decoder.decode(value, { stream: true });
  // 解析 SSE 格式...
  fullText += token;
  render(fullText); // 实时更新 UI
}

这里有个坑：SSE 数据是分批到的，JSON 可能被截断。我通常会用 eventsource-parser 这样的库来稳定解析，避免自己写正则踩雷。

上下文管理策略

对话记忆是大模型应用的基石。我倾向于维护一个显式的消息数组，而不是一次次重新发送全部历史。

const conversationHistory = [
  { role: 'system', content: '你是一个有帮助的助手。' },
  { role: 'user', content: '上次的问题...' },
  { role: 'assistant', content: '上次的回答...' }
];

随着对话变长，token 消耗会线性增长。我在工程实践中发现，针对超过 4k token 的长对话，需要做摘要压缩或滑动窗口截断，否则成本会失控。

用户体验优化

代码跑通只是第一步，怎么让应用好用才是关键。

1. 打字机效果：流式返回时，我默认开启逐字渲染，但加了一个最小渲染间隔（比如 50ms），防止刷新过快造成闪烁。
2. Loading 状态：在首 token 到达前显示骨架屏或转圈，告诉用户系统在工作。
3. 错误降级：如果 API 超时或报错，我会把错误信息翻译成人话展示给用户，而不是直接抛出技术异常。

总结与下一步

从 API 调用到完整应用，中间隔着许多工程化细节。我建议先跑通最简单的请求，再逐步叠加流式、上下文管理和 UI 优化。

如果想深入探索，可以研究 RAG（检索增强生成）架构，或者尝试引入向量数据库来扩展大模型的知识边界。