文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vercel 推出 AI SDK、AI 应用模板,快速构建 AI 应用!

2024-11-30 12:34

关注

Vercel AI SDK

Vercel AI SDK 是一个开源库,旨在帮助开发者在 JavaScript 和 TypeScript 中构建 AI 流式聊天应用。该 SDK 支持 React/Next.js、Svelte/SvelteKit,即将支持 Nuxt/Vue。

可以在终端中输入以下命令来安装此 SDK:

npm install ai

可以在 Github 查看其源码:https://github.com/vercel-labs/ai

内置 LLM 适配器

选择适合应用的 LLM 对于构建出色的体验至关重要。每个 LLM 都有独特的权衡,并且可以以不同的方式进行调整以满足要求。

Vercel 的 AI SDK 支持互操作性,并为 OpenAI、LangChain 和 Hugging Face Inference 提供一流的支持。这意味着无论首选的 AI 模型提供商是哪个,都可以利用 Vercel AI SDK 创建前沿的流式 UI 体验。

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

// 创建一个 OpenAI API 客户端
const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(config)
 
// 将运行时设置为 edge
export const runtime = 'edge'
 
export async function POST(req: Request) {
  // 从请求正文中提取 messages
  const { messages } = await req.json()
 
  // 根据提示要求 OpenAI 完成流式聊天
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages
  })
  // 将响应转换为友好的文本流
  const stream = OpenAIStream(response)
  // 响应流
  return new StreamingTextResponse(stream)
}

Hooks

Vercel AI SDK 包括用于数据获取和渲染流式文本响应的 React 和 Svelte 钩子。这些钩子使得应用能够实时、动态地渲染数据,为用户提供沉浸式和交互式的体验。

现在,借助 useChat 和 useCompletion,构建丰富的聊天或完成接口只需要几行代码:

'use client'

import { useChat } from 'ai/react'

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    
{messages.map(m => (
{m.role}: {m.content}
))}
) }

回调

Vercel AI SDK 还为在同一请求中将已完成的流式响应存储到数据库中提供了回调。该功能允许进行高效的数据管理,并简化了处理流式文本响应的整个过程。

export async function POST(req: Request) {
  // ...
 
  // 将响应转换为友好的文本流
  const stream = OpenAIStream(response, {
    onStart: async () => {
      // 流开始时调用此回调
      // 可以使用它来将提示保存到数据库中
      await savePromptToDatabase(prompt)
    },
    onToken: async (token: string) => {
      // 为流中的每个标记调用此回调
      // 可以使用它来调试流或将 token 保存到数据库中
      console.log(token)
    },
    onCompletion: async (completion: string) => {
      // 流完成时调用此回调
      // 可以使用它来将最终的完成保存到数据库中
      await saveCompletionToDatabase(completion)
    }
  })
 
  // 响应流
  return new StreamingTextResponse(stream)
}

Edge 和 Serverless

Vercel AI SDK 与 Vercel 产品(如 Serverless 和 Edge 函数)集成。可以部署 AI 应用,实现即时扩展、流式生成响应,并且具有成本效益。

使用框架定义的基础架构,可以使用 AI SDK 在 Next.js 和 SvelteKit 等框架中编写应用代码,然后 Vercel 将此代码转换为全局应用基础架构。

Chat & Prompt Playground

4 月,Vercel 推出了一个交互式的在线 AI Playground:play.vercel.ai,其包含了20个开源和云 LL,可以实时比较各种语言模型的结果,调整参数,并快速生成 Next.js、Svelte 和 Node.js 代码。

现在,在其中添加了一个新的聊天界面,以便可以同时比较并排显示聊天模型。除此之外,还为 Vercel AI SDK 添加了代码生成支持。现在,只需点击几下即可从 Playground 转到聊天应用。

以上是通过 Vercel AI SDK Playground 比较 OpenAI GPT-4、Anthropic Claude 和 Hugging Face 的结果。

AI Chatbot

除了上述产品之外, Vercel 还推出了一个使用 Next.js、Vercel AI SDK、OpenAI 和 Vercel KV 构建的开源 AI 聊天应用模板。

在线体验地址:https://chat.vercel.ai/

AI Chatbot 模板应用具有以下特性:

Github 源码地址:https://github.com/vercel-labs/ai-chatbot

未来

在未来的几周中,Vercel 将添加更多的 SDK 示例,以及完全使用 AI SDK 构建的新模板。此外,随着构建 AI 应用的新最佳实践出现,将根据反馈将它们加入到 SDK 中。

来源:前端充电宝内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯