如何让Nuxt中useChat的body对象随选中Agent响应式更新？

问题核心在于useChat初始化时，直接传入静态body对象只会捕获selectedAgent的初始值，无法自动跟踪其后续变化。要让body随选中Agent动态更新，需将body定义为返回对象的函数，确保每次发起请求时都能获取最新的selectedAgent值。

具体实现步骤 #

1. 定义响应式Agent变量并初始化useChat

<script setup>
import { useChat } from '@ai-sdk/vue';
import { ref } from 'vue';

// 定义响应式选中状态
const selectedAgent = ref('General');

// 初始化useChat，将body改为函数形式
const { messages, input, handleSubmit } = useChat({
  api: '/api/chat',
  // 每次请求时执行该函数，获取最新的agent值
  body: () => ({ agent: selectedAgent.value })
});

// 切换Agent的处理函数
const changeAgent = (newAgent) => {
  selectedAgent.value = newAgent;
};
</script>

2. 页面下拉菜单实现

<template>
  <div>
    <select @change="changeAgent($event.target.value)" :value="selectedAgent">
      <option value="General">General</option>
      <option value="Exercise">Exercise</option>
      <option value="Cardiology">Cardiology</option>
    </select>

    <form @submit.prevent="handleSubmit">
      <input v-model="input" placeholder="输入消息..." />
      <button type="submit">发送</button>
    </form>

    <div v-for="message in messages" :key="message.id">
      <strong>{{ message.role === 'user' ? '你' : 'AI' }}:</strong> {{ message.content }}
    </div>
  </div>
</template>

3. 服务端接收逻辑确认
   在server/api/chat.ts中确保正确解析请求体的agent参数：

export default defineEventHandler(async (event) => {
  const { messages, agent } = await readBody(event);
  
  // 根据agent匹配对应系统提示词
  let systemPrompt = '';
  switch(agent) {
    case 'Exercise':
      systemPrompt = '你是运动健康专家，专注解答运动相关问题';
      break;
    case 'Cardiology':
      systemPrompt = '你是心脏病学专家，专注解答心脏健康相关问题';
      break;
    default:
      systemPrompt = '你是通用AI助手';
  }

  // 后续调用大模型的逻辑...
});

原理说明：当body以函数形式传入时，useChat每次发起请求前都会执行该函数，此时会读取selectedAgent的最新响应式值，从而保证请求体中的agent参数与UI选择同步更新。

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