Case study 012026

Offerte-Agent

AI-chatwidget die hoveniers op hun eigen website plaatsen. De widget voert het intakegesprek met een potentiële klant, verzamelt alles voor een offerte (ook foto’s van de tuin) en geeft elke aanvraag een leadscore in een eigen dashboard.

Rol
Solo developer · eigen project
Periode
Jun 2026 – heden
Team
Solo, met Claude Code als AI-programmeerassistent
Status
In ontwikkeling · eigen project
01Probleem

Elke aanvraag begint met uitvragen.

Voordat een hovenier een offerte kan maken, moet hij eerst alle gegevens bij de klant ophalen: wat er moet gebeuren, hoe groot de tuin is, hoe het er nu uitziet. En pas daarna weet hij of een aanvraag kansrijk is. De Offerte-Agent neemt dat eerste gesprek over.

02Aanpak

Eerst het fundament, dan de features.

Ik heb het project opgeknipt in fases (0 tot en met 6) en 27 architectuurbeslissingen met onderbouwing vastgelegd in BESLISSINGEN.md. Fase 0 bestond alleen uit fundament: CI-pipeline, secret scanning, codekwaliteit-tooling en een multi-tenant database. Ik bepaalde wat er gebouwd werd en hoe het moest werken en testte de code; Claude Code schreef de code uit, vooral de complexere onderdelen.

  1. 01

    Multi-tenancy vanaf dag één

    Elke hovenier ziet alleen zijn eigen data. Dat wordt afgedwongen in de database zelf met Row Level Security, niet alleen in de applicatiecode.

  2. 02

    Een taalmodel betrouwbaar en veilig inzetten

    De AI antwoordt in een vast JSON-formaat dat server-side met Zod wordt gecontroleerd. Bij een fout volgt één nieuwe poging en daarna een nette fallback, zodat de bezoeker nooit een kapot gesprek ziet. De server bepaalt zelf of de intake compleet is, en invoer wordt opgeschoond tegen prompt injection.

  3. 03

    EU-dataresidentie en kostenbeheersing

    Een provider-abstractie wisselt tussen een mock, de Anthropic API en Amazon Bedrock; in productie is alleen de EU-variant toegestaan. Een platformbrede dagrem weigert AI-aanroepen zodra het budget op is, met geldbedragen als gehele getallen tegen afrondingsfouten.

TypeScriptNext.jsReactSupabasePostgreSQLAmazon BedrockZod
03Resultaat

Wat er nu staat.

  • Widget op elke website

    Met één codefragment, als zwevende chatbubbel of inline in de pagina, in de eigen huisstijlkleuren met automatisch leesbaar contrast.

  • AI-intake met leadscore

    Het gesprek verzamelt stap voor stap de offertegegevens en geeft de aanvraag een score.

  • Veilige foto-upload

    Controle op het echte bestandstype en verwijdering van locatiegegevens uit de foto.

  • Dashboard voor de ondernemer

    Inloggen, leadoverzicht met score, detailpagina per lead en instellingen met de embed-code.

  • Melding en AI-opvolgmail

    E-mail bij elke nieuwe lead, plus een door AI voorgestelde opvolgmail die de ondernemer aanpast en verstuurt.

  • AVG ingebouwd

    Lead verwijderen met één knop en een dagelijkse taak die verlopen gegevens opruimt.

04Wat ik geleerd heb

Werken met API’s, en met AI als assistent.

  • Werken met API’s

    Veel ervaring opgedaan met externe diensten: AI-modellen (Anthropic en Amazon Bedrock), e-mail (Amazon SES) en de database (Supabase).

  • Een eigen chatbot bouwen

    Hoe je een AI-gesprek opzet dat gericht informatie verzamelt, in plaats van een algemene chatbot te gebruiken.

  • Slim samenwerken met AI

    Hoe ik AI inzet als programmeerassistent, zodat ik sneller werk en zelf de richting en de kwaliteit bewaak.