portfolio >

mobiele chat app

flutter mobile chat application on an iphone

Mobile App

AI · flutter · n8n

Van WhatsApp, email en Telegram naar één systeem

Een marketingbureau had een probleem dat ze al jaren hadden. Klanten leverden geen content aan. Of ze deden het wel, maar via email, WhatsApp, Telegram, wetsdoc, noem het maar op. En als het dan eindelijk binnenkwam, miste er altijd iets. Verkeerde resolutie. Geen context. Onduidelijk bij welk project het hoorde.

Elke keer weer terug naar de klant. Elke keer weer wachten.

Dus ik bouwde een chat-app. Eén kanaal voor alles. De klant pakt zijn telefoon, beantwoordt drie vragen, stuurt zijn content in. Het systeem doet de rest.

De app

De klant opent de app. Het eerste wat ze zien zijn drie keuzes: wil je iets delen voor een project, voor kennisdeling, of voor een social media post? Dat is de enige keuze die ze hoeven te maken. Vanaf daar neemt het systeem het over.

De AI weet al wie ze zijn, voor welk bedrijf ze werken, wat de doelen zijn, wie de doelgroep is. Die context zit in het systeem. De klant hoeft dat niet steeds opnieuw uit te leggen.

Ze kunnen typen. Ze kunnen een voice memo insturen die automatisch wordt getranscribeerd. Ze kunnen foto’s, documenten en video’s uploaden. Alles wat ze insturen wordt herkend, gelabeld en op de juiste plek opgeslagen.

Als het gesprek klaar is, krijgt het marketingbureau automatisch een email. En de klant ook, als ze dat willen.

De app werkt op Android en iOS. Authenticatie gaat via SMS — je kunt niet zomaar inloggen, het marketingbureau bepaalt wie er toegang krijgt.


De achterkant

Dit is N8N. Dit is de lijm tussen alles.

Als er een bericht binnenkomt, haalt het systeem de sessiedata op. Het weet wie je bent, welk bedrijf bij je hoort, welke medewerkers er zijn. Die bedrijfsdata wordt samengevoegd en meegegeven aan de AI-agent, zodat die altijd de volledige context heeft.

Spraakberichten worden via OpenAI getranscribeerd naar tekst voordat ze de AI agent bereiken. Afbeeldingen worden automatisch geanalyseerd en krijgen een naam en beschrijving mee. Documenten en video’s worden direct opgeslagen in NextCloud.

Ik heb drie aparte workflows gebouwd voor de verschillende mediatypen — omdat afbeeldingen, documenten en video’s gewoon anders behandeld moeten worden.

Alles wat binnenkomt wordt ook opgeslagen als chatgeschiedenis, zodat sessies altijd terug te vinden zijn en de juiste context aan het juiste gesprek gekoppeld blijft.


Het dashboard

Het marketingbureau beheert alles via een WordPress dashboard. Nieuwe klanten aanmaken. Bedrijfsinformatie invullen. Gebruikers resetten als er iets misgaat met de authenticatie. Een welkomstbericht instellen dat opent zodra de app start.

Geen technische kennis nodig. Gewoon een dashboard dat doet wat het moet doen.


De stack

Flutter voor de app — werkt op Android en iOS, webversie komt eraan. N8N als automatiseringslaag. Docker voor de database op een eigen server. OpenAI voor AI-gesprekken en transcriptie. NextCloud voor bestandsopslag. WordPress voor het beheerdashboard.

Alles draait als één systeem op een eigen server. Niks van grote platforms waar je geen controle over hebt.


Wat het oplevert

Klanten sturen hun content in via één kanaal. Het systeem weet meteen bij welk project het hoort. Het marketingbureau krijgt een notificatie als een sessie klaar is. Geen losse eindjes meer, geen mailboxen afstruinen, geen WhatsApp-threads terugzoeken.

Screenshots

Startscherm marketing chat app met drie project types: project doorgeven, vakkennis delen, social media AI assistent stelt verdiepende vragen over geüploade project informatie met verstuur knop
Chat interface toont geüploade foto met audio bericht en upload animatie Media selectie menu met opties voor foto maken, video opnemen, en bestanden kiezen

Blueprint 8

De juiste partner voor ondernemers die zoeken naar:

Share this post:

Meer cases