Comment configurer le Vercel AI SDK : Guide pratique

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

npm install ai @ai-sdk/react
# ou
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' ? 'Utilisateur : ' : 'IA : '}
          {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="Dites quelque chose..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Utilisateur : Bonjour
IA : Bonjour ! Comment puis-je vous aider aujourd'hui ?

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', // ou 'tokens' pour des morceaux de tokens bruts
  onResponse: (response) => {
    console.log('En-têtes :', response.headers);
  },
  onFinish: (message) => {
    console.log('Terminé :', 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: 'Obtenir la météo pour un lieu',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  prompt: 'Quel temps fait-il à 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: 'Donnez-moi une recette de cookies aux pépites de chocolat',
});

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');
// ou
const model = anthropic('claude-3-opus-20240229');
// ou
const model = mistral('mistral-large-latest');
// ou
const model = groq('mixtral-8x7b-32768');

const { messages } = useChat({
  model: openai('gpt-4-turbo'),
  // ou tout autre fournisseur
});

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('En-têtes :', 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' ? 'Vous : ' : 'IA : '}</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="Posez-moi une question..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

const { messages, input, handleInputChange, handleSubmit } = useChat({
  model: openai('gpt-4-turbo'),
  tools: {
    getWeather: {
      description: 'Obtenir la météo pour un lieu',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  async onToolCall({ toolCall }) {
    if (toolCall.toolName === 'getWeather') {
      const weather = await getWeather(toolCall.args.location);
      return weather;
    }
  },
});

vercel