Claude Code als AI-agent voor je klantenservice: zo bouw je het na het Sierra-nieuws

Sierra haalt $950M op: wat doet dat voor jou als maker?

AI-klantenservice-platform Sierra heeft $950 miljoen opgehaald en wil de "global standard" worden voor AI-powered customer experiences. Dat is indrukwekkend, maar het is ook een signaal: bedrijven betalen serieus geld voor iets wat jij als indie-maker zelf kunt bouwen. Zonder VC-geld, zonder een team van 200 engineers.

Als jij een SaaS-product bouwt, heb je op een gegeven moment dezelfde behoefte: gebruikers die vragen stellen, en jij die niet de hele dag in je inbox wil zitten. Sierra doet het voor enterprise-klanten met honderden engineers. Jij doet het vanavond met Claude Code.

Wat betekent dit voor jouw project?

Als jouw SaaS een FAQ-pagina heeft, of een helpcenter met artikelen, dan heb je al het ruwe materiaal om een eenvoudige support-agent te bouwen. Claude Code kan je helpen om een API-endpoint te maken die vragen van gebruikers beantwoordt op basis van jouw eigen content. Geen Sierra-abonnement nodig, geen Intercom-factuur van 400 euro per maand.

De concrete use-case: een gebruiker typt een vraag in een chatvenster op jouw site, en een agent beantwoordt die vraag op basis van jouw kennisbank. Klinkt ingewikkeld, is het niet.

Hoe pak je het aan met Claude Code?

Hieronder bouw je in 4 stappen een minimale support-agent. We gebruiken Next.js als basis, maar de aanpak werkt ook in andere frameworks.

Stap 1: Zet je kennisbank klaar als tekstbestand

Maak een bestand knowledge-base.txt in je project met je FAQ-content. Plat tekst werkt prima voor een MVP.

Vraag: Hoe reset ik mijn wachtwoord?
Antwoord: Ga naar de loginpagina en klik op 'Wachtwoord vergeten'. Je ontvangt binnen 2 minuten een mail.

Vraag: Kan ik mijn abonnement pauzeren?
Antwoord: Ja, dat kan via Instellingen > Abonnement > Pauzeren. Je betaalt dan niets tot je het abonnement hervat.

Vraag: Werkt jullie tool ook op mobiel?
Antwoord: Ja, de webapp is volledig responsief. Er is nog geen native app, maar die staat op de roadmap voor Q3.

Geef dit bestand aan Claude Code met de volgende prompt:

Lees het bestand knowledge-base.txt in mijn project. Maak een Next.js API-route op /api/support die een POST-request ontvangt met een question-veld in de body. De route stuurt de vraag plus de volledige inhoud van knowledge-base.txt naar de Anthropic API (model: claude-opus-4-5) en retourneert het antwoord als JSON met een answer-veld. Gebruik de omgevingsvariabele ANTHROPIC_API_KEY. Houd de system prompt kort: de agent antwoordt alleen op basis van de kennisbank en zegt eerlijk als het antwoord er niet in staat.

Stap 2: Bouw de API-route

Claude Code genereert zoiets als dit. Check of het er op lijkt:

// app/api/support/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Anthropic from '@anthropic-ai/sdk';
import fs from 'fs';
import path from 'path';

const client = new Anthropic();

export async function POST(request: NextRequest) {
  const { question } = await request.json();

  const knowledgeBase = fs.readFileSync(
    path.join(process.cwd(), 'knowledge-base.txt'),
    'utf-8'
  );

  const message = await client.messages.create({
    model: 'claude-opus-4-5',
    max_tokens: 512,
    system: `Je bent een klantenservice-assistent. Beantwoord vragen uitsluitend op basis van de onderstaande kennisbank. Als het antwoord er niet in staat, zeg dat dan eerlijk en stel voor contact op te nemen via support@mijnsaas.nl.\n\nKENNISBANK:\n${knowledgeBase}`,
    messages: [
      { role: 'user', content: question }
    ]
  });

  const answer = message.content[0].type === 'text' ? message.content[0].text : '';

  return NextResponse.json({ answer });
}

Stap 3: Voeg een simpele chatwidget toe aan je pagina

Vraag Claude Code om een minimalistische UI-component:

Maak een React-component SupportChat in components/SupportChat.tsx. Het component toont een klein chatvenster rechtsonder in het scherm. De gebruiker kan een vraag typen en op Verstuur klikken. Het component doet een POST naar /api/support met de vraag en toont het antwoord. Gebruik Tailwind CSS voor de styling. Houd het simpel: geen chat-geschiedenis, gewoon vraag + antwoord.

En voeg het toe aan je layout:

// app/layout.tsx (fragment)
import SupportChat from '@/components/SupportChat';

export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <body>
        {children}
        <SupportChat />
      </body>
    </html>
  );
}

Stap 4: Test en verbeter je kennisbank

Stel nu zelf een paar vragen die gebruikers stellen. Werkt het antwoord niet goed? Voeg de vraag + antwoord toe aan knowledge-base.txt en herstart. Geen re-deploy nodig voor de kennisbank als je het bestand lokaal inleest.

Wil je de kennisbank later in Supabase zetten zodat je hem via een dashboard kunt bijhouden? Gebruik dan deze prompt:

Vervang het inlezen van knowledge-base.txt door een query op een Supabase-tabel knowledge_entries met kolommen question en answer. Gebruik de Supabase JS-client. Concateneer alle rijen tot één string en gebruik die als kennisbank in de system prompt.

Wat te checken na afloop

• Stuur een testvraag via Postman of je eigen chatwidget: krijg je een antwoord dat in je kennisbank staat?
• Stel een vraag die er NIET in staat: zegt de agent eerlijk dat hij het niet weet (en geen antwoord verzint)?
• Open de browser-console: zijn er CORS-errors of 500-responses? Los die op door Claude Code te vragen de foutmelding te debuggen.
• Check je Anthropic-dashboard: zie je het API-gebruik toenemen? Dan werkt de koppeling.

Je hebt nu de kern van wat Sierra voor enterprise-bedrijven bouwt, maar dan in een middag en zonder $950M. Daarna kun je uitbreiden: chat-geschiedenis, escalatie naar e-mail als de agent het niet weet, of een admin-dashboard om je kennisbank bij te houden.