Vercel AI SDK Has a Free API — Here's How to Build AI Apps with Streaming

#ai #vercel #typescript #javascript

The Vercel AI SDK is a TypeScript toolkit for building AI-powered applications. It provides unified APIs for working with any LLM provider, streaming UI components, and tool calling.

Installation

npm install ai @ai-sdk/openai

Core: Generate Text

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

const { text } = await generateText({
  model: openai("gpt-4o-mini"),
  prompt: "Explain web scraping in 3 sentences"
});
console.log(text);

Streaming Text

import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

const { textStream } = streamText({
  model: openai("gpt-4o-mini"),
  prompt: "Write a guide to REST APIs"
});

for await (const chunk of textStream) {
  process.stdout.write(chunk);
}

Structured Output

import { generateObject } from "ai";
import { z } from "zod";

const { object } = await generateObject({
  model: openai("gpt-4o-mini"),
  schema: z.object({
    name: z.string(),
    pros: z.array(z.string()),
    cons: z.array(z.string()),
    rating: z.number().min(1).max(10)
  }),
  prompt: "Review the Ky HTTP client library"
});
console.log(object);

Tool Calling

import { generateText, tool } from "ai";
import { z } from "zod";

const { text } = await generateText({
  model: openai("gpt-4o-mini"),
  tools: {
    weather: tool({
      description: "Get current weather for a city",
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => {
        return { temp: 22, condition: "sunny", city };
      }
    })
  },
  prompt: "What is the weather in Berlin?"
});

React Hooks (Next.js)

// app/api/chat/route.ts
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai("gpt-4o-mini"),
    messages
  });
  return result.toDataStreamResponse();
}

// components/Chat.tsx
import { useChat } from "ai/react";

export 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}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at spinov001@gmail.com for custom solutions.

DEV Community