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


相关文章
|
5天前
|
机器学习/深度学习 人工智能 搜索推荐
AI与娱乐产业:电影制作的新工具
随着科技的发展,人工智能(AI)逐渐渗透到电影制作中,带来了前所未有的创新。本文探讨了AI在剧本创作、场景构建、特效制作、动作捕捉、音频处理、剪辑及市场调研等领域的应用,以及其对提升效率、激发创意和拓宽视野的影响,展望了AI在未来电影产业中的重要作用。
|
1月前
|
人工智能 IDE Java
AI 代码工具大揭秘:提高编程效率的必备神器!
【10月更文挑战第1天】近年来,人工智能得到了迅猛的发展,并在各行各业都得到了广泛应用。尤其是近两年来,AI开发工具逐渐成为开发者们的新宠,其中 GitHub Copilot 更是引发了无限可能性的探索。
91 9
AI 代码工具大揭秘:提高编程效率的必备神器!
|
29天前
|
人工智能 搜索推荐 程序员
AI 搜索引擎工具集合
AI 搜索引擎工具集合
AI 搜索引擎工具集合
|
1月前
|
人工智能 JavaScript 数据可视化
Cursor 、v0 和 Bolt.new:当今 AI 编程工具的全面解析与对比
本文对 Cursor AI、v0 和 Bolt.new 三大 AI 编程工具进行了全面比较,分析其各自优势与局限性,帮助开发者在不同工作流中灵活应用。
206 8
Cursor 、v0 和 Bolt.new:当今 AI 编程工具的全面解析与对比
|
1月前
|
人工智能 自然语言处理 算法
几款宝藏级AI阅读工具推荐!论文分析、文档总结必备神器!
【10月更文挑战第8天】几款宝藏级AI阅读工具推荐!论文分析、文档总结必备神器!
62 1
几款宝藏级AI阅读工具推荐!论文分析、文档总结必备神器!
|
17天前
|
机器学习/深度学习 人工智能 自然语言处理
NotebookLM与NotebookLlama 了解下 | AI工具
在AI技术飞速发展的今天,Google和Meta分别推出了基于大型语言模型的笔记本应用——NotebookLM和NotebookLlama。这两款产品不仅提供了强大的文档处理和编码支持,还在文档和编码领域引领了创新。NotebookLM强调个性化和隐私保护,而NotebookLlama则以开源和高度定制性著称。本文将深入解析这两款产品并进行对比分析。【10月更文挑战第16天】
91 2
|
1月前
|
存储 人工智能 数据库
|
1月前
|
人工智能 JavaScript 数据可视化
Cursor、v0 和 Bolt.new:当今 AI 编程工具的全面解析与对比
本文深入解析了 Cursor AI、v0 和 Bolt.new 三大 AI 编程工具的特点与应用场景。Cursor 适合日常编码与团队协作,v0 专注于 UI 原型设计,Bolt.new 擅长全栈原型开发。各工具在功能上互为补充,开发者可根据需求灵活选择,以提升工作效率。
610 1
|
27天前
|
人工智能 自然语言处理 自动驾驶
【通义】AI视界|微软和 OpenAI 将向媒体提供1000万美元资助,推动其使用AI工具
本文概览了近期科技领域的五大热点事件,包括微软与OpenAI联手资助媒体使用AI工具、OpenAI任命前白宫官员为首任首席经济学家、特斯拉FSD系统遭调查、英伟达市值逼近全球第一、以及AMD新一代锐龙9000X3D系列处理器即将上市的消息。更多资讯,请访问通义官网。
|
29天前
|
机器学习/深度学习 人工智能 数据可视化
21款改变世界的AI工具:释放无限创意!
本文收集了21款令人惊叹的人工智能工具,每一款工具都为用户带来了创新与便捷。从数据分析、文档编写、语音克隆到图像升频,这些工具涵盖了多领域的应用。无论是自动化工作流的 n8n,还是开源替代 Notion 的 AppFlowy,这些工具都旨在通过 AI 提高生产力、简化流程,甚至激发更多创意。本文详细介绍了每个工具的用途、功能特点以及使用场景,是你探索 AI 世界的必备指南。
47 0

热门文章

最新文章