Συνοπτικά
- Εγκαταστήστε με
npm install aiκαι επιλέξτε τα hooks του framework σας (@ai-sdk/react,@ai-sdk/svelte,@ai-sdk/vue) - Χρησιμοποιήστε το
useChat()για άμεσες διεπαφές συνομιλίας με streaming, ιστορικό και κλήση εργαλείων - Αλλάξτε παρόχους (OpenAI, Anthropic, Mistral, Groq) με μία γραμμή ρύθμισης
- Εκτελέστε σε Vercel Edge Functions για εκκίνηση σε λιγότερο από 100ms
- Η κλήση εργαλείων και η δομημένη έξοδος λειτουργούν άμεσα με τύπους TypeScript
1. Εγκατάσταση σε Next.js / React
1.1 Δημιουργία έργου Next.js (αν δεν έχετε)
npx create-next-app@latest my-ai-app --typescript --eslint --tailwind
cd my-ai-app
1.2 Εγκατάσταση του SDK
npm install ai @ai-sdk/react
# ή
pnpm add ai @ai-sdk/react
1.3 Προσθήκη του API κλειδιού σας
Δημιουργήστε το .env.local στον ριζικό φάκελο:
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
MISTRAL_API_KEY=...
GROQ_API_KEY=...
2. useChat & useCompletion Hooks
2.1 Ελάχιστη διεπαφή συνομιλίας
Δημιουργήστε το app/chat/page.tsx:
'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>
);
}
2.2 Αναμενόμενη έξοδος
Χρήστης: Γειά σου
AI: Γειά σου! Πώς μπορώ να σε βοηθήσω σήμερα;
2.3 useCompletion για μη συνομιλιακές χρήσεις
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>
);
}
3. Streaming Απαντήσεων
3.1 Ενεργοποίηση streaming
Το streaming είναι ενεργοποιημένο από προεπιλογή στα useChat και useCompletion. Δεν απαιτείται επιπλέον ρύθμιση.
3.2 Προσαρμογή της συμπεριφοράς streaming
const { messages } = useChat({
streamMode: 'text', // ή 'tokens' για ακατέργαστα τμήματα tokens
onResponse: (response) => {
console.log('Κεφαλίδες:', response.headers);
},
onFinish: (message) => {
console.log('Ολοκληρώθηκε:', message);
},
});
3.3 Streaming στο Edge runtime
Προσθέστε runtime: 'edge' στη διαδρομή του Next.js:
export const runtime = 'edge';
4. Κλήση Εργαλείων & Δομημένη Έξοδος
4.1 Ορισμός εργαλείων
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: 'Ποιος είναι ο καιρός στο Παρίσι;',
});
4.2 Εκτέλεση κλήσεων εργαλείων
if (toolCalls.length > 0) {
const weather = await getWeather(toolCalls[0].args.location);
console.log(weather);
}
4.3 Δομημένη έξοδος
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"
5. Ρύθμιση Πολλαπλών Παρόχων Μοντέλων
5.1 Ρύθμιση παρόχων
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');
5.2 Χρήση στο useChat
const { messages } = useChat({
model: openai('gpt-4-turbo'),
// ή οποιοσδήποτε άλλος πάροχος
});
5.3 Εναλλακτικοί πάροχοι
import { fallback } from 'ai';
const model = fallback([
openai('gpt-4-turbo'),
anthropic('claude-3-opus-20240229'),
]);
6. Συμβατότητα με Edge Runtime
6.1 Ενεργοποίηση Edge runtime
Προσθέστε στη διαδρομή του Next.js:
export const runtime = 'edge';
6.2 Πάροχοι συμβατοί με Edge
| Πάροχος | Υποστήριξη Edge | Σημειώσεις |
|---|---|---|
| OpenAI | ✅ Ναι | Λειτουργεί άμεσα |
| Anthropic | ❌ Όχι | Πολύ μεγάλο payload |
| Mistral | ✅ Ναι | Λειτουργεί άμεσα |
| Groq | ✅ Ναι | Λειτουργεί άμεσα |
6.3 Σημαντικά σημεία για το Edge runtime
- Cold starts: ~50-100ms στα Vercel Edge Functions Edge Runtime Docs
- Όρια μνήμης: 128MB για τις Edge Functions
- Χωρίς Node.js APIs: Χρησιμοποιήστε
fetchαντί γιαaxios
7. Δημιουργία Chatbot από την Αρχή
7.1 Πλήρης κώδικας chatbot
app/chat/page.tsx:
'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>
);
}
7.2 Προσθήκη κλήσης εργαλείων
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;
}
},
});
7.3 Ανάπτυξη στο Vercel
vercel
Συνηθισμένα Σφάλματα & Λύσεις
| Σφάλμα | Αιτία | Λύση |
|---|---|---|
401 Unauthorized | Λείπει το API κλειδί | Προσθέστε .env.local με OPENAI_API_KEY |
429 Too Many Requests | Ξεπέραση ορίου αιτημάτων | Χρησιμοποιήστε fallback παρόχους ή αναβαθμίστε το πρόγραμμα |
Edge Function payload too large | Πολύ μεγάλη απάντηση από το Anthropic | Αλλάξτε σε Node.js runtime |
TypeError: model is not a function | Λάθος import | Χρησιμοποιήστε import { openai } from '@ai-sdk/openai' |
Εναλλακτικές Λύσεις
1. LangChain
- Πλεονεκτήματα: Καλύτερο για πολύπλοκες ροές εργασίας (RAG, agents)
- Μειονεκτήματα: Βαρύτερο, χωρίς hooks για frameworks
- LangChain Docs
2. OpenAI SDK
- Πλεονεκτήματα: Επίσημη υποστήριξη OpenAI
- Μειονεκτήματα: Χωρίς πολλαπλούς παρόχους ή hooks για frameworks
- OpenAI SDK Docs
Τι Ακολουθεί;
-
Προσθήκη ταυτοποίησης: Χρησιμοποιήστε το NextAuth.js για να ασφαλίσετε το chatbot σας
npm install next-auth -
Ανάπτυξη στην παραγωγή: Ενεργοποιήστε το Vercel Analytics για παρακολούθηση χρήσης
vercel --prod -
Επέκταση με RAG: Χρησιμοποιήστε το Vercel’s AI SDK με το
@vercel/postgresγια αναζήτηση διανυσμάτωνnpm install @vercel/postgres
Για ομάδες που κλιμακώνουν εργαλεία AI, η Hyperion Consulting προσφέρει ολοκληρωμένες υπηρεσίες συμβουλευτικής για την υποδομή και την ανάπτυξη AI.
