Vercel AI SDK v5 stelt React-ontwikkelaars in staat om large-language-model (LLM) aanroepen naar de server te verplaatsen, waardoor API-sleutels verborgen blijven en de latentie die gepaard gaat met het streamen van tekstfragmenten in de browser wordt verminderd. De nieuwe transportgebaseerde architectuur scheidt ook de state-afhandeling, zodat de UI-code lichtgewicht blijft terwijl de SDK het streamen, de geschiedenis en tool-aanroepen beheert.

Waarom de oude aanpak het model verstoorde

De meeste React-chatbots die vóór v5 zijn gebouwd, streamden de output van het model rechtstreeks naar de client. Dit dwong ontwikkelaars om de geheime sleutel van het LLM in de front-end code te embedden, waardoor deze zichtbaar werd in de netwerk-inspector van de browser. Teams gebruikten ook useState om elk binnenkomend token te bufferen, wat bij elk klein fragment een re-render veroorzaakte. De UI flikkerde en de code veranderde in een wirwar van callbacks.

Het resultaat: iedereen kon de sleutel stelen en het gesprek vertraagde terwijl ontwikkelaars worstelden met complexe state-afhandeling op laag niveau.

Wat v5 onder de motorkap verandert

  • Transportgebaseerde architectuur – De SDK behandelt de verbinding met het LLM nu als een modulaire transportlaag. Aanroepen komen voort uit een API-route op de server, zodat de geheime sleutel nooit de backend verlaat. Het transport abstraheert het streamingprotocol en levert een schone, getypeerde stroom van berichten aan de front-end.

  • Getypeerde tool-aanroepen – Wanneer een model besluit een tool aan te roepen (bijv. een weeropzoeking of het ophalen van een agenda), verpakt de SDK de aanvraag in een getypeerde payload. De front-end leest de vorm van de payload direct, wat ad-hoc parsing elimineert en runtime-fouten vermindert.

  • Ontkoppeld state-management – De useChat hook dwingt niet langer één enkele state store af. Het biedt callbacks en utilities die elke state-library—Zustand, Redux of gewone React context—kan gebruiken. UI-componenten blijven gericht op het renderen, terwijl de SDK het zware werk doet.

Een praktische workflow

  1. LLM-logica aan de serverzijde – Roep in een API-route streamText aan (of de equivalente streaming helper). De SDK streamt de output van het model terug naar de client via een beveiligde verbinding, waardoor de API-sleutel buiten de browser blijft.
  2. Client-side UI – Importeer useChat in een React-component. De hook geeft de huidige berichtenlijst terug, een functie om nieuwe gebruikersinvoer te verzenden en statusvlaggen. Omdat de state elders leeft, kun je elke state manager die je al gebruikt koppelen.
  3. Tool-afhandeling – Wanneer het model een tool-aanroep uitgeeft, levert de SDK een gestructureerd object aan de client. Render een weer-widget, een kalenderkiezer of een ander aangepast UI-element zonder handmatige synchronisatiecode te schrijven.

Het resultaat is een duidelijke scheiding: de server beheert alle LLM-interacties, de client beheert alleen de presentatie. Geen raw-stream parsing meer, geen onbedoelde lekken van sleutels en geen UI-jitter meer door re-renders per token.

Wie er profiteert, en wie er misschien twijfelt

Waar je de volgende keer op moet letten

De kern

Vercel AI SDK v5 herdefinieert de ontwikkeling van React-chatbots door LLM-aanroepen naar de server te verplaatsen, getypeerde tool-data te leveren en de front-end te bevrijden van complexe state-afhandeling op laag niveau. Deze verschuiving pakt de twee grootste valkuilen aan—blootgestelde geheimen en een haperende UI—terwijl ontwikkelaars de controle behouden over hun eigen state stack.