fix: update supabase lessons to make them a bit simpler
This commit is contained in:
Tim Rijkse
@@ -1,4 +1,4 @@
|
||||
# Les 16: Building AI-Powered Features & Workflow Automation
|
||||
# Les 16: Vercel AI SDK - AI Features in je App
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
@@ -11,153 +11,183 @@
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Integreer AI mogelijkheden in apps.
|
||||
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
|
||||
|
||||
### AI APIs Overzicht
|
||||
- OpenAI API
|
||||
- Anthropic API
|
||||
- Pricing
|
||||
- Rate limits
|
||||
### 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
|
||||
|
||||
### Veel Voorkomende AI Features
|
||||
### 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
|
||||
- Samenvatting
|
||||
- Chatbots
|
||||
- Semantische zoeken
|
||||
- Aanbevelingen
|
||||
- Sentiment analyse
|
||||
- Vertaling
|
||||
- Samenvattingen
|
||||
- One-shot responses
|
||||
|
||||
### API Integratie Patterns
|
||||
- Streaming responses
|
||||
- Error handling
|
||||
- Caching
|
||||
- Prompt optimalisatie
|
||||
### API Routes Setup
|
||||
|
||||
### API Keys Verbergen
|
||||
```ts
|
||||
// app/api/chat/route.ts
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText } from 'ai';
|
||||
|
||||
⚠️ **NOOIT in frontend!**
|
||||
export async function POST(req: Request) {
|
||||
const { messages } = await req.json();
|
||||
|
||||
**Gebruik Supabase Edge Functions:**
|
||||
- Server-side
|
||||
- Keys in env vars
|
||||
- Verify requests (auth)
|
||||
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
|
||||
|
||||
### Streaming UI
|
||||
- Toon AI responses real-time
|
||||
- Vercel AI SDK of manual
|
||||
- Token limits
|
||||
- Graceful degradation
|
||||
|
||||
### Cost Management
|
||||
- Tokens tellen
|
||||
- Cache queries
|
||||
- Goedkopere modellen
|
||||
- Monitor spend
|
||||
|
||||
### Workflow Automation
|
||||
- n8n/Pipedream intro
|
||||
|
||||
### Praktische Automations
|
||||
- Form → AI → Supabase
|
||||
- Cron → data → AI → email
|
||||
- GitHub webhook → AI → Slack
|
||||
|
||||
### Integration Patterns met Supabase
|
||||
|
||||
### Cursor voor Snelle API Integratie
|
||||
- Token counting
|
||||
- Model selection (gpt-4o-mini vs gpt-4o)
|
||||
- Caching strategies
|
||||
- Usage monitoring
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Supabase Edge Functions
|
||||
- OpenAI/Anthropic API
|
||||
- n8n/Pipedream
|
||||
- Vercel AI SDK (`ai` package)
|
||||
- Next.js API Routes
|
||||
- OpenAI API / Anthropic API
|
||||
- Cursor
|
||||
- Supabase (voor chat history)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
|
||||
### Bouw een AI Chat Component
|
||||
|
||||
### Deel 1: AI Feature (1 uur)
|
||||
**Stap 1: Setup (20 min)**
|
||||
- Installeer `ai` en `openai` packages
|
||||
- Configureer environment variables
|
||||
- Maak API route `/api/chat`
|
||||
|
||||
**Kies 1 met Cursor:**
|
||||
**Stap 2: Basic Chat (40 min)**
|
||||
- Implementeer `useChat` hook
|
||||
- Bouw chat UI met Tailwind
|
||||
- Test streaming responses
|
||||
|
||||
| Optie | Beschrijving |
|
||||
|-------|-------------|
|
||||
| A | AI Blog Post Generator |
|
||||
| B | Smart Summarizer |
|
||||
| C | AI Writing Assistant |
|
||||
| D | Intelligent Search |
|
||||
**Stap 3: Supabase Integratie (40 min)**
|
||||
- Maak `conversations` en `messages` tabellen
|
||||
- Sla berichten op na elke response
|
||||
- Laad conversation history bij page load
|
||||
|
||||
**Implementeer via Supabase Edge Function**
|
||||
|
||||
### Deel 2: Workflow Automation (1 uur)
|
||||
|
||||
**Kies n8n OF Pipedream**
|
||||
|
||||
**Bouw 1:**
|
||||
|
||||
| Optie | Flow |
|
||||
|-------|------|
|
||||
| A | Smart Form Processor |
|
||||
| B | Daily AI Summary |
|
||||
|
||||
**Test end-to-end**
|
||||
**Stap 4: Polish (20 min)**
|
||||
- Loading indicators
|
||||
- Error states
|
||||
- Scroll to bottom
|
||||
- Clear conversation button
|
||||
|
||||
### Deliverable
|
||||
- Beide features deployed + working + gedocumenteerd
|
||||
- Werkende AI chat met streaming
|
||||
- Conversation history in Supabase
|
||||
- Clean UI met goede UX
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Polish & Extend AI Feature
|
||||
### Bouw AI Feature voor Eindproject
|
||||
|
||||
### Deel 1: UX (30 min)
|
||||
- Streaming
|
||||
- Copy button met toast
|
||||
- History (Supabase)
|
||||
- Loading skeletons
|
||||
- Empty states
|
||||
- Keyboard shortcuts
|
||||
Kies 1 passend bij je eindproject:
|
||||
|
||||
### Deel 2: Monitoring & Safety (30 min)
|
||||
- Request logging
|
||||
- Usage dashboard
|
||||
- Rate limiting
|
||||
- Content filtering
|
||||
- Timeout handling
|
||||
| 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 3: Documentation (30 min)
|
||||
- API docs
|
||||
- User guide
|
||||
- Add to Starter Template
|
||||
### 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 4: Build 2 Automations voor Eindopdracht (30 min)
|
||||
- 2 n8n/Pipedream automations die echt helpen
|
||||
### 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
|
||||
- Production AI feature
|
||||
- Automations
|
||||
- Docs
|
||||
- Reflectie (300 woorden)
|
||||
- AI feature geïntegreerd in eindproject
|
||||
- Documentatie
|
||||
- Deployed preview
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- AI APIs integreren (OpenAI, Anthropic)
|
||||
- API keys veilig verbergen via Edge Functions
|
||||
- Streaming UI implementeren
|
||||
- Kosten beheren en monitoren
|
||||
- Workflow automation tools gebruiken (n8n/Pipedream)
|
||||
- Praktische AI-powered features bouwen
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user