像GPT-3.5+这样的语言模型引入了函数调用，为定制的交互式用户界面铺平了道路，这些界面由语言模型决定渲染。
通过 React 服务器组件和服务器操作，AI SDK 通过 ai/rsc 包无缝集成界面渲染功能。您可以使用不支持函数调用的模型，通过模拟结构化输出（如 JSON）或直接流式传输它们的输出来使用 ai/rsc。
通过直接在搜索体验中呈现组件，让用户看到更多胜过言辞。
让用户更容易理解代理执行，以便他们能够了解幕后的魔法。
AI SDK引入了两个新概念：AIState和UIState。这些状态在服务器端AI操作和应用程序中客户端UI的渲染之间引入了明确的关注点分离。这种分离允许开发人员安全地维护AI状态，其中可能包括系统提示或其他元数据。与此同时，UI状态旨在允许React服务器组件有效地流式传输到客户端。
AIState 是 LLM 需要读取的所有上下文的 JSON 表示。对于聊天应用，AIState 通常存储用户和助手之间的文本对话历史。在实践中，它还可以用于存储其他值和元信息，如每条消息的 createdAt。AIState 默认情况下可以在服务器和客户端上访问/修改。
UIState 是应用程序用来显示用户界面的状态。它是完全客户端状态（与 useState 非常相似），可以保存由LLM返回的数据和UI元素。这种状态可以是任何内容，但无法在服务器上访问。
从生成的UI请求服务器更新
在许多情况下，您渲染的界面将需要从服务器请求更新。例如，天气应用可能需要每5分钟请求最新的天气数据，或者按钮按下应该执行搜索。为了实现这一点，您可以将服务器操作传递给您的UI组件，并根据需要调用它们。
例如，如果您在createAI中注册了一个handleUserMessage操作，您可以像这样定义嵌套的服务器操作：
然后您的 WeatherCard 组件可以在 onClick 事件处理程序中调用 refreshAction 函数，或者在效果或类似轮询的情况下加载最新的天气数据并更新客户端 UI。
AI 状态表示提供给语言模型的对话上下文，通常是一系列聊天消息的数组。有时，例如用户正在填写表单或与滑块等 UI 元素交互时，您需要使用新信息更新语言模型的上下文。您可以在客户端使用 useAIState 钩子来改变 AI 状态。
在下面的示例中，我们有一个滑块，允许用户购买股票的数量。当用户更改滑块时，我们会使用新信息更新AI状态。
AI SDK提供的一个强大功能是能够在其他UI组件内部流式传输UI组件。这使您能够创建由较小、可重用组件构建而成的复杂UI。在下面的示例中，我们将一个historyChart流传递为StockCard组件的属性。StockCard可以渲染historyChart流，并且随着服务器响应新数据，它将自动更新。
最后更新于2024年3月2日