Exploring the Vercel AI SDK

Aug 21, 2023

The Vercel AI SDK is an open-source library designed to facilitate the development of AI-powered user interfaces. It supports the creation of conversational, streaming, and chat interfaces in JavaScript and TypeScript. The SDK supports popular frameworks such as React/Next.js, Svelte/SvelteKit, and is planning to offer support for Nuxt/Vue soon.

Key Features of the Vercel AI SDK

Interoperability: The SDK includes first-class support for several AI model providers, including OpenAI, LangChain, and Hugging Face Inference. This allows developers to leverage their preferred AI model provider while using the Vercel AI SDK.

Streaming First UI Helpers: The SDK includes React and Svelte hooks for fetching data and rendering streaming text responses. This enables developers to create real-time, dynamic data representations in their applications.

Edge & Serverless ready: The SDK is integrated with Vercel products like Serverless and Edge Functions. This allows developers to deploy AI applications that scale instantly, stream generated responses, and are cost-effective.

Installation

To install the SDK, you can use the following command in your terminal:

npm install ai

Once you have installed the SDK, you can start building AI applications vercel.com.

Building an AI Application with Vercel AI SDK

Let's walk through building a simple AI application using the Vercel AI SDK. This application will use the OpenAI API to create a streaming chat completion.

First, we need to create an OpenAI API client:

import { Configuration, OpenAIApi } from 'openai-edge' 
 const config = new Configuration({  apiKey: process.env.OPENAI_API_KEY  }) 
 const openai = new OpenAIApi(config) 
 export const runtime = 'edge'

In the above code, we are creating a configuration object with our OpenAI API key and creating an instance of the OpenAI API client with this configuration. We also set the runtime to 'edge' vercel.com.

Next, we will create a function to handle POST requests:

import { OpenAIStream, StreamingTextResponse } from 'ai' 
 export async function POST(req: Request) {  const { messages } = await req.json() 
 const response = await openai.createChatCompletion({  model: 'gpt-3.5-turbo',  stream: true,     messages
 }) 
 const stream = OpenAIStream(response)  return new StreamingTextResponse(stream)  }

In the above code, we are extracting the messages from the request body and passing them to the createChatCompletion function of our OpenAI API client. This function will return a streaming chat completion given the messages. We then convert this response into a stream and respond with this stream.

Finally, we can use the useChat hook from the Vercel AI SDK to fetch and render streaming text responses in a React component:

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}>  <label>  Say something...  <input
            value={input}             onChange={handleInputChange}  />  </label>  </form>  </div>  )  }

In the above code, we are using the useChat hook to get the chat messages, the current input, and the handlers for input changes and form submission. We then render the chat messages and a form for sending new messages.

This is a basic example of how to use the Vercel AI SDK to build an AI application. The SDK provides many more features and options that you can use to build more complex applications.

Conclusion

Whether you're building a simple chatbot or an advanced machine learning system, the Vercel AI SDK provides powerful features and tools to efficiently create and deploy your application. With its strong support for AI service providers and popular JavaScript frameworks, this SDK is destined to become a valued resource for developers in the ever-growing AI space.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.

Call To Action

Stay connected with news and updates!

Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.

We hate SPAM. We will never sell your information, for any reason.