Vercel AI SDK is an open-source JavaScript and TypeScript library for adding generative AI to web applications. In a React and Next.js app, it connects model calls, streaming responses, and conversational UI without requiring a separate implementation for each provider’s API. It is particularly useful when direct API calls have made an application hard to switch between providers or difficult to extend with real-time responses. section 1.3 section 3.0
The main pieces serve different parts of the request-to-UI path:
- Model integration: functions such as generateText and streamText make text-generation requests; the SDK’s language-model specification provides an abstraction for working with different providers and models. section 3.3.1 section 3.5
- Streaming: streamText exposes generated text incrementally as an async iterable. The useChat and useCompletion React hooks help manage streams and update conversational or completion interfaces. section 3.2.2
- State and server-rendered UI: SDK capabilities support conversational state and integration with Next.js server components. Keep client-visible messages distinct from the server’s trusted conversation record. section 3.5 section 4.0
Stream generated text with a Gemini model
Install and configure the relevant SDK packages and a provider API key, then create a model and consume each generated part as it arrives: import { createGoogleGenerativeAI } from '@ai-sdk/google'; import { streamText } from 'ai'; const google = createGoogleGenerativeAI({ apiKey: process.env.GEMINI_API_KEY || '' }); const { textStream } = await streamText({ model: google('gemini-2.0-flash'), prompt: 'Generate 400 words of random content for me please', }); for await (const part of textStream) process.stdout.write(part); For a React chat interface, useChat({ api: '/api' }) supplies messages, input, handleInputChange, and handleSubmit for rendering messages and wiring a form to an API endpoint. section 3.2.2
Integrate the SDK incrementally: separate a feature’s intent, such as text generation, from the particular model call that fulfills it, then test the connection between them. Streaming removes much of the work of handling asynchronous chunks, buffering, connection interruptions, and midstream errors, but the application still needs to present useful feedback to users. section 3.1.2 section 3.2.1
The SDK need not own the whole AI pipeline. Pair it with LangChain.js when document ingestion, retrieval, prompt management, or multistep chains need dedicated abstractions: LangChain.js can process documents or produce a stream while SDK utilities connect results and state to the UI. This division appears in document summarization and retrieval-augmented generation applications. An AI interview assistant likewise uses the SDK for LLM interactions, conversational state, and streaming alongside separate storage and authentication services. section 6.1.2 section 7.1.2 section 10.1.3
For external tools and data, a Next.js application can also act as a Model Context Protocol (MCP) client and use an MCP server’s tools in responses. SDK support for setting up an MCP server is described as experimental; it is not required for the client approach. section 12.3
