GUIDE · VERCEL AI SDK
Vercel AI SDK: Bygg AI-apper med TypeScript
Komplett guide til Vercel AI SDK for å bygge AI-drevne applikasjoner med TypeScript. Lær om streaming, tool calling, agenter og hvordan du bytter mellom OpenAI, Anthropic og Google med én linje kode.
Hva er Vercel AI SDK?
Vercel AI SDK er et open source-bibliotek for å bygge AI-drevne applikasjoner med TypeScript og JavaScript. Det gir deg et enhetlig grensesnitt for å jobbe med ulike AI-leverandører som OpenAI, Anthropic og Google, slik at du kan bytte mellom dem uten å skrive om koden. Dokumentasjonen finner du på ai-sdk.dev.
Biblioteket løser et reelt problem: hver AI-leverandør har sitt eget API med forskjellige konvensjoner, dataformater og SDK-er. Uten en abstraksjon må du skrive leverandørspesifikk kode for alt fra streaming til verktøykall. Vercel AI SDK gir deg én API-overflate som fungerer likt uansett hvilken modell du bruker. Du skriver koden én gang, og bytter leverandør ved å endre én linje.
SDK-en er bygget for moderne webrammeverk og fungerer med React, Next.js, Vue, Nuxt, SvelteKit og vanlig Node.js. Den har innebygd støtte for streaming, verktøybruk, strukturert output og React-hooks som gjør det enkelt å bygge chatgrensesnitt. For utviklere som bygger AI-produkter med TypeScript, er dette det mest populære verktøyet i økosystemet.
Oppsett og installasjon
For å komme i gang installerer du ai-pakken sammen med en leverandørpakke. Kjør «npm install ai @ai-sdk/openai» for OpenAI, eller «npm install ai @ai-sdk/anthropic» for Anthropic, eller «npm install ai @ai-sdk/google» for Google Gemini. Du kan installere flere leverandørpakker samtidig og bytte mellom dem i koden.
Hver leverandør krever en API-nøkkel. Lagre nøklene som miljøvariabler i en .env-fil: OPENAI_API_KEY for OpenAI, ANTHROPIC_API_KEY for Anthropic, og GOOGLE_GENERATIVE_AI_API_KEY for Google. Legg alltid .env i .gitignore. Leverandørpakkene leser automatisk de riktige miljøvariablene.
For å importere en modell bruker du leverandørens fabrikkfunksjon. Med OpenAI skriver du «import { openai } from @ai-sdk/openai» og deretter «openai("gpt-5")» for å referere til en modell. Med Anthropic bruker du «import { anthropic } from @ai-sdk/anthropic» og «anthropic("claude-sonnet-4-5")». Med Google bruker du «import { google } from @ai-sdk/google» og «google("gemini-2.5-flash")». Modellobjektet sender du videre til SDK-ens funksjoner.
Hvis du jobber med Next.js, er oppsett spesielt smidig. Du kan bruke streamText i en API-rute og useChat-hooken på klientsiden. Hele chatten med streaming fungerer med under tjue linjer kode totalt.
Streaming og tekstgenerering
SDK-en har to hovedfunksjoner for tekstgenerering: generateText og streamText. generateText sender en forespørsel til modellen og returnerer hele svaret på en gang. streamText gjør det samme, men returnerer svaret ord for ord i sanntid. For chatboter og interaktive grensesnitt er streaming essensielt fordi brukeren ser teksten bygge seg opp i stedet for å vente.
Begge funksjonene tar inn en modell, en system-prompt (valgfri), og en meldingsarray. Du kan også sende med parametere som temperature og maxTokens for å styre output. streamText returnerer en stream som du kan sende direkte tilbake fra en API-rute. SDK-en håndterer all serialisering og deserialisering automatisk.
For strukturert output finnes generateObject og streamObject. Disse lar deg definere et Zod-skjema og få tilbake data som matcher det skjemaet, i stedet for fritekst. Det er uvurderlig når du trenger å trekke ut strukturert informasjon, klassifisere tekst, eller generere JSON som skal brukes videre i koden.
På klientsiden i React bruker du useChat-hooken for chatgrensesnitt og useCompletion for enklere tekst-komplettering. useChat gir deg meldinger, en handleSubmit-funksjon, og en input-verdi som du kobler til et skjema. Meldingene oppdateres automatisk i sanntid mens modellen strømmer svaret. Du trenger ikke skrive noen WebSocket- eller EventSource-logikk selv.
Tool calling og agenter
Tool calling lar AI-modellen kalle funksjoner du har definert. I Vercel AI SDK bruker du tool-funksjonen for å definere et verktøy med en description som forklarer modellen når den skal bruke det, et parameters-objekt definert med Zod-skjemaer for typevalidering, og en execute-funksjon som kjører den faktiske logikken. Typevalidering med Zod sikrer at modellens parametere er gyldige før koden din kjører.
For agentisk oppførsel, der modellen kan ta flere steg autonomt, bruker du maxSteps-parameteren. Når du setter maxSteps til for eksempel 10, kan modellen kalle et verktøy, få resultatet, resonnere over det, kalle et annet verktøy, og fortsette til oppgaven er løst eller grensen er nådd. Uten maxSteps stopper modellen etter første verktøykall.
Et praktisk eksempel: du definerer et søkeverktøy som tar en spørrestreng og returnerer resultater fra et søke-API, og et hent-innhold-verktøy som tar en URL og returnerer teksten. Med maxSteps satt til 5 kan modellen søke, lese resultater, søke etter mer informasjon, og til slutt formulere et komplett svar basert på det den har funnet.
Verktøy kan også brukes uten execute-funksjonen. Da returnerer modellen verktøykallet som strukturert data, og du bestemmer selv hva som skjer videre på klient- eller serversiden. Dette er nyttig for scenarioer der verktøykallet krever brukerens bekreftelse før det utføres, for eksempel å sende en e-post eller slette data.
Rammeverk og leverandorer
Vercel AI SDK støtter alle store JavaScript-rammeverk. Next.js App Router er best støttet med dedikerte hjelpere for Route Handlers og Server Actions. SvelteKit, Nuxt, Vue og SolidStart er også støttet med egne integrasjoner. For backend-prosjekter uten frontend fungerer SDK-en med vanlig Node.js, Deno og Bun.
Leverandørabstraksjonen er en av SDK-ens viktigste styrker. Alle store AI-leverandører har offisielle eller community-vedlikeholdte pakker: @ai-sdk/openai for GPT-modellene, @ai-sdk/anthropic for Claude, @ai-sdk/google for Gemini, @ai-sdk/mistral for Mistral, og @ai-sdk/amazon-bedrock for AWS Bedrock. I tillegg finnes pakker for Cohere, Groq, Perplexity og mange andre. Du kan også bruke OpenAI-kompatible endepunkter med @ai-sdk/openai for leverandører som tilbyr OpenAI-kompatible API-er.
Å bytte leverandør krever bare at du endrer import og modellreferanse. Resten av koden, inkludert streaming, verktøydefinisjoner og klientlogikk, forblir identisk. Dette gjør det enkelt å teste forskjellige modeller for å finne den beste kvaliteten og prisen for din spesifikke brukscase, uten å skrive om noe.
SDK-en har også en AI-verktøyregister på ai-sdk.dev/registry der fellesskapet deler ferdige verktøydefinisjoner som du kan bruke direkte i prosjektene dine. Det sparer tid og gir tilgang til velprøvde integrasjoner mot vanlige tjenester.
Vercel AI SDK vs. alternativer
Det største alternativet til Vercel AI SDK er å bruke leverandørenes egne SDK-er direkte: openai-pakken for OpenAI, @anthropic-ai/sdk for Anthropic, og @google/genai for Google. Fordelen med direkte SDK-er er at du alltid har tilgang til de nyeste funksjonene umiddelbart. Ulempen er at du må skrive forskjellig kode for hver leverandør, håndtere streaming selv, og bygge egne React-hooks.
LangChain.js er et annet populært alternativ som tilbyr et mer omfattende rammeverk med kjeder, agenter, minne og dokumentlastere. LangChain er kraftigere for komplekse orkestreringer, men er også tyngre og har en brattere læringskurve. For de fleste webapplikasjoner er Vercel AI SDK enklere og mer rettfrem.
For utviklere som bygger AI-drevne webapplikasjoner med TypeScript og React eller Next.js, er Vercel AI SDK det klare førstevalget. Det er lettvektig, har førsteklasses streaming-støtte, og React-hookene gjør chatgrensesnitt trivielt å bygge. Kombinert med leverandørabstraksjonen slipper du å låse deg til én leverandør.
Hvis du bygger noe utenfor web-økosystemet, som Python-backend eller mobile apper, er Vercel AI SDK ikke relevant. Da bruker du leverandørenes egne SDK-er direkte, eller et rammeverk som LangChain (Python) eller Mastra (TypeScript) for mer kompleks agentorkestering.