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 中。

目录
打赏
0
相关文章
企业内训|AI大模型在汽车行业的前沿应用研修-某汽车集团
本课程是TsingtaoAI为某汽车集团高级项目经理设计研发,课程全面系统地解析AI的发展历程、技术基础及其在汽车行业的深度应用。通过深入浅出的理论讲解、丰富的行业案例分析以及实战项目训练,学员将全面掌握机器学习、深度学习、NLP与CV等核心技术,了解自动驾驶、智能制造、车联网与智能营销等关键应用场景,洞悉AI技术对企业战略布局的深远影响。
128 97
AI赋能大学计划·大模型技术与应用实战学生训练营——湖南大学站圆满结营
12月14日,由中国软件行业校园招聘与实习公共服务平台携手魔搭社区共同举办的AI赋能大学计划·大模型技术与产业趋势高校行AIGC项目实战营·湖南大学站圆满结营。
AI赋能大学计划·大模型技术与应用实战学生训练营——湖南大学站圆满结营
CogAgent-9B:智谱 AI 开源 GLM-PC 的基座模型,专注于预测和执行 GUI 操作,可应用于自动化交互任务
CogAgent-9B 是智谱AI基于 GLM-4V-9B 训练的专用Agent任务模型,支持高分辨率图像处理和双语交互,能够预测并执行GUI操作,广泛应用于自动化任务。
27 12
CogAgent-9B:智谱 AI 开源 GLM-PC 的基座模型,专注于预测和执行 GUI 操作,可应用于自动化交互任务
AI在用户行为分析中的应用:实现精准洞察与决策优化
AI在用户行为分析中的应用:实现精准洞察与决策优化
39 15
云上AI Infra解锁大模型创新应用
本节课程由阿里云智能集团资深技术专家王超分享,主题为AI基础设施的发展趋势。课程聚焦于AI Infra设计与Scaling Law,探讨了下一代AI基础设施的设计目标、功能升级及推理场景中的应用。主要内容包括高效支持大规模模型训练和推理、全球调度系统的设计、Rack level的Scale优化以及多租户容器化使用方式。通过这些改进,旨在提升并行效率、资源利用率及稳定性,推动AI基础设施迈向更高性能和更优调度的新阶段。
云工开物:阿里云弹性计算走进高校第2期,与北京大学研一学生共探AI时代下的应用创新
阿里云高校合作、弹性计算团队​于北京大学,开展了第2届​【弹性计算进校园】​交流活动。
【AI应用启航workshop】构建高可用数据库、拥抱AI智能问数
12月25日(周三)14:00-16:30参与线上闭门会,阿里云诚邀您一同开启AI应用实践之旅!
开源AI视频监控系统在监狱安全中的应用——实时情绪与行为分析、暴力预警技术详解
针对监狱环境中囚犯情绪波动和复杂人际互动带来的监控挑战,传统CCTV系统难以有效预警暴力事件。AI视频监控系统基于深度学习与计算机视觉技术,实现对行为、情绪的实时分析,尤其在低光环境下表现优异。该系统通过多设备协同、数据同步及自适应训练,确保高精度识别(95%以上)、快速响应(&lt;5秒),并具备24小时不间断运行能力,极大提升了监狱安全管理的效率与准确性。
Spring AI Alibaba + 通义千问,开发AI应用如此简单!!!
本文介绍了如何使用Spring AI Alibaba开发一个简单的AI对话应用。通过引入`spring-ai-alibaba-starter`依赖和配置API密钥,结合Spring Boot项目,只需几行代码即可实现与AI模型的交互。具体步骤包括创建Spring Boot项目、编写Controller处理对话请求以及前端页面展示对话内容。此外,文章还介绍了如何通过添加对话记忆功能,使AI能够理解上下文并进行连贯对话。最后,总结了Spring AI为Java开发者带来的便利,简化了AI应用的开发流程。
168 0
【AI落地应用实战】篡改检测技术前沿探索——从基于检测分割到大模型
在数字化洪流席卷全球的当下,视觉内容已成为信息交流与传播的核心媒介,然而,随着PS技术和AIGC技术的飞速发展,图像篡改给视觉内容安全带来了前所未有的挑战。 本文将探讨篡改检测技术的现实挑战,分享篡改检测技术前沿和最新应用成果。