194 lines
4.3 KiB
Markdown
194 lines
4.3 KiB
Markdown
# Les 16: Vercel AI SDK - AI Features in je App
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les16-Slide-Overzicht.md
|
|
> - Les16-Lesplan.md
|
|
> - Les16-Bijlage-A-Lesopdracht.md
|
|
> - Les16-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
|
|
|
## Beschrijving
|
|
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Waarom Vercel AI SDK?
|
|
- Abstractie over raw API calls
|
|
- Built-in streaming support
|
|
- React hooks voor eenvoudige integratie
|
|
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
|
- Edge-ready
|
|
|
|
### Installatie & Setup
|
|
```bash
|
|
npm install ai openai
|
|
# of voor Anthropic:
|
|
npm install ai @anthropic-ai/sdk
|
|
```
|
|
|
|
### Core Hooks
|
|
|
|
#### `useChat` - Voor Conversaties
|
|
```tsx
|
|
import { useChat } from 'ai/react';
|
|
|
|
export function ChatComponent() {
|
|
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
|
|
|
|
return (
|
|
<div>
|
|
{messages.map(m => (
|
|
<div key={m.id}>{m.role}: {m.content}</div>
|
|
))}
|
|
<form onSubmit={handleSubmit}>
|
|
<input value={input} onChange={handleInputChange} />
|
|
<button type="submit" disabled={isLoading}>Send</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
#### `useCompletion` - Voor Single Completions
|
|
- Tekst generatie
|
|
- Samenvattingen
|
|
- One-shot responses
|
|
|
|
### API Routes Setup
|
|
|
|
```ts
|
|
// 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-4o'),
|
|
messages,
|
|
});
|
|
|
|
return result.toDataStreamResponse();
|
|
}
|
|
```
|
|
|
|
### Streaming Responses
|
|
- Waarom streaming: betere UX, snellere perceived performance
|
|
- Hoe het werkt: Server-Sent Events (SSE)
|
|
- Token-by-token rendering
|
|
- Loading states tijdens streaming
|
|
|
|
### Integratie met Supabase
|
|
- Chat history opslaan in database
|
|
- User-specific conversations
|
|
- Message threading
|
|
|
|
### Error Handling
|
|
- Network errors
|
|
- Rate limiting
|
|
- Token limits
|
|
- Graceful degradation
|
|
|
|
### Cost Management
|
|
- Token counting
|
|
- Model selection (gpt-4o-mini vs gpt-4o)
|
|
- Caching strategies
|
|
- Usage monitoring
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Vercel AI SDK (`ai` package)
|
|
- Next.js API Routes
|
|
- OpenAI API / Anthropic API
|
|
- Cursor
|
|
- Supabase (voor chat history)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw een AI Chat Component
|
|
|
|
**Stap 1: Setup (20 min)**
|
|
- Installeer `ai` en `openai` packages
|
|
- Configureer environment variables
|
|
- Maak API route `/api/chat`
|
|
|
|
**Stap 2: Basic Chat (40 min)**
|
|
- Implementeer `useChat` hook
|
|
- Bouw chat UI met Tailwind
|
|
- Test streaming responses
|
|
|
|
**Stap 3: Supabase Integratie (40 min)**
|
|
- Maak `conversations` en `messages` tabellen
|
|
- Sla berichten op na elke response
|
|
- Laad conversation history bij page load
|
|
|
|
**Stap 4: Polish (20 min)**
|
|
- Loading indicators
|
|
- Error states
|
|
- Scroll to bottom
|
|
- Clear conversation button
|
|
|
|
### Deliverable
|
|
- Werkende AI chat met streaming
|
|
- Conversation history in Supabase
|
|
- Clean UI met goede UX
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Bouw AI Feature voor Eindproject
|
|
|
|
Kies 1 passend bij je eindproject:
|
|
|
|
| Eindproject | AI Feature |
|
|
|-------------|------------|
|
|
| AI Recipe Generator | Chat: "Wat kan ik maken met kip en rijst?" |
|
|
| Smart Budget Buddy | Chat: "Analyseer mijn uitgaven deze maand" |
|
|
| Travel Planner AI | Chat: "Plan een weekend Barcelona" |
|
|
|
|
### Deel 1: Implementatie (1 uur)
|
|
- Pas `useChat` aan voor jouw use case
|
|
- Custom system prompt voor context
|
|
- Relevante data uit Supabase meegeven als context
|
|
|
|
### Deel 2: UX Polish (30 min)
|
|
- Streaming met typing indicator
|
|
- Suggested prompts / quick actions
|
|
- Copy response button
|
|
- Regenerate button
|
|
|
|
### Deel 3: Documentatie (30 min)
|
|
- Documenteer je AI feature in `docs/AI-FEATURE.md`
|
|
- Beschrijf system prompt keuzes
|
|
- Leg integratie met Supabase uit
|
|
|
|
### Deliverable
|
|
- AI feature geïntegreerd in eindproject
|
|
- Documentatie
|
|
- Deployed preview
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Vercel AI SDK installeren en configureren
|
|
- `useChat` en `useCompletion` hooks gebruiken
|
|
- Streaming responses implementeren
|
|
- API routes opzetten voor AI providers
|
|
- Chat history opslaan in Supabase
|
|
- Error handling en loading states implementeren
|
|
- Kosten bewust omgaan met AI APIs
|