下一代 AI 开发工具Vercel AI SDK 快速入门

简介: 下一代 AI 开发工具Vercel AI SDK 快速入门

最近AI的流行带来了很多相等震撼的开源项目和开发框架,本文分享人工智能驱动的Web开发世界的一个令人兴奋的开发工具 Vercel AI SDK,这是一个在科技界引起轰动的开源库。这个强大的工具集允许开发人员轻松构建边缘就绪的人工智能流文本和聊天Web应用程序。

Vercel AI SDK 是一个工具集合,旨在帮助构建基于AI的Web用户界面。为了更好的了解它可以做什么,本文通过一个快速入门教程,通过构建一个简单的人工智能标语生成器。

一个可互操作、支持流媒体、边缘就绪的软件开发套件,适用于使用 React 和 Svelte 构建的 AI 应用程序。

GitHubgithub.com/vercel-labs…

首先,需要设置项目开发环境,需要安装 Node.js 18+OpenAI API 密钥。通过创建一个新的 Next.js 应用程序来开始。SDK提供了一些入门代码,可帮助快速启动并运行。

项目地址github.com/QuintionTan…

使用以下命令创建新项目:


npx create-next-app vercel-ai-app

此命令启动项目创建项目并指导引导回答一些项目配置的问题:

image.png

之后,将下载并安装项目模板和依赖项。

image.png

安装项目完成后,接下来进入新创建的项目文件夹:


cd vercel-ai-app

接下来,将安装必要的依赖项 aiopenai-edge。后者与 Vercel Edge Functions 兼容,因此比官方 OpenAI SDK 更受欢迎,使用以下命令添加这些依赖项:


npm install ai openai-edge --save

然后,将在项目根目录的 .env.local 文件用来配置 OpenAI API 密钥。


OPENAI_API_KEY=YOUR OPEN AI API KEY

安装样式相关的依赖:


npm install autoprefixer postcss tailwindcss --save

根目录下创建文件 postcss.config.js,代码如下:


module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

下一步是创建 API 路由,路由处理程序将使用 Edge Runtime 通过 OpenAI 生成文本完成,然后将其流回 Next.js。 SDK 提供了一个简洁的示例来说明路由处理程序应该是什么样子:


import { Configuration, OpenAIApi } from "openai-edge";
import { OpenAIStream, StreamingTextResponse } from "ai";
const config = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
export const runtime = "edge";
export async function POST(req) {
    const { prompt } = await req.json();
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        stream: true,
        temperature: 0.6,
        prompt: `Create three slogans for a business with unique features.
    Business: Bookstore with cats
    Slogans: "Purr-fect Pages", "Books and Whiskers", "Novels and Nuzzles"
    Business: Gym with rock climbing
    Slogans: "Peak Performance", "Reach New Heights", "Climb Your Way Fit"
    Business: ${prompt}
    Slogans:`,
    });
    const stream = OpenAIStream(response);
    return new StreamingTextResponse(stream);
}

将上述代码复制到新建文件中 app/api/completion/route.js。接下来分解一下这段代码,首先是导入必要的模块:


import { Configuration, OpenAIApi } from "openai-edge";
import { OpenAIStream, StreamingTextResponse } from "ai";

ConfigurationOpenAIApi 是从 openai-edge 包中导入的。Configuration 用于设置 OpenAI API 客户端的配置,而 OpenAIApi 就是客户端本身。OpenAIStreamStreamingTextResponse 是从 ai 包导入的。OpenAIStream 用于将 OpenAI API 的响应转换为流,StreamingTextResponse 用于将流作为响应返回。

下来,设置 OpenAI API 客户端:


const config = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);

上面代码创建一个新的 Configuration 实例,传入一个包含 OpenAI API 密钥的对象,该密钥存储在环境变量中。然后创建一个新的 OpenAIApi 实例,传入刚刚创建的配置。

将运行时设置为 edge 以获得最佳性能:


export const runtime = "edge";

接下来,定义一个异步函数 POST,它将 Request 对象作为参数:


export async function POST(req) {
    const { prompt } = await req.json();

这个函数实现处理 POST 请求,从请求的 JSON 正文中提取 prompt。然后,根据提示要求 OpenAI 进行流式完成:


const response = await openai.createCompletion({
    model: "text-davinci-003",
    stream: true,
    temperature: 0.6,
    prompt: `Create three slogans for a business with unique features.
Business: Bookstore with cats
Slogans: "Purr-fect Pages", "Books and Whiskers", "Novels and Nuzzles"
Business: Gym with rock climbing
Slogans: "Peak Performance", "Reach New Heights", "Climb Your Way Fit"
Business: ${prompt}
Slogans:`,
});

在 openai 客户端调用 createCompletion 方法,传入一个指定要使用的模型的对象 text-davinci-003,需要一个流响应 stream: true,AI的 temperature 设置(控制输出的随机性),以及AI应该响应的 prompt

接下来,将响应转换为文本流:


const stream = OpenAIStream(response);

通过调用 OpenAIStream,传入 createCompletion 调用的响应,将响应转换为流。最后,返回流作为响应返回给前端:


return new StreamingTextResponse(stream);
}

创建一个新的 StreamingTextResponse,传入流并返回它,并发送回客户端的响应。

小结一下,上面代码设置了一个 OpenAI API 客户端,定义了一个处理 POST 请求的函数,在给定提示的情况下要求 OpenAI 进行流式完成,将响应转换为流,并将流作为响应返回。

最后,将创建一个带有表单的客户端组件,用于收集用户的提示并流回完成结果。SDK 提供了 useCompletion 挂钩来处理用户输入和表单提交。该钩子提供了多个实用函数和状态变量,包括 completioninputhandleInputChangehandleSubmit。将 app/page.js 中的默认代码替换为以下代码:


"use client";
import { useCompletion } from "ai/react";
export default function SloganGenerator() {
    const { completion, input, handleInputChange, handleSubmit } =
        useCompletion();
    return (
        <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
            <form onSubmit={handleSubmit}>
                <input
                    className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
                    value={input}
                    placeholder="Describe your business..."
                    onChange={handleInputChange}
                />
            </form>
            <div className="whitespace-pre-wrap my-6">{completion}</div>
        </div>
    );
}

同样来分解一下这个 React 组件:

首先,从 ai/react 包中导入需要的钩子:


import { useCompletion } from "ai/react";

useCompletionai/react 包提供的自定义 React 钩子。旨在处理用户输入和表单提交,以实现人工智能驱动的完成。

接下来定义一个功能组件 SloganGenerator


export default function SloganGenerator() {

这是在 React 中定义功能组件的标准方式。在这个组件中,将调用 useCompletion 钩子:


const { completion, input, handleInputChange, handleSubmit } =
        useCompletion();

useCompletion 挂钩返回一个包含多个属性的对象:completioninputhandleInputChangehandleSubmitcompletion 是当前的完成结果,表示生成文本的字符串值。input 是用户输入字段的当前值。 handleInputChangehandleSubmit 是处理用户交互的函数,例如分别在输入字段中键入内容和提交表单。

接下来,主要是返回组件的 JSX。

到此可以启动应用程序并通过输入业务描述来进行测试,以实时查看人工智能生成的口号。

使用以下命令启动 Web 应用程序:


npm run dev

已经使用 Vercel AI SDK 构建了一个流式标语生成器。

image.png

流媒体的力量

Vercel AI SDK 的主要功能之一是支持流接口。ChatGPT 等流式会话文本 UI 在过去几个月中获得了广泛的流行,主要是因为它们可以提供更好的用户体验,尤其是在聊天机器人等会话应用程序中。

大型语言模型 (LLM) 非常强大,但在生成长输出时,它们可能会很慢。如果尝试构建传统的阻塞式 UI,用户可能会发现自己花了大量时间盯着加载的 Loading。流式 UI 可以通过在部分响应可用时显示它们来帮助缓解此问题。

SDK 提供了阻塞式和流式 UI 的示例。流式 UI 开始显示响应的速度比阻塞式 UI 快得多,阻塞式 UI 必须等待生成整个响应才能显示任何内容。

缓存响应

根据正在构建的应用程序的类型,可能希望缓存从AI提供商收到的响应,至少是暂时的。Vercel AI SDK 提供了特殊的生命周期回调函数,可以用于此目的。onCompletion 回调特别有用,因为它会在流关闭时被调用,而这里就是可以缓存完整响应的地方。

SDK 提供了如何使用 Vercel KVNext.js 将 OpenAI 响应缓存 1 小时 的示例,这对于频繁发出相同或相似请求的应用程序特别有用。

项目地址github.com/QuintionTan…

总结

Vercel AI SDK 是用于构建人工智能驱动的用户界面的强大工具。它对流接口和响应缓存的支持,以及与 Next.js 等流行框架的兼容性,使其成为开发人员的多功能且高效的工具。无论是构建聊天机器人、标语生成器还是任何其他人工智能驱动的应用程序,Vercel AI SDK 都可以创建流畅且响应迅速的用户体验。


目录
打赏
0
0
0
0
20
分享
相关文章
6 款 AI 工具,助力写出更优质代码
6 款 AI 工具,助力写出更优质代码
101 3
6 款 AI 工具,助力写出更优质代码
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
132 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
exo:22.1K Star!一个能让任何人利用日常设备构建AI集群的强大工具,组成一个虚拟GPU在多台设备上并行运行模型
exo 是一款由 exo labs 维护的开源项目,能够让你利用家中的日常设备(如 iPhone、iPad、Android、Mac 和 Linux)构建强大的 AI 集群,支持多种大模型和分布式推理。
173 100
OpenDeepResearcher:开源 AI 研究工具,自动完成搜索、评估、提取和生成报告
OpenDeepResearcher 是一款开源 AI 研究工具,支持异步处理、去重功能和 LLM 驱动的决策,帮助用户高效完成复杂的信息查询和分析任务。
125 18
OpenDeepResearcher:开源 AI 研究工具,自动完成搜索、评估、提取和生成报告
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
87 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
66 23
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
FilmAgent:多智能体共同协作制作电影,哈工大联合清华推出 AI 驱动的自动化电影制作工具
FilmAgent 是由哈工大与清华联合推出的AI电影自动化制作工具,通过多智能体协作实现从剧本生成到虚拟拍摄的全流程自动化。
183 10
FilmAgent:多智能体共同协作制作电影,哈工大联合清华推出 AI 驱动的自动化电影制作工具
PPTAgent:中科院开源AI工具,自动将文档转化为高质量PPT
PPTAgent 是中科院推出的自动生成演示文稿框架,基于两阶段编辑方法,支持智能分析、大纲生成、幻灯片生成与评估,适用于教育、企业培训等多种场景。
374 18
PPTAgent:中科院开源AI工具,自动将文档转化为高质量PPT
Repomix:8.1K Star!轻松将整个代码库打包为AI友好格式的开源工具,使代码库更易于AI理解
Repomix 是一款强大的工具,能够将整个代码库打包成AI友好的单个文件,支持多种输出格式和安全检查。
52 9
Zerox:AI驱动的万能OCR工具,精准识别复杂布局并输出Markdown格式,支持PDF、DOCX、图片等多种文件格式
Zerox 是一款开源的本地化高精度OCR工具,基于GPT-4o-mini模型,支持PDF、DOCX、图片等多种格式文件,能够零样本识别复杂布局文档,输出Markdown格式结果。
92 4
Zerox:AI驱动的万能OCR工具,精准识别复杂布局并输出Markdown格式,支持PDF、DOCX、图片等多种文件格式

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等