Vercel AI SDK

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

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

README

Vercel AI SDK


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

Features


SWR -powered React, Svelte, Vue and Solid helpers for streaming text responses and building chat and completion UIs
First-class support for LangChain and OpenAI , Anthropic , Cohere , Hugging Face , and Replicate
Node.js, Serverless, and Edge Runtime support
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 OpenAI from 'openai'
  4. import { OpenAIStream, StreamingTextResponse } from 'ai'

  6. const openai = new OpenAI({
  7.   apiKey: process.env.OPENAI_API_KEY
  8. })

  10. export const runtime = 'edge'

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

  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