无法使用 Vercel 的 AI-SDK 正确传输 UI 组件

Question

我一直在努力学习新的Vercel的AI-SDK。

我正在尝试创建一个角色生成器，它将某些准则作为输入，然后在给定的 Zod 模式中生成角色属性。

这是我在 actions.tsx 文件中使用的函数

export async function personaSchemaGeneration(context: string) {
    'use server';
  
    const stream = createStreamableValue();
  
    (async () => {
      const { partialObjectStream } = await streamObject({
        model: openai('gpt-3.5-turbo'),
        system: 'You generate a persona basis the brand context.',
        prompt: 'Generate a persona for the brand in line with the following context: ' + context,
        schema: personaSchema,
      });
  
      for await (const partialObject of partialObjectStream) {
        stream.update(partialObject);
      }
  
      stream.done();
    })();
  
    return { object: stream.value };
  }

这会返回正确格式的文本流，我可以在此处的 onClick 函数中将其显示在屏幕上。

const { object } = await personaSchemaGeneration(brandContext);
          
          for await (const partialObject of readStreamableValue(object)) {
            console.log("Partial Obj",partialObject, "    ", object)
            if (partialObject) {
              setGeneration(
                JSON.stringify(partialObject, null, 2),
              );
            }
          }
          console.log("Final Obj",object)

我想理想地使用streamUI返回UI，这就是我试图用这个函数做的（没有成功）。

export async function personaSchemaGenerationUI(context: string) {
    'use server';

    const result = await streamUI({
        model: openai('gpt-3.5-turbo'),
        system: 'You generate a persona basis the brand context.',
        prompt: 'Generate a persona for the brand in line with the following context: ' + context,
        schema: personaSchema,
        text:({ content }) => <Persona3 {...content} />
        ,
        },
      );
    
      return result.value;
  }

我正在努力处理一些事情

1. 当我尝试读取文本流完成后返回的对象时，我得到了这个。而我的理解是函数 personaSchemaGeneration() 应该返回我定义的 personaSchema 类型。我究竟做错了什么？

2. 浏览了这里的一些示例https://sdk.vercel.ai/docs/ai-sdk-rsc/streaming-react-components我认为我们可以返回 UI 组件并有一个中间加载组件通过产量表现出来。但是，在我的函数 personaSchemaGenerationUI() 中，我不想使用任何工具，而只想将 personaSchema 格式的 LLM 的输出传递到可以向用户显示的 React 组件。我无法理解为什么内容没有正确传递到角色文件或返回给用户

3. 这是一个更普遍的问题。 a) 我们是否只允许返回一个组件作为 StreamUI 函数的一部分？如果我想流式传输多个组件（例如 10 个不同的角色），我必须创建 10 个不同的异步函数调用并独立加载每个组件，还是有更智能的方法来做到这一点？ b) 我们是否只允许调用 1 个工具作为 StreamUI 函数的一部分？我尝试添加另一个工具定义，但即使我更改工具的描述，它似乎总是默认为第一个工具定义。

预先感谢您的帮助！现在已经被这个问题困扰了一段时间，不确定我做错了什么或者我的知识差距在哪里......

Answer 1

由于您想根据用户输入生成角色，我认为

streamUI

更适合。

对于你的第二个问题：

你打电话给

streamUI

时所做的事情是正确的，但我认为你错过了一点。

streamUI

方法不会渲染任何内容，必须与 UiState 和 AiState 一起使用。

您的消息必须从

UiState

呈现（可通过

useUIState

钩子在客户端访问），并且每次用户输入内容时，或者当您实现

streamUi

承诺时，都应更新状态：

const [conversation, setConversation] = useUIState();
const message = await continueConversation(input);

setConversation((currentConversation: ClientMessage[]) => [
   ...currentConversation,
   message,
]);

您可以在此处

找到其工作原理的示例

第三个问题：

a) 为了实现这一目标，我会使用一个专用于角色创建的工具（例如，使用包含 10 个角色作为属性的 zod 模式），然后我将返回

streamUi

中的每个角色响应作为单个反应组件。 （可能有一种更优雅的方法来实现这一点，但我认为它应该效果很好。）

b）有一个名为 并行工具调用 的功能，但我认为它不能与

streamUi

一起使用。

Ps：请随时告诉我，如果您希望我使用

streamUi

添加一个显示您的角色项目的工作示例的沙箱。