Home
Nextjs AI SDK

Building AI-Powered Web Apps With Vercel AI SDK

December 7th, 2024

Artificial Intelligence(AI) is fundamentally changing the way we build software across all platforms, empowering developers to build intelligent, personalized, and interactive applications in the shortest possible time. In this article, I will illustrate how we can combine the power of AI with the versatility and flexibility of Next.js to build web apps that deliver real-time, AI-driven user experiences powered by Vercel AI SDK.

What is the Vercel AI SDK?

The Vercel AI SDK is a powerful toolkit that simplifies the integration of AI features into Next.js projects. Designed to integrate AI into modern web apps seamlessly, this SDK offers: -

  • Prebuilt AI Components for tasks like natural language processing and image recognition.

  • Seamless API integration services like OpenAI, Hugging Face, Gemini, Claude.

  • Edge-ready capabilities to enhance performance and reduce latency for real-time AI

By leveraging the SDK, developers can accelerate development timelines while focusing on building feature-rich AI-powered user experience.

Vercel AI SDK Core Concepts.

Now that we have a basic understanding of Vercel AI SDK, let's dig further to understand its fundamentals before implementing and building an application.

If you are very familiar with projects like Drizzle and Prisma, Vercel AI SDK Core is an ORM-style abstraction for LLMs. This SDK is a versatile set of tools designed to integrate AI functionalities such as text generation, structured data processing, embeddings, and image generation into applications. Some of these core concepts include: -

  1. Streaming Response: - The SDK supports streaming data from language models to improve user experience with fast, iterative feedback. The streamText function is used to stream text.

    streaming-response

  2. Tool calling: - Tools extend the AI model's functionality by allowing it to invoke external logic or APIs. Tools can be defined with a description, parameters, and execution logic.

    Tool Calling

  3. Persistence: - The SDK enables saving and restoring conversational states using a database. This helps in building apps with context-aware conversations.

    Persistance

  4. Custom Middleware: - You can define middleware to handle custom logic for request and responses

    Custom Middleware

  5. Multi-Step Tool Calls: - This feature allows models to perform tasks requiring multiple tool invocations, enabling advanced workflow.

    Multi-Step Tool Calls

Setting Up Our Development Environment

Let's try to set up our development environment to enable us to create a Nextjs AI-powered app.

  1. Prerequisites: - Before diving in, ensure you have

  • Node.js and npm installed

  • Basic understanding of building web apps with Nextjs

2. Installing the SDK: - Start by setting up a new Nextjs project:

vercel ai bash

npx create-next-app ai-powered-web-app: - help creates a Nextjs app

cd ai-powered-web-app: - enters our Nextjs app directory

npm install ai: - installs vercel ai package that simplifies working with AI on the frontend (chat UI, hooks, etc)

npm install ai-sdk: - installs vercel ai-sdk that provides backend-focused package for tools, middleware, and AI providers.

Building Your First AI-Powered App

Creating an AI Chatbot

We'll build a simple chatbot powered by OpenAI's GPT-4o model.

First, we will be using the Nextjs App router to create the route handler that handles the model of the provider we choose(in this case OpenAI).

ai-code

We called the provider OpenAI from the ai-sdk package and also called streamText from the ai package. We then created an asynchronous POST request that gets the request body before using streamText to make a call to OpenAI GPT-4o model passing the request body messages. Finally, we return the streamText response using the toDataStreamResponse.

NB: - we used streamText instead of generateText for faster iterative response to enhance user experience.

Now let's create our Page UI interface. We will use the "use client" directive since we will be using hooks(useChat hook) and interactivity on this page.

Page UI

We imported the useChat hook from "ai/react". We then de-structured messages, input, handleInputChange, and handleSubmit to enable us interact with our API route. We finally iterated messages to enable us display them on our UI and added the input form to send our chat messages.

If you did everything right, your UI should look like this.

Vercel AI SDK

With just over 40 lines of code we were able to build a ChatGPT-like chatbot.

Conclusion

With the Vercel AI SDK, building intelligent web applications has never been easier. From a simple chatbot to a custom AI tool, this SDK empowers developers to create powerful AI-driven experiences for end-users.

Ready to start? Explore the Vercel AI SDK documentation and build great interactive AI experiences on the web.