Vercel AI SDK 实战：使用 React Server Components 实现助手响应流式传输-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00903/article/details/148378291

Vercel AI SDK 实战：使用 React Server Components 实现助手响应流式传输

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai

前言

在现代 Web 应用中，AI 助手的交互体验至关重要。Vercel AI SDK 提供了一套完整的解决方案，使开发者能够轻松实现 AI 助手的流式响应功能。本文将深入探讨如何利用 React Server Components (RSC) 和 Vercel AI SDK 构建一个高效的 AI 助手交互界面。

核心概念解析

1. 流式传输 (Streaming)

流式传输是一种数据发送技术，允许服务器在生成数据的同时逐步发送给客户端，而不是等待所有数据准备就绪后再一次性发送。对于 AI 助手场景，这意味着用户可以实时看到助手的思考过程，而不是等待完整的响应。

2. React Server Components (RSC)

RSC 是 React 18 引入的新特性，允许组件在服务器端渲染并直接发送到客户端。结合 Vercel AI SDK，我们可以创建高效的 AI 交互流程，减少客户端负担。

实现步骤详解

1. 客户端组件实现

客户端组件负责用户交互界面，包括消息输入和显示区域。以下是关键实现点：

'use client';

import { useState } from 'react';
import { ClientMessage } from './actions';
import { useActions } from 'ai/rsc';

export default function Home() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState<ClientMessage[]>([]);
  const { submitMessage } = useActions();

  const handleSubmission = async () => {
    // 添加用户消息到本地状态
    setMessages(currentMessages => [
      ...currentMessages,
      {
        id: '123',
        status: 'user.message.created',
        text: input,
        gui: null,
      },
    ]);

    // 提交消息到服务器并获取响应
    const response = await submitMessage(input);
    setMessages(currentMessages => [...currentMessages, response]);
    setInput('');
  };

  // 渲染UI...
}

关键点说明：

useActions 钩子提供了与服务器动作的交互接口
消息状态管理采用不可变更新模式
输入处理包括键盘和点击事件

2. 消息组件实现

消息组件专门处理流式文本的显示：

'use client';

import { StreamableValue, useStreamableValue } from 'ai/rsc';

export function Message({ textStream }: { textStream: StreamableValue }) {
  const [text] = useStreamableValue(textStream);

  return <div>{text}</div>;
}

技术要点：

useStreamableValue 钩子用于消费流式数据
组件会自动更新显示内容，无需手动管理状态

3. 服务器动作实现

服务器端处理 AI 交互的核心逻辑：

'use server';

import { generateId } from 'ai';
import { createStreamableUI, createStreamableValue } from 'ai/rsc';
import { OpenAI } from 'openai';
import { ReactNode } from 'react';
import { Message } from './message';

export async function submitMessage(question: string): Promise<ClientMessage> {
  // 创建状态和文本流
  const statusUIStream = createStreamableUI('thread.init');
  const textStream = createStreamableValue('');
  const textUIStream = createStreamableUI(
    <Message textStream={textStream.value} />
  );

  // 处理AI交互逻辑...
  
  return {
    id: generateId(),
    status: statusUIStream.value,
    text: textUIStream.value,
  };
}

核心流程：

创建多个流式UI和数据流
管理对话线程和运行队列
处理AI助手的各种事件状态
实时更新流式内容

4. AI 上下文配置

全局AI上下文配置：

import { createAI } from 'ai/rsc';
import { submitMessage } from './actions';

export const AI = createAI({
  actions: {
    submitMessage,
  },
  initialAIState: [],
  initialUIState: [],
});

作用：