如何使用Vercel AI SDK手动提交非表单来源的用户提示

方案一：修复流式响应的前端处理逻辑 #

现有后端返回StreamingTextResponse流式数据，前端直接用response.json()无法解析，需修改流处理逻辑，同时优化JSON格式的传递方式：

"use client"
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import toast, { Toaster } from 'react-hot-toast'

export default function Grading() {
  const router = useRouter();
  const rawData = localStorage.getItem('transcript')
  const [responseData, setResponseData] = useState<string>('');
  
  useEffect(() => {
    if (!rawData) {
      router.push('/error/no-data-available')
      return
    }

    const fetchData = async () => {
      try {
        // 解析localStorage中的消息，用JSON.stringify避免字符串拼接错误
        const transcriptMessages = JSON.parse(rawData);
        const response = await fetch('/api/grade', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ messages: transcriptMessages })
        });

        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`);
        }

        // 流式读取响应内容，逐块更新UI
        const reader = response.body?.getReader();
        const decoder = new TextDecoder();
        let result = '';

        while (reader) {
          const { done, value } = await reader.read();
          if (done) break;
          const chunk = decoder.decode(value, { stream: true });
          result += chunk;
          setResponseData(result);
        }

      } catch (error) {
        console.error('处理出错:', error);
        toast.error('处理失败，请重试');
      }
    };

    fetchData();
    
  }, [rawData, router])

  return (
    <>
      <Toaster/>
      <h1>Grading your conversation...</h1>
      
      {responseData ? (
        <div>{responseData}</div>
      ): (
        <div>Loading...</div>
      )}
    </>
  )
}

方案二：使用Vercel AI SDK的useChat钩子手动提交 #

useChat钩子支持手动调用handleSubmit提交自定义消息，无需依赖表单：

"use client"
import React, { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import toast, { Toaster } from 'react-hot-toast'
import { useChat } from 'ai/react';

export default function Grading() {
  const router = useRouter();
  const rawData = localStorage.getItem('transcript');
  const { messages, handleSubmit, isLoading } = useChat({
    api: '/api/grade',
  });

  useEffect(() => {
    if (!rawData) {
      router.push('/error/no-data-available')
      return
    }

    // 解析localStorage中的对话消息
    const transcriptMessages = JSON.parse(rawData);
    // 手动触发提交，传入完整对话消息列表
    handleSubmit('', { messages: transcriptMessages });
  }, [rawData, router, handleSubmit])

  return (
    <>
      <Toaster/>
      <h1>Grading your conversation...</h1>
      
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        messages.map((msg, idx) => (
          <div key={idx} className={`${msg.role === 'assistant' ? 'text-blue-600' : 'text-gray-800'}`}>
            <strong>{msg.role}:</strong> {msg.content}
          </div>
        ))
      )}
    </>
  )
}

关键说明 #

1. 后端api/grade/route.ts无需修改，两种方案都适配现有流式返回逻辑
2. 确保localStorage中的transcript是合法JSON数组，每个元素包含role（user/assistant）和content字段
3. 使用useChat时，需先安装依赖包：npm install ai

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