AI SDK 3.0：打造生成式UI的新利器！

目录

1. 简介
2. AI SDK简介
3. 新的AI SDK更新
4. React服务器组件介绍
5. 更新背后的故事
6. AI SDK 3.0的新功能
7. 生成式UI介绍
8. AI状态与UI状态
9. 使用AI SDK构建的实际用例
10. 与UI进行互动的能力
11. 总结

AI SDK 3.0：构建交互式AI应用的新工具 🚀

当谈到构建人工智能应用时，AI SDK是一个重要的工具库。AI SDK由versal开发和维护，是一个非常棒的库，可以帮助您使用TypeScript构建AI应用，并在很多学习管理系统（LLMS）中实现了很好的集成。最近，他们发布了AI SDK的一个重要更新，这个更新非常重要，今天我来为大家介绍一下。

1. 简介

如果您是一个构建AI应用的开发者，并且在过去几个月中一直在使用AI SDK，您一定已经对它很熟悉了。最近，versal宣布了AI SDK 3.0的更新，这是一个非常重要的更新，为我们带来了很多新的概念和功能。

2. AI SDK简介

在进一步了解AI SDK的更新之前，让我们先来了解一下AI SDK的背景。AI SDK是一个功能强大的工具库，可以帮助开发者更轻松地将人工智能集成到他们的应用中。AI SDK使用了React服务器组件（RSC），可以直接从LLMS中流式传输UI组件，而无需使用大量的客户端JavaScript。这使得应用程序更加交互和响应，并且不会影响性能。

3. 新的AI SDK更新

这次AI SDK的更新引入了一个新的范式，称为"生成式UI"。生成式UI是由AI状态和UI状态两个概念组成。AI状态是一个Json数据，通常作为输入传递给LLM，在客户端和服务器端都可以访问。而UI状态是LLM后端返回的文本和组件的集合，只能在客户端上访问，服务器端并不能直接获取。UI状态类似于UST State API，可以是任何客户端数据。使用这种新的方法，您可以将React组件从服务器流式传输到客户端作为LLM输出的一部分，并且还可以从客户端交互地更新LLM的输入。

4. React服务器组件介绍

React服务器组件（RSC）是与React框架和Next.js的重大变化一起推出的组件。当初推出时，由于在服务器上构建组件引入了额外的复杂性，导致了很多混乱，人们对于在服务器上构建组件的权衡利弊并不完全相信。但是，通过AI SDK的这次更新，versal似乎找到了React服务器组件的完美用例。

5. 更新背后的故事

让我们回顾一下React服务器组件的背后故事以及它是如何与Next.js一起推出的。当初的情况非常混乱，人们并不完全相信在服务器上构建组件引入的额外复杂性是否值得。然而，经过这次AI SDK的更新，似乎versal找到了让React服务器组件发挥作用的完美场景。

6. AI SDK 3.0的新功能

终于，让我们来看看这次AI SDK更新的实际功能。这次更新引入了一个名为"生成式UI"的新范式。生成式UI由两个概念组成：AI状态和UI状态。AI状态是一个Json数据，作为输入传递给LLM，客户端和服务器端都可以访问。而UI状态是LLM后端返回的文本和组件的集合，只能在客户端上访问，服务器端并不直接了解它。这与UST State API类似，可以是任何客户端数据。

7. 生成式UI介绍

生成式UI是AI SDK更新的新功能，它利用了AI状态和UI状态的概念。AI状态是一个Json数据，作为输入传递给LLM，客户端和服务器端都可以访问。而UI状态是LLM后端返回的文本和组件的集合，只能在客户端上访问，服务器端并不直接了解它。这种新的方法使得您可以将React组件从服务器流式传输到客户端作为LLM输出的一部分，并且还可以从客户端交互地更新LLM的输入。

8. AI状态与UI状态

AI状态和UI状态是生成式UI的两个重要概念。AI状态是一个Json数据，通常作为输入传递给LLM，在客户端和服务器端都可以访问。而UI状态是LLM后端返回的文本和组件的集合，只能在客户端上访问，服务器端并不能直接获取。这种区分与UST State API类似，可以是任何客户端数据。通过利用这两个状态，您可以实现更加交互性和动态的用户界面。

9. 使用AI SDK构建的实际用例

接下来，让我们来看看使用AI SDK构建的一些实际用例。首先，我们可以想象一个智能代理，它可以为您查找天气信息并返回数据。现在，您不仅可以返回文本输出，而且还可以返回专门为文本输出设计的实际React服务器组件。这意味着根据代理的输出，可以从服务器端流式传输您自己定制的组件。想象一下，当多个代理在多个步骤中进行工作时，每个步骤之后，都可以将输出流式传输到客户端，并保持客户端更新。

10. 与UI进行互动的能力

AI SDK的另一个有趣的用例是与用户界面进行互动的能力。这种互动不是普通意义上的互动，而是可以更新AI状态的互动。在AI SDK的官方演示中，可以看到有一个股票购买代理。当您查看股票时，您会得到一个展示股票价格随时间变化的图表，并且您可以通过高亮要了解更多信息的范围来与该图表进行互动，并向该范围提问。这种交互的方式是通过一个区域突出显示的客户端组件来实现的，该组件会更新AI状态，并在下一次请求后将其与消息一起发送到服务器端。通过查看网络选项卡，您可以看到刚刚发生的AI状态更新以及我们刚刚选择的范围作为AI状态输入的一部分。这使得聊天变得更加交互，并且更像一个应用程序。

11. 总结

AI SDK是构建交互式AI应用的一种强大工具，尤其是在JavaScript环境下。使用AI SDK，您可以轻松地构建具有更高交互性和响应性的应用程序。借助AI SDK 3.0的更新，您可以使用生成式UI范式构建更丰富的界面并与用户进行互动。希望通过这篇文章，您对AI SDK的新功能有了更好的了解。

===

文章长度: 1990 字

文章亮点

• AI SDK是一个非常棒的工具库，可以帮助开发者构建交互式AI应用。
• 新的AI SDK更新引入了生成式UI的概念，通过AI状态和UI状态的配合，实现更好的交互性和性能。
• React服务器组件(RSC)是AI SDK的重要组成部分，可以实现从服务器端流式传输UI组件的功能。
• AI SDK的实际用例包括天气查询、股票购买等，通过交互性的UI组件实现了更好的用户体验。
• AI SDK的更新是基于React服务器组件的背后故事以及人们对在服务器上构建组件的质疑和探索。

FAQ

• Q: AI SDK适用于哪些类型的应用？

  • A: AI SDK适用于各种类型的应用，特别是那些需要交互性和响应性的应用场景，比如智能助手、数据可视化等。

• Q: 如何使用AI SDK构建交互式AI应用？

  • A: 使用AI SDK可以参考官方文档和示例代码，并结合自己的需求进行开发和定制化。

• Q: AI SDK对性能有什么影响？

  • A: AI SDK能够实现更高的性能表现，通过服务器端流式传输UI组件，减轻了客户端的负担，提高了应用程序的响应性和交互性。