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

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

近日, Vercel 推出了全新的工具来改善 AI 体验:

  • Vercel AI SDK:轻松地从 AI 模型中获取 API 响应;
  • Chat & Prompt Playground:探索来自 OpenAI、Hugging Face 等的模型;
  • AI Chatbot:使用 Next.js 构建的开源 AI 聊天应用模板。

555.webp.jpg

Vercel AI SDK

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

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

javascript

复制代码

npm install ai

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

内置 LLM 适配器

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

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

javascript

复制代码

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 钩子。这些钩子使得应用能够实时、动态地渲染数据,为用户提供沉浸式和交互式的体验。

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

'use client'
import { useChat } from 'ai/react'
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  )
}

回调

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)
}

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 转到聊天应用。

4.webp.jpg

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

AI Chatbot

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

5.webp.jpg

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

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

  • Next.js App Router
  • React 服务端组件 (RSCs)、Suspense 和服务端操作
  • 支持使用 Vercel AI SDK 来进行流式聊天 UI
  • 支持使用 OpenAI(默认)、Anthropic、HuggingFace 或自定义 AI 聊天模型和/或 LangChain Edge 运行时准备就绪
  • shadcn/ui
  • 使用 Tailwind CSS 进行样式设置
  • 使用 Phosphor Icons 图标
  • 使用 Vercel KV 进行聊天历史记录、速率限制和会话存储
  • 使用 Next Auth 进行身份验证

6.webp.jpg

Github 源码地址github.com/vercel-labs…

未来

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

相关文章
|
6天前
|
存储 人工智能 NoSQL
Airweave:快速集成应用数据打造AI知识库的开源平台,支持多源整合和自动同步数据
Airweave 是一个开源工具,能够将应用程序的数据同步到图数据库和向量数据库中,实现智能代理检索。它支持无代码集成、多租户支持和自动同步等功能。
66 14
|
7天前
|
人工智能 Linux iOS开发
exo:22.1K Star!一个能让任何人利用日常设备构建AI集群的强大工具,组成一个虚拟GPU在多台设备上并行运行模型
exo 是一款由 exo labs 维护的开源项目,能够让你利用家中的日常设备(如 iPhone、iPad、Android、Mac 和 Linux)构建强大的 AI 集群,支持多种大模型和分布式推理。
236 100
|
7天前
|
人工智能 开发框架 数据可视化
Eino:字节跳动开源基于Golang的AI应用开发框架,组件化设计助力构建AI应用
Eino 是字节跳动开源的大模型应用开发框架,帮助开发者高效构建基于大模型的 AI 应用。支持组件化设计、流式处理和可视化开发工具。
133 27
|
8天前
|
人工智能 自然语言处理 搜索推荐
现在最火的AI是怎么应用到体育行业的
AI在体育行业的应用日益广泛,涵盖数据分析、伤病预防、观众体验、裁判辅助等多个领域。通过传感器和可穿戴设备,AI分析运动员表现,提供个性化训练建议;预测伤病风险,制定康复方案;优化比赛预测和博彩指数;提升观众的个性化内容推荐和沉浸式观赛体验;辅助裁判判罚,提高准确性;发掘青训人才,优化训练计划;智能管理场馆运营和票务;自动生成媒体内容,提供实时翻译;支持电竞分析和虚拟体育赛事;并为运动员提供个性化营养和健康管理方案。未来,随着技术进步,AI的应用将更加深入和多样化。
|
8天前
|
人工智能 关系型数据库 分布式数据库
PolarDB 开源基础教程系列 7.4 应用实践之 AI大模型外脑
PolarDB向量数据库插件通过实现通义大模型AI的外脑,解决了通用大模型无法触达私有知识库和产生幻觉的问题。该插件允许用户将新发现的知识和未训练的私有知识分段并转换为向量,存储在向量数据库中,并创建索引以加速相似搜索。当用户提问时,系统将问题向量化并与数据库中的向量进行匹配,找到最相似的内容发送给大模型,从而提高回答的准确性和相关性。此外,PolarDB支持多种编程语言接口,如Python,使数据库具备内置AI能力,极大提升了数据处理和分析的效率。
32 4
|
9天前
|
人工智能 资源调度 API
AnythingLLM:34K Star!一键上传文件轻松打造个人知识库,构建只属于你的AI助手,附详细部署教程
AnythingLLM 是一个全栈应用程序,能够将文档、资源转换为上下文,支持多种大语言模型和向量数据库,提供智能聊天功能。
2397 14
|
10天前
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
605 8
|
10天前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
847 14
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
138 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【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
118 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
  • 4
    手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
  • 5
    AnythingLLM:34K Star!一键上传文件轻松打造个人知识库,构建只属于你的AI助手,附详细部署教程
  • 6
    AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
  • 7
    Spring AI,搭建个人AI助手
  • 8
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 9
    百聆:集成Deepseek API及语音技术的开源AI语音对话助手,实时交互延迟低至800ms
  • 10
    Cursor 为低代码加速,AI 生成应用新体验!