Vercel AI SDK Has a Free API — Streaming AI in React Made Simple

#react #ai #nextjs #tutorial

The Vercel AI SDK is the easiest way to build AI-powered streaming interfaces in React, Next.js, Svelte, and Vue. One hook, multiple providers — OpenAI, Anthropic, Google, Ollama.

Quick Start

npm install ai @ai-sdk/openai

Next.js Chat (App Router)

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

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

// app/page.tsx
'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}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Multiple Providers

import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';
import { ollama } from 'ollama-ai-provider';

// Switch providers with one line
const result = streamText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  // model: google('gemini-1.5-pro'),
  // model: ollama('llama3.2'),
  messages,
});

Structured Output (generateObject)

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

const { object } = await generateObject({
  model: openai('gpt-4o-mini'),
  schema: z.object({
    recipe: z.object({
      name: z.string(),
      ingredients: z.array(z.object({
        item: z.string(),
        amount: z.string(),
      })),
      steps: z.array(z.string()),
      prepTime: z.number(),
    }),
  }),
  prompt: 'Generate a recipe for chocolate chip cookies',
});

console.log(object.recipe.name);

Tool Calling

import { tool } from 'ai';

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages,
  tools: {
    getWeather: tool({
      description: 'Get weather for a city',
      parameters: z.object({
        city: z.string(),
      }),
      execute: async ({ city }) => {
        const res = await fetch(`https://api.weather.com/${city}`);
        return res.json();
      },
    }),
  },
});

useCompletion Hook

import { useCompletion } from 'ai/react';

function Autocomplete() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: '/api/completion',
  });

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea value={input} onChange={handleInputChange} />
        <button type="submit">Generate</button>
      </form>
      <p>{completion}</p>
    </div>
  );
}

Embeddings

import { embed, embedMany } from 'ai';

const { embedding } = await embed({
  model: openai.embedding('text-embedding-3-small'),
  value: 'What is machine learning?',
});

const { embeddings } = await embedMany({
  model: openai.embedding('text-embedding-3-small'),
  values: ['text 1', 'text 2', 'text 3'],
});

Need web data to power your AI features? Check out my Apify actors for web scraping, or email spinov001@gmail.com for custom AI data pipelines.

Vercel AI SDK or LangChain — which do you prefer for AI apps? Let me know!

DEV Community