Vercel AI SDK

Build AI-powered applications with React, Svelte, and Vue

Machine LearningAPI wrapper / SDKNext.jsSvelteVue
vercel-labs/aisdk.vercel.ai/docsai

README

Vercel AI SDK


The Vercel AI SDK is a library for building edge-ready AI-powered streaming text and chat UIs.

Features


SWR -powered React, Svelte and Vue helpers for streaming text responses and building chat and completion UIs
First-class support for LangChain and OpenAI , Anthropic , and HuggingFace
Edge Runtime compatibility
Callbacks for saving completed streaming responses to a database (in the same request)

Installation


  1. ``` shell
  2. pnpm install ai
  3. ```

View the full documentation and examples on sdk.vercel.ai/docs

Example: An AI Chatbot with Next.js and OpenAI


With the Vercel AI SDK, you can build a ChatGPT-like app in just a few lines of code:

  1. ``` tsx
  2. // ./app/api/chat/route.js
  3. import { Configuration, OpenAIApi } from 'openai-edge'
  4. import { OpenAIStream, StreamingTextResponse } from 'ai'

  6. const config = new Configuration({
  7.   apiKey: process.env.OPENAI_API_KEY
  8. })
  9. const openai = new OpenAIApi(config)

  11. export const runtime = 'edge'

  13. export async function POST(req) {
  14.   const { messages } = await req.json()
  15.   const response = await openai.createChatCompletion({
  16.     model: 'gpt-4',
  17.     stream: true,
  18.     messages
  19.   })
  20.   const stream = OpenAIStream(response)
  21.   return new StreamingTextResponse(stream)
  22. }
  23. ```

  1. ``` tsx
  2. // ./app/page.js
  3. 'use client'

  5. import { useChat } from 'ai/react'

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

  10.   return (
  11.     <div>
  12.       {messages.map(m => (
  13.         <div key={m.id}>
  14.           {m.role}: {m.content}
  15.         </div>
  16.       ))}

  18.       <form onSubmit={handleSubmit}>
  19.         <input
  20.           value={input}
  21.           placeholder="Say something..."
  22.           onChange={handleInputChange}
  23.         />
  24.       </form>
  25.     </div>
  26.   )
  27. }
  28. ```

View the full documentation and examples on sdk.vercel.ai/docs

Authors


This library is created by Vercel and Next.js team members, with contributions from:

Jared Palmer (@jaredpalmer ) -Vercel
Shu Ding (@shuding_ ) -Vercel
Max Leiter (@max_leiter ) -Vercel
Malte Ubl (@cramforce ) -Vercel
Justin Ridgewell (@jridgewell ) -Vercel

Contributors