App maken met Claude AI: chat, Claude Code en bouwen vanuit Claude

Een app maken met Claude AI kan op drie manieren. Claude-chat bouwt kleine apps van één pagina rechtstreeks in het gesprek. Claude Code is een agent die een echt project op je machine of in de cloud bewerkt, voor mensen die zich thuis voelen in een codebase. En Claude plus een appbouwer via MCP laat je een full-stack app met database bouwen, bekijken en publiceren zonder het Claude-gesprek te verlaten. Welke past, hangt af van wat je bouwt en hoeveel van de installatie je zelf wilt doen.

Deze gids behandelt alle drie, met prompts en de grenzen van elk. Voor het idee erachter, zie wat vibe coding is. Wil je ook een website maken met AI en Claude, dan werkt dezelfde aanpak: beschrijf de pagina's en laat de tool bouwen en publiceren.

Optie 1: Claude-chat voor kleine tools

In de gewone Claude-app kun je om iets interactiefs vragen en Claude schrijft het als code die naast het gesprek draait: een rekenmachine, een flashcard-oefening, een klein spel, een grafiek van data die je plakt. Je wijzigt het door te reageren.

Een goede prompt is hier op zichzelf staand:

Maak een interactieve tool waarin ik een lijst met uitgaven plak (één per regel, "bedrag, categorie") en die een cirkeldiagram per categorie en een totaal toont. Voeg een voorbeeldlijst toe zodat het meteen werkt.

Waarin het uitblinkt: snelle tools van één pagina die je zelf gebruikt of als link deelt, en leren, omdat je Claude kunt vragen elk onderdeel uit te leggen.

Waar het ophoudt: deze draaien binnen de omgeving van Claude. Er is geen eigen blijvende database, geen gebruikersaccounts, geen eigen domein en nergens om een server te draaien. Groeit een idee uit één pagina, dan heb je een van de volgende twee opties nodig.

Optie 2: Claude Code voor een echte codebase

Claude Code is de codeeragent van Anthropic. Hij werkt in je terminal, in editors zoals VS Code en JetBrains, in een desktop-app en op het web. Je geeft hem een taak in gewone taal en hij leest je project, bewerkt bestanden, voert opdrachten en tests uit en laat zien wat er veranderd is. Op het moment van schrijven is hij inbegrepen bij de betaalde abonnementen van Claude en beschikbaar via de API; kijk op de site van Anthropic voor de huidige abonnementen.

Een typische vibe coding sessie ziet er zo uit:

Voeg een pagina /bookings toe die de boekingen van de huidige gebruiker toont, nieuwste eerst, met een annuleerknop die is uitgeschakeld minder dan twee uur voor de les. Gebruik de bestaande auth-helper. Draai de tests als je klaar bent.

Waarin het uitblinkt: ontwikkelaars en technische oprichters die al een project hebben, volledige controle over de stack willen en het zelf graag draaien en deployen. Het is sterk in wijzigingen over meerdere bestanden en in het volgen van de conventies die al in een codebase staan.

Waar het meer werk kost: je hebt een ontwikkelomgeving nodig en Claude Code host niets. Databases, geheimen, deployment en domeinen regel je zelf. Voor een vergelijking met andere ontwikkelaarstools, zie Cursor vs Windsurf vs Claude Code.

Gewoontes die goed werken met Claude Code

• Vraag om een plan vóór grote wijzigingen. "Schets de stappen en bestanden die je aanraakt en wacht dan."
• Houd een notitiebestand voor het project bij. Claude Code leest een geheugenbestand van het project (CLAUDE.md) voor conventies, zodat je ze niet hoeft te herhalen.
• Beoordeel de diff. Ook bij vibe coding loop je de wijzigingen in gevoelige onderdelen door: authenticatie, betalingen, alles met gebruikersdata.
• Commit vaak. Kleine commits maken het makkelijk een slechte stap ongedaan te maken.

Optie 3: bouwen en publiceren vanuit Claude met Mythex

Werk je graag in Claude maar wil je uiteindelijk een echte app — database, logins, bestandsopslag, een openbare URL — dan kun je Claude via MCP koppelen aan een AI-appbouwer, het protocol waarmee Claude tools kan gebruiken die elders worden gehost. (Wat MCP is legt het in gewone woorden uit.)

Mythex draait een MCP-server. Zodra die gekoppeld is, kan Claude een Mythex-project maken, de code schrijven in een privé-cloud-sandbox, een live voorbeeld starten, een database en bestandsopslag koppelen en de app publiceren. Elk resultaat bevat een link om het project live te bekijken in Mythex.

Zo koppel je het

1. Open in Mythex de Accountinstellingen en kopieer de MCP-URL: https://mcp.mythex.ai/mcp.
2. Ga in Claude naar Instellingen → Connectors → Aangepaste connector toevoegen, plak de URL en klik op Verbinden.
3. Er opent een Mythex-pagina. Log zo nodig in en kies Toegang toestaan. Je hoeft geen API-sleutel te kopiëren.
4. Vraag in Claude om wat je wilt.

Iedereen kan op elk abonnement koppelen; de sandbox-tools vragen Mythex Pro ($25 per maand). Het Claude-gebruik blijft binnen je Claude-abonnement, en sandbox-tijd, voorbeelden en hosting komen uit je Mythex-credits. De volledige uitleg staat in Mythex-apps bouwen vanuit Claude, Cursor of Codex.

Een eerste prompt om te proberen

Maak met Mythex een nieuw project: een eenvoudige CRM voor mijn kleine ontwerpstudio. Contacten met naam, bedrijf, e-mail, telefoon, fase (lead, actief, voormalig) en notities. Een bordweergave per fase waarin ik contacten tussen kolommen kan slepen en een zoekvak. Voeg een database toe zodat data bewaard blijft en een login zodat alleen ik het kan zien. Start het voorbeeld en stuur me de link als het draait.

Verfijn daarna in hetzelfde gesprek, één wijziging tegelijk:

Voeg in het Mythex-project een datum "volgende opvolging" toe aan contacten en een lijst op het startscherm met opvolgingen die deze week aan de beurt zijn. Controleer het in het voorbeeld.

Publiceer de CRM en geef me de live-URL.

Waarin het uitblinkt: mensen die het best denken in Claude en het resultaat gehost willen hebben, met een database, zonder servers in te stellen. Je kunt ook wisselen: begin in Claude en ga verder in de Mythex-chat, of andersom, want het is hetzelfde project.

Welke moet je gebruiken?

Prompttips die bij Claude zwaarder wegen

Claude volgt gedetailleerde instructies nauwgezet, en dat werkt twee kanten op.

• Zeg wat niet mag veranderen. "Houd de lay-out en kleuren; verander alleen de formuliervalidatie."
• Geef een definitie van klaar. "Klaar betekent dat een nieuw contact wordt opgeslagen, op het bord verschijnt en een verversing overleeft."
• Laat het zijn eigen werk controleren. In Claude Code betekent dat tests draaien; met Mythex het live voorbeeld controleren of een browsertest draaien.
• Vraag om uitleg in gewone woorden als je een wijziging niet begrijpt. Het is de snelste manier om te leren wat je app doet.

Ons spiekbriefje met vibe coding prompts heeft 30 prompts die in alle drie de opstellingen werken.

Veiligheidsnotities voor alle drie

• Plak geen echte API-sleutels of wachtwoorden in een Claude-gesprek. Bij Mythex horen geheimen in de geheimeninstellingen van het project en kan Claude hun namen zien, maar niet hun waarden.
• Controleer wie wat kan zien voordat je publiceert. "Kan een ingelogde gebruiker de records van een andere gebruiker openen?" is de eerste vraag.
• Beoordeel gevoelige code. Claude is een capabele programmeur, maar bij vibe coding lees je niet elke regel, dus kies de regels die ertoe doen. Zie is vibe coding veilig?.

Gebruik je ook ChatGPT, dan behandelt de bijbehorende gids vibe coding met ChatGPT en Codex. En wil je de installatie liever helemaal overslaan, open dan de AI-appbouwer en beschrijf daar je app.

Veelgestelde vragen