Vercel AI SDK Has a Free API: Build Full-Stack AI Apps in Minutes

npx create-next-app@latest my-ai-app
cd my-ai-app
npm install ai @ai-sdk/openai

// 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-4-turbo'),
    messages,
    system: 'You are a helpful DevOps assistant.',
  });

  return result.toDataStreamResponse();
}

// app/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="max-w-2xl mx-auto p-4">
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'text-blue-600' : 'text-gray-800'}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask about DevOps..."
          className="w-full p-2 border rounded"
        />
      </form>
    </div>
  );
}

import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';
import { mistral } from '@ai-sdk/mistral';

// Same code, different provider
const result = streamText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  // model: google('gemini-1.5-pro'),
  // model: mistral('mistral-large-latest'),
  messages,
});

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

const { object } = await generateObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    name: z.string(),
    pros: z.array(z.string()),
    cons: z.array(z.string()),
    rating: z.number().min(1).max(10),
    recommendation: z.string(),
  }),
  prompt: 'Review ArgoCD for GitOps deployments',
});

// object is fully typed!
console.log(object.pros); // string[]

import { streamText, tool } from 'ai';
import { z } from 'zod';

const result = streamText({
  model: openai('gpt-4-turbo'),
  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();
      },
    }),
    searchDocs: tool({
      description: 'Search documentation',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => {
        return searchIndex(query);
      },
    }),
  },
});