Πώς να Ρυθμίσετε το Vercel AI SDK: Ένας Πρακτικός Οδηγός

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

npm install ai @ai-sdk/react
# ή
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' ? 'Χρήστης: ' : '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="Πείτε κάτι..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Χρήστης: Γειά σου
AI: Γειά σου! Πώς μπορώ να σε βοηθήσω σήμερα;

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', // ή 'tokens' για ακατέργαστα τμήματα tokens
  onResponse: (response) => {
    console.log('Κεφαλίδες:', response.headers);
  },
  onFinish: (message) => {
    console.log('Ολοκληρώθηκε:', 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: 'Λήψη καιρού για μια τοποθεσία',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  prompt: 'Ποιος είναι ο καιρός στο Παρίσι;',
});

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: 'Δώσε μου μια συνταγή για 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');
// ή
const model = anthropic('claude-3-opus-20240229');
// ή
const model = mistral('mistral-large-latest');
// ή
const model = groq('mixtral-8x7b-32768');

const { messages } = useChat({
  model: openai('gpt-4-turbo'),
  // ή οποιοσδήποτε άλλος πάροχος
});

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('Κεφαλίδες:', 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' ? 'Εσείς: ' : '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="Ρωτήστε με οτιδήποτε..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

const { messages, input, handleInputChange, handleSubmit } = useChat({
  model: openai('gpt-4-turbo'),
  tools: {
    getWeather: {
      description: 'Λήψη καιρού για μια τοποθεσία',
      parameters: z.object({
        location: z.string(),
      }),
    },
  },
  async onToolCall({ toolCall }) {
    if (toolCall.toolName === 'getWeather') {
      const weather = await getWeather(toolCall.args.location);
      return weather;
    }
  },
});

vercel