Building AI Magic with Vercel SDK 3.1: From Terminal Programs to Interactive Chatbots

AI Web Development

In this article, we dive into the powerful Vercel AI SDK 3.1, highlighting how it can transform your basic terminal programs into dynamic, interactive chatbots. The focus is on using various features of the SDK to build an AI-driven application. Whether you're a beginner or an advanced developer, this guide will provide you with actionable insights.

Getting Started

Prerequisites

Basic knowledge of JavaScript and TypeScript.
Node.js installed.
Basic familiarity with Next.js would be beneficial but not required.

Setting Up Your Environment

Start by initializing a new Node.js project and installing the Vercel AI SDK.

npm init -y
npm install @ai-sdk/openai ai dotenv zod

Create a TypeScript file (index.ts) in your project directory. This is where we will write our main script.

Step 1: Building a Simple Terminal Program

Generate Text

Begin by creating a main function to generate some text.

import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import dotenv from "dotenv";
 
dotenv.config();
 
async function main() {
  const result = await generateText({
    model: openai("gpt-4o"),
    prompt: "Tell me a joke.",
  });
 
  console.log(result.text);
}
 
main().catch(console.error);

To run this script, use:

npx ts-node index.ts

Using Streaming for Real-time Responses

Enhance the script to use streaming, providing real-time feedback as text is generated.

import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
import dotenv from "dotenv";
 
dotenv.config();
 
async function main() {
  const result = await streamText({
    model: openai("gpt-4o"),
    prompt: "Tell me a joke.",
  });
 
  for await (const textPart of result.textStream) {
    process.stdout.write(textPart);
  }
}
 
main().catch(console.error);

Step 2: Structured Data with Zod

Using Zod, we can return responses in a structured format.

import { openai } from "@ai-sdk/openai";
import { generateObject } from "ai";
import dotenv from "dotenv";
import { z } from "zod";
 
dotenv.config();
 
async function main() {
  const result = await generateObject({
    model: openai("gpt-4o"),
    prompt: "Tell me a joke. Please incorporate the current temperature in NYC",
    schema: z.object({
      setup: z.string().describe("the setup of the joke"),
      punchline: z.string().describe("the punchline of the joke"),
    }),
  });
 
  console.log(result.object);
}
 
main().catch(console.error);

Step 3: Interacting with Outside World Using Tools

Expand functionality by enabling the model to use tools.

import { openai } from "@ai-sdk/openai";
import { generateText, streamText } from "ai";
import dotenv from "dotenv";
import { z } from "zod";
 
dotenv.config();
 
async function main() {
  const location = "London";
  const result = await generateText({
    model: openai("gpt-4o"),
    prompt: `You are a funny chatbot. users location: ${location}`,
    tools: {
      weather: {
        description: "Get the weather for the user's location",
        parameters: z.object({
          location: z.string().describe("user's location"),
        }),
        execute: async ({ location }) => {
          const temperature = Math.floor(Math.random() * 31); // call external api for {location}
          return { temperature };
        },
      },
    },
  });
 
  if (result.toolResults && result.toolCalls) {
    const joke = await streamText({
      model: openai("gpt-4o"),
      prompt: `Tell me a joke that incorporates ${location}
               and it's current temperature (${result.toolResults[0].result.temperature})`,
    });
 
    for await (const textPart of joke.textStream) {
      process.stdout.write(textPart);
    }
  }
}
 
main().catch(console.error);

Run this enhanced script with:

npx ts-node index.ts

Step 4: Building an Interactive Chatbot

Now, let's leverage the SDK to create a simple chatbot.

Create a Next.js Route Handler

First, initialize a Next.js project:

npx create-next-app@latest my-ai-chatbot
cd my-ai-chatbot
npm install @ai-sdk/openai ai dotenv zod ai/rsc

Create a route file in the app/api/chat/route.ts:

import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";
 
export async function POST(request: Request) {
  const { messages } = await request.json();
  const stream = await streamText({
    model: openai("gpt-4o"),
    system: "You are a helpful assistant.",
    messages,
  });
  return stream.toAIStreamResponse();
}

Create the Chat Interface

Inside app/chat/page.jsx, setup a simple front end to interact with the API route.

"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 === "user" ? "User: " : "AI: "}
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Conclusion

We've successfully built a range of AI-driven applications using Vercel AI SDK 3.1, from terminal programs generating text to interactive chatbots leveraging streaming and components. This demonstrates the powerful features of the SDK and its flexibility in various use cases.

For more details, check out the official Vercel AI SDK documentation.

References

Hands on with the Vercel AI SDK 3.1 by Nico Albanese

Learn more about the Vercel AI SDK in their official documentation.