Supabase Edge Functions + Claude chatbot bouwen
Vorige keer schreef ik hier over Replit vs Cursor. Nu een mini-tutorial over iets wat ik recent heb gebouwd: een custom chatbot met Supabase Edge Functions als backend en de Claude API.
De opzet is simpel:
- Frontend: een chat widget (React component)
- Backend: Supabase Edge Function die de Anthropic API aanroept
- Database: Supabase Postgres voor conversatie-history
Waarom Edge Functions ipv een eigen server? Geen infra beheer, automatisch schalen, en het zit al in je Supabase project. De cold start is ~200ms wat prima is voor een chat.
De edge function is basically een Deno script:
```typescript
import Anthropic from '@anthropic-ai/sdk'
Deno.serve(async (req) => {
const { message, history } = await req.json()
const client = new Anthropic()
const response = await client.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 1024,
messages: [...history, { role: 'user', content: message }]
})
return new Response(JSON.stringify(response))
})
```
Tip: sla de conversatie-history op in Supabase zodat gebruikers later terug kunnen komen. En gebruik Row Level Security zodat elke gebruiker alleen zijn eigen chats ziet.
Totale bouwtijd: een middag. Draaikosten: vrijwel niks bij laag volume.
Reageer
jeroen.h174 dagen geleden
Nette setup. Let op dat je de API key niet in de frontend stopt maar via Supabase secrets. En voor productie zou ik streaming toevoegen, anders wacht de gebruiker lang bij langere responses.
bas.vdl173 dagen geleden
Goede punten. Streaming heb ik inmiddels toegevoegd, scheelt veel in de UX. De Anthropic SDK heeft daar goede support voor.
daan.s173 dagen geleden
Goeie tutorial. Ik heb iets vergelijkbaars gebouwd maar dan met een RAG laag ertussen - Supabase heeft tegenwoordig pgvector ingebouwd, dus je kunt embeddings direct in je database opslaan. Werkt prima voor een kennisbank-chatbot.
floris_91171 dagen geleden
Heb je ook gekeken naar Vercel AI SDK? Die heeft out-of-the-box streaming voor de meeste AI providers inclusief Claude. Scheelt wat boilerplate.