下一代 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 都可以创建流畅且响应迅速的用户体验。


相关文章
|
4天前
|
人工智能 自然语言处理 程序员
开测: AI智能编码辅助工具通义灵码V2.0 来了
通义灵码2.0是阿里云推出的AI编程助手,基于DeepSeek大模型进行快速迭代,显著提升了代码生成、多任务协作和模型性能。
130 12
开测: AI智能编码辅助工具通义灵码V2.0 来了
|
4天前
|
机器学习/深度学习 人工智能 自然语言处理
AI剧本生成与动画创作:能否成为短视频创作的革命性工具?
《AI剧本生成与动画创作》解决方案结合自然语言处理与深度学习技术,能自动生成剧本并转化为动画,极大提升创作效率,降低门槛。部署过程需约3小时,适合非专业用户快速响应热点内容。尽管在创意和细节上仍存不足,但已为短视频创作者提供高效路径,值得尝试。未来,随着技术进步,AI创作工具将带来更多惊喜。
32 10
AI剧本生成与动画创作:能否成为短视频创作的革命性工具?
|
5天前
|
前端开发 JavaScript 开发工具
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
43 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
8天前
|
JavaScript 编译器 开发工具
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
28 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
1天前
|
人工智能 自然语言处理 IDE
Trae 接入 Claude 3.7:AI 编程工具界的“卷王”,完全免费使用!
Trae 是一款完全免费的AI编程工具,现已接入 Claude 3.7 模型,提供代码生成、调试等强大功能,支持多模态输入和上下文理解,用户可享受24小时高速服务,无需担心付费限制。Trae 支持多平台,安装简便,适合开发者快速上手。
60 0
Trae 接入 Claude 3.7:AI 编程工具界的“卷王”,完全免费使用!
|
2天前
|
存储 人工智能 API
SPO:如何优化提示词?大模型最懂如何优化自己!开源自监督提示词优化工具,让AI自主优化提示词
本文介绍由DeepWisdom与香港科技大学联合研发的SPO框架,通过自我监督机制实现大语言模型提示优化,仅需3个样本即可达到SOTA效果,优化成本降低至传统方法的1.1%-5.6%。
42 0
SPO:如何优化提示词?大模型最懂如何优化自己!开源自监督提示词优化工具,让AI自主优化提示词
|
4天前
|
人工智能 安全 API
这款流行 AI 工具被盗用挖取加密货币,这些隐患你需要知道
Docker 镜像被注入挖矿脚本并不是个别现象,而是一个需要引起重视的安全问题,本文向大家分享下 Higress 防范此类风险的相关经验。
|
11天前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
101 0
|
1天前
|
人工智能 弹性计算 开发工具
新发布!阿里云发布最新AI模型、工具及基础设施,建构高效全球AI社群
新发布!阿里云发布最新AI模型、工具及基础设施,建构高效全球AI社群
|
2天前
|
人工智能 安全 API
这款流行 AI 工具被盗用挖取加密货币,这些隐患你需要知道
这款流行 AI 工具被盗用挖取加密货币,这些隐患你需要知道

热门文章

最新文章

  • 1
    【Azure Storage Account】利用App Service作为反向代理, 并使用.NET Storage Account SDK实现上传/下载操作
    12
  • 2
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    43
  • 3
    CompreFace:Star6.1k,Github上火爆的轻量化且强大的人脸识别库,api,sdk都支持
    31
  • 4
    【Azure Developer】编写Python SDK代码实现从China Azure中VM Disk中创建磁盘快照Snapshot
    21
  • 5
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    28
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    163
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    164
  • 8
    【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
    76
  • 9
    AutoTalk第十三期-应知必会的自动化工具-阿里云SDK支持策略(一)
    58
  • 10
    自动化AutoTalk第十期:应知必会的自动化工具-阿里云SDK
    56