如何在Vercel AI SDK的useChat中添加上下文且不向用户暴露

核心思路 #

不要把上下文加到前端可见的聊天消息里，而是通过请求参数传给后端，由后端将上下文插入到发给OpenAI的消息数组中（比如作为系统提示词），这样ChatGPT能获取到上下文，但用户看不到。

前端代码调整 #

移除appendMessage的调用（避免上下文显示在聊天界面），仅在请求时通过data参数传递上下文：

const newChatRequestOptions: ChatRequestOptions = {
  data: {
    context: problemData.startingCode,
  },
};
handleSubmit(e, newChatRequestOptions);

后端API路由处理 #

在你的Chat API路由中（如app/api/chat/route.ts），读取请求中的data.context，并将其作为系统提示词添加到发给OpenAI的消息列表里：

import { OpenAIStream, StreamingTextResponse } from 'ai';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function POST(req: Request) {
  // 解析请求中的消息和自定义数据
  const { messages, data } = await req.json();

  // 构建包含上下文的消息数组
  const augmentedMessages = [
    {
      role: 'system',
      content: `上下文信息：${data.context}\n请基于此上下文处理用户的提问。`,
    },
    ...messages, // 保留原有的用户/助手对话消息
  ];

  // 调用OpenAI API
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages: augmentedMessages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

为什么之前的方法无效 #

1. appendMessage会将消息添加到前端聊天列表中，导致用户可见，不符合需求；
2. 你之前传递的data/body参数需要后端主动读取并处理，若后端未做这一步，ChatGPT自然无法获取到上下文。

内容的提问来源于stack exchange，提问作者Dias Mashikov