fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,12 +1,4 @@
|
||||
# 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
|
||||
# Les 16: Deployment & Production
|
||||
|
||||
---
|
||||
|
||||
@@ -14,180 +6,222 @@
|
||||
**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.
|
||||
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
### Vercel Deployment Flow
|
||||
|
||||
### Installatie & Setup
|
||||
```bash
|
||||
npm install ai openai
|
||||
# of voor Anthropic:
|
||||
npm install ai @anthropic-ai/sdk
|
||||
```
|
||||
**Hoe Vercel werkt:**
|
||||
1. Connect GitHub repository
|
||||
2. Push naar main → automatische deploy
|
||||
3. Push naar andere branch → preview URL
|
||||
4. Alles automatisch (build, SSL, CDN)
|
||||
|
||||
### Core Hooks
|
||||
**Waarom Vercel voor Next.js:**
|
||||
- Gemaakt door dezelfde makers
|
||||
- Zero-config deployment
|
||||
- Gratis tier ruim voldoende
|
||||
- Automatische HTTPS
|
||||
- Global CDN
|
||||
|
||||
#### `useChat` - Voor Conversaties
|
||||
```tsx
|
||||
import { useChat } from 'ai/react';
|
||||
---
|
||||
|
||||
export function ChatComponent() {
|
||||
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
|
||||
### Environment Variables in Vercel
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
```
|
||||
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||
|
||||
#### `useCompletion` - Voor Single Completions
|
||||
- Tekst generatie
|
||||
- Samenvattingen
|
||||
- One-shot responses
|
||||
| Waar | Bestand/Locatie | Voorbeeld |
|
||||
|------|-----------------|-----------|
|
||||
| Lokaal | `.env.local` | Development |
|
||||
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||
|
||||
### API Routes Setup
|
||||
**Stap voor stap:**
|
||||
1. Ga naar je Vercel project
|
||||
2. Settings → Environment Variables
|
||||
3. Voeg toe:
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
- `OPENAI_API_KEY`
|
||||
4. Selecteer environment (Production, Preview, Development)
|
||||
5. Save & Redeploy
|
||||
|
||||
```ts
|
||||
// app/api/chat/route.ts
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText } from 'ai';
|
||||
**Let op:**
|
||||
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||
- Zonder prefix = alleen server-side (API routes)
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages } = await req.json();
|
||||
---
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
messages,
|
||||
});
|
||||
### Supabase Productie Setup
|
||||
|
||||
return result.toDataStreamResponse();
|
||||
}
|
||||
```
|
||||
**Redirect URLs configureren:**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
- `https://jouw-app.vercel.app`
|
||||
|
||||
### Streaming Responses
|
||||
- Waarom streaming: betere UX, snellere perceived performance
|
||||
- Hoe het werkt: Server-Sent Events (SSE)
|
||||
- Token-by-token rendering
|
||||
- Loading states tijdens streaming
|
||||
**Waarom:**
|
||||
- Auth redirects werken alleen naar toegestane URLs
|
||||
- Wildcards (`**`) voor sub-routes
|
||||
|
||||
### Integratie met Supabase
|
||||
- Chat history opslaan in database
|
||||
- User-specific conversations
|
||||
- Message threading
|
||||
---
|
||||
|
||||
### Error Handling
|
||||
- Network errors
|
||||
- Rate limiting
|
||||
- Token limits
|
||||
- Graceful degradation
|
||||
### Deployment Checklist
|
||||
|
||||
### Cost Management
|
||||
- Token counting
|
||||
- Model selection (gpt-4o-mini vs gpt-4o)
|
||||
- Caching strategies
|
||||
- Usage monitoring
|
||||
**Voor deployment:**
|
||||
- [ ] `npm run build` werkt lokaal
|
||||
- [ ] Geen TypeScript errors
|
||||
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||
- [ ] `.gitignore` bevat `.env*.local`
|
||||
- [ ] README up-to-date
|
||||
|
||||
**Na deployment:**
|
||||
- [ ] App laadt correct
|
||||
- [ ] Auth werkt (login/logout)
|
||||
- [ ] Data wordt opgehaald uit Supabase
|
||||
- [ ] AI features werken (indien van toepassing)
|
||||
- [ ] Geen console errors
|
||||
|
||||
---
|
||||
|
||||
### Performance Basics
|
||||
|
||||
**Lighthouse Audit:**
|
||||
1. Open Chrome DevTools
|
||||
2. Tab "Lighthouse"
|
||||
3. Klik "Analyze page load"
|
||||
4. Aim for score >80 in elke categorie
|
||||
|
||||
**Quick wins:**
|
||||
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||
- Lazy load components die niet direct nodig zijn
|
||||
- Verwijder ongebruikte dependencies
|
||||
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
|
||||
**Belangrijk voor productie:**
|
||||
- [ ] API keys nooit in client-side code
|
||||
- [ ] Supabase RLS enabled (Row Level Security)
|
||||
- [ ] Error messages geven geen gevoelige info
|
||||
- [ ] HTTPS (automatisch via Vercel)
|
||||
|
||||
---
|
||||
|
||||
### Monitoring Basics
|
||||
|
||||
**Vercel Dashboard toont:**
|
||||
- Deployments history
|
||||
- Function logs
|
||||
- Analytics (optioneel)
|
||||
|
||||
**Supabase Dashboard toont:**
|
||||
- Database usage
|
||||
- Auth logs
|
||||
- API requests
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel AI SDK (`ai` package)
|
||||
- Next.js API Routes
|
||||
- OpenAI API / Anthropic API
|
||||
- Cursor
|
||||
- Supabase (voor chat history)
|
||||
- Vercel
|
||||
- GitHub
|
||||
- Supabase
|
||||
- Chrome DevTools (Lighthouse)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Bouw een AI Chat Component
|
||||
### Deploy Je Eindproject
|
||||
|
||||
**Stap 1: Setup (20 min)**
|
||||
- Installeer `ai` en `openai` packages
|
||||
- Configureer environment variables
|
||||
- Maak API route `/api/chat`
|
||||
**Deel 1: Pre-Deployment Check (30 min)**
|
||||
|
||||
**Stap 2: Basic Chat (40 min)**
|
||||
- Implementeer `useChat` hook
|
||||
- Bouw chat UI met Tailwind
|
||||
- Test streaming responses
|
||||
Run door de checklist:
|
||||
1. `npm run build` - fix eventuele errors
|
||||
2. Check TypeScript errors
|
||||
3. Maak/update `.env.example`
|
||||
4. Update README met project info
|
||||
|
||||
**Stap 3: Supabase Integratie (40 min)**
|
||||
- Maak `conversations` en `messages` tabellen
|
||||
- Sla berichten op na elke response
|
||||
- Laad conversation history bij page load
|
||||
**Deel 2: Vercel Deployment (30 min)**
|
||||
|
||||
**Stap 4: Polish (20 min)**
|
||||
- Loading indicators
|
||||
- Error states
|
||||
- Scroll to bottom
|
||||
- Clear conversation button
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. Voeg environment variables toe
|
||||
5. Deploy!
|
||||
|
||||
**Deel 3: Supabase Config (20 min)**
|
||||
|
||||
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||
2. Test auth in productie
|
||||
3. Verifieer data access
|
||||
|
||||
**Deel 4: Testing & Lighthouse (40 min)**
|
||||
|
||||
1. Test alle features in productie:
|
||||
- Login/logout
|
||||
- CRUD operaties
|
||||
- AI chat (indien aanwezig)
|
||||
2. Run Lighthouse audit
|
||||
3. Fix issues tot score >80
|
||||
4. Screenshot resultaat
|
||||
|
||||
### Deliverable
|
||||
- Werkende AI chat met streaming
|
||||
- Conversation history in Supabase
|
||||
- Clean UI met goede UX
|
||||
- Werkende productie URL
|
||||
- Lighthouse screenshot (score >80)
|
||||
- Test rapport: wat werkt, wat niet
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Bouw AI Feature voor Eindproject
|
||||
### Polish & Documentatie
|
||||
|
||||
Kies 1 passend bij je eindproject:
|
||||
**Deel 1: Bug Fixes (1 uur)**
|
||||
|
||||
| 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" |
|
||||
1. Test je app grondig in productie
|
||||
2. Fix gevonden bugs
|
||||
3. Test edge cases:
|
||||
- Lege states
|
||||
- Error states
|
||||
- Loading states
|
||||
4. Redeploy
|
||||
|
||||
### 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: Performance Optimization (30 min)**
|
||||
|
||||
### Deel 2: UX Polish (30 min)
|
||||
- Streaming met typing indicator
|
||||
- Suggested prompts / quick actions
|
||||
- Copy response button
|
||||
- Regenerate button
|
||||
1. Run Lighthouse opnieuw
|
||||
2. Fix top 3 performance issues
|
||||
3. Document wat je hebt verbeterd
|
||||
|
||||
### Deel 3: Documentatie (30 min)
|
||||
- Documenteer je AI feature in `docs/AI-FEATURE.md`
|
||||
- Beschrijf system prompt keuzes
|
||||
- Leg integratie met Supabase uit
|
||||
**Deel 3: Documentatie Afronden (30 min)**
|
||||
|
||||
Update je `README.md`:
|
||||
- Werkende productie URL
|
||||
- Features lijst
|
||||
- Tech stack
|
||||
- Setup instructies
|
||||
- Screenshots
|
||||
|
||||
Update `docs/`:
|
||||
- PROMPT-LOG.md (minimaal 10 entries)
|
||||
- AI-DECISIONS.md (minimaal 5 entries)
|
||||
|
||||
### Deliverable
|
||||
- AI feature geïntegreerd in eindproject
|
||||
- Documentatie
|
||||
- Deployed preview
|
||||
- Geoptimaliseerde productie app
|
||||
- Complete documentatie
|
||||
- Lighthouse score >85
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Een Next.js app deployen naar Vercel
|
||||
- Environment variables configureren in Vercel
|
||||
- Supabase redirect URLs instellen voor productie
|
||||
- Een deployment checklist doorlopen
|
||||
- Lighthouse gebruiken voor performance audit
|
||||
- Basis security checks uitvoeren
|
||||
- Productie monitoring begrijpen
|
||||
|
||||
Reference in New Issue
Block a user