How to Set Up Vercel AI SDK: A Practical Guide

npx create-next-app@latest my-ai-app --typescript --eslint --tailwind
cd my-ai-app

npm install ai @ai-sdk/react
# or
pnpm add ai @ai-sdk/react

OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
MISTRAL_API_KEY=...
GROQ_API_KEY=...

'use client';
import { useChat } from 'ai/react';

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

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

User: Hello
AI: Hi there! How can I help you today?

import { useCompletion } from 'ai/react';

function Completion() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion();

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={handleInputChange} />
      <div>{completion}</div>
    </form>
  );
}

const { messages } = useChat({
  streamMode: 'text', // or 'tokens' for raw token chunks
  onResponse: (response) => {
    console.log('Headers:', response.headers);
  },
  onFinish: (message) => {
    console.log('Finished:', message);
  },
});

export const runtime = 'edge';

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

const { text, toolCalls } = await generateText({
  model: openai('gpt-4-turbo'),
  tools: {
    getWeather: {
      description: 'Get the weather for a location',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  prompt: 'What is the weather in Paris?',
});

if (toolCalls.length > 0) {
  const weather = await getWeather(toolCalls[0].args.location);
  console.log(weather);
}

import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    recipe: z.object({
      name: z.string(),
      ingredients: z.array(z.string()),
    }),
  }),
  prompt: 'Give me a recipe for chocolate chip cookies',
});

console.log(object.recipe.name); // "Chocolate Chip Cookies"

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

const model = openai('gpt-4-turbo');
// or
const model = anthropic('claude-3-opus-20240229');
// or
const model = mistral('mistral-large-latest');
// or
const model = groq('mixtral-8x7b-32768');

const { messages } = useChat({
  model: openai('gpt-4-turbo'),
  // or any other provider
});

import { fallback } from 'ai';

const model = fallback([
  openai('gpt-4-turbo'),
  anthropic('claude-3-opus-20240229'),
]);

export const runtime = 'edge';

'use client';
import { useChat } from 'ai/react';
import { openai } from '@ai-sdk/openai';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    model: openai('gpt-4-turbo'),
    streamMode: 'text',
    onResponse: (response) => {
      console.log('Headers:', response.headers);
    },
  });

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className={`whitespace-pre-wrap ${m.role === 'user' ? 'text-blue-500' : 'text-green-500'}`}>
          <strong>{m.role === 'user' ? 'You: ' : 'AI: '}</strong>
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md mb-8">
        <input
          className="w-full p-2 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Ask me anything..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

const { messages, input, handleInputChange, handleSubmit } = useChat({
  model: openai('gpt-4-turbo'),
  tools: {
    getWeather: {
      description: 'Get the weather for a location',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  async onToolCall({ toolCall }) {
    if (toolCall.toolName === 'getWeather') {
      const weather = await getWeather(toolCall.args.location);
      return weather;
    }
  },
});

vercel