Google's anything-to-anything AI aanpakken met Claude Code: bouw een multimodale input handler

Google's anything-to-anything model is een signaal voor jouw SaaS

Wat is er gebeurd?

Google heeft Gemini Omni gepresenteerd, een model dat letterlijk alles naar alles omzet: je gooit er een foto in, een stuk tekst, een audioclip, en het model weeft er iets nieuws van. The Verge deed een hands-on en omschreef het als "wild". Het model is niet zomaar een chatbot-upgrade, het verschuift de verwachting van wat een AI-product kan ontvangen als input.

Voor jou als maker is de relevantie niet "moet ik nu ook Gemini gebruiken". De relevantie is: gebruikers gaan steeds vaker verwachten dat ze een screenshot kunnen uploaden, een foto van een bon kunnen insturen, of een afbeelding van hun probleem kunnen meesturen. Als jouw SaaS nu alleen een tekstveld heeft, loop je achter.

Wat betekent dit voor jouw project?

Als je met Claude Code een app bouwt waar gebruikers iets aanleveren (een support-verzoek, een factuur, een idee, een stuk content), dan is nu het moment om een multimodale input toe te voegen. Claude 3.x ondersteunt afbeeldingen als input. Je hoeft dus niet te wachten op Gemini Omni. Je kunt dit vanavond bouwen.

Concreet voorbeeld: heb je een feedback-formulier in je SaaS? Voeg een "upload een screenshot" knop toe en laat Claude de afbeelding meelezen bij het analyseren van de feedback. Dat maakt de output direct een stuk rijker.

Hoe pak je het aan met Claude Code?

Stap 1: Zeg Claude Code wat je wil bouwen

Open Claude Code in je project en geef deze prompt:

Ik wil een multimodale input handler toevoegen aan mijn Next.js app. Gebruikers moeten naast tekst ook een afbeelding kunnen uploaden. Die afbeelding stuur ik vervolgens samen met de tekst naar de Claude API (claude-3-5-sonnet). Maak een React component MultimodalInput.tsx met een tekstveld, een file upload voor afbeeldingen (max 5MB, alleen jpg/png/webp), en een verzendknop. Na upload wordt de afbeelding getoond als preview. Geen externe bibliotheken, alleen wat al in mijn project zit.

Claude Code genereert het component. Controleer of de file-validatie erin zit (type + grootte), want dat vergeet het soms.

Stap 2: Bouw de API route die tekst + afbeelding naar Claude stuurt

Vraag daarna:

Maak een Next.js API route op app/api/analyze/route.ts die een POST request ontvangt met een text veld en een optioneel image veld (base64-string met mediatype). Stuur beide naar de Anthropic API met het claude-3-5-sonnet model. Gebruik de messages API met een content-array die zowel het tekst-blok als het image-blok bevat. Geef de response terug als JSON met een result veld.

Je krijgt zoiets als dit terug:

// app/api/analyze/route.ts
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

export async function POST(request: Request) {
  const { text, image, mediaType } = await request.json();

  const content: Anthropic.MessageParam["content"] = [];

  if (image) {
    content.push({
      type: "image",
      source: {
        type: "base64",
        media_type: mediaType ?? "image/png",
        data: image,
      },
    });
  }

  content.push({
    type: "text",
    text: text,
  });

  const message = await client.messages.create({
    model: "claude-3-5-sonnet-20241022",
    max_tokens: 1024,
    messages: [{ role: "user", content }],
  });

  const result =
    message.content[0].type === "text" ? message.content[0].text : "";

  return Response.json({ result });
}

Check even of de ANTHROPIC_API_KEY in je .env.local staat, anders klapt het direct.

Stap 3: Verbind het component met de API route

Geef deze prompt:

Pas MultimodalInput.tsx aan zodat bij het verzenden de afbeelding wordt omgezet naar base64 en samen met de tekst als JSON wordt gepost naar /api/analyze. Toon een laadindicator tijdens het wachten en render de result tekst daarna onder het formulier.

Claude Code voegt de FileReader logica toe voor de base64-conversie en de fetch-call.

Stap 4: Test het met een echte use case

Laad je app, upload een screenshot van (bijvoorbeeld) een foutmelding of een factuur, typ een korte vraag erbij, en verstuur. Je ziet nu dat Claude zowel de afbeelding als de tekst meeneemt in de analyse.

Wil je de system prompt aanpassen aan jouw product (bv. "Je bent een support-medewerker voor mijn app"), voeg dan dit toe aan de API route:

const message = await client.messages.create({
  model: "claude-3-5-sonnet-20241022",
  max_tokens: 1024,
  system:
    "Je analyseert support-verzoeken voor een SaaS-product. Geef een helder, beknopt antwoord in het Nederlands.",
  messages: [{ role: "user", content }],
});

Wat te checken na afloop

• Upload een screenshot en typ een vraag: krijg je een antwoord dat specifiek over de afbeelding gaat? Dan werkt de multimodale doorstuur correct.
• Upload een te groot bestand (> 5MB): geeft het component een foutmelding of crasht het stil? Goed als het een duidelijke melding toont.
• Open de browser devtools en check de network tab: de POST naar /api/analyze mag niet de volledige base64-string in de URL hebben (dat is een GET-probleem), hij moet in de request body zitten.
• Kost de call te veel tijd? Overweeg max_tokens te verlagen naar 512 voor snellere responses als je alleen een korte samenvatting nodig hebt.

Klein maar concreet resultaat: jouw SaaS accepteert nu twee soorten input. Precies de richting die Google gisteren aanwees, gebouwd met Claude Code in een paar uur.