vercel · Vercel AI SDK Docs
AI SDK Getting Started: Next.js App Router
Teaches how to set up and integrate the Vercel AI SDK within a Next.js application using the App Router architecture.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK Getting Started: Next.js App Router
Teaches how to set up and integrate the Vercel AI SDK within a Next.js application using the App Router architecture.
When To Use
Use when initializing a new project that requires integrating generative AI capabilities into a Next.js App Router environment.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-getting-started-next-js-app-router-workflow-guide.md | A guide for setting up the Vercel AI SDK within a Next.js App Router environment, including route handler and provider configuration. | Questions about a guide for setting up the Vercel AI SDK within a Next.js App Router environment, including route handler and provide... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-env-v.text | An example of the environment variable configuration required to set up the AI SDK with a gateway API key in a Next.js App Router project. | Exact payloads, commands, or snippets shown in An example of the environment variable configuration required to set up the AI SDK with a gateway API key in a Next.j... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-route.text | A Next.js App Router route handler implementation using streamText to process messages and return a UI message stream response. | Exact payloads, commands, or snippets shown in A Next.js App Router route handler implementation using streamText to process messages and return a UI message stream... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-model.text | A text snippet demonstrating the model configuration object using the Anthropic Claude Sonnet 4.5 model for the AI SDK in a Next.js App Router environment. | Exact payloads, commands, or snippets shown in A text snippet demonstrating the model configuration object using the Anthropic Claude Sonnet 4.5 model for the AI SD... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-gatew.text | Code examples demonstrating how to import the gateway function from either the 'ai' package or the '@ai-sdk/gateway' package. | Exact payloads, commands, or snippets shown in Code examples demonstrating how to import the gateway function from either the 'ai' package or the '@ai-sdk/gateway'... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-opena.text | A code example demonstrating how to initialize the OpenAI provider within a Next.js App Router environment using the AI SDK. | Exact payloads, commands, or snippets shown in A code example demonstrating how to initialize the OpenAI provider within a Next.js App Router environment using the... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-usech.text | A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input state. | Exact payloads, commands, or snippets shown in A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input state. |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-strea.text | A Next.js App Router POST route handler implementation using the AI SDK streamText function and tool calling. | Exact payloads, commands, or snippets shown in A Next.js App Router POST route handler implementation using the AI SDK streamText function and tool calling. |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-usech-2.text | A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input state in a Next.js App Router environment. | Exact payloads, commands, or snippets shown in A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input stat... |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-strea-2.text | A Next.js App Router POST route handler implementation using the AI SDK streamText function to process messages. | Exact payloads, commands, or snippets shown in A Next.js App Router POST route handler implementation using the AI SDK streamText function to process messages. |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-route-2.text | A Next.js App Router route handler implementation using the AI SDK streamText function to process messages. | Exact payloads, commands, or snippets shown in A Next.js App Router route handler implementation using the AI SDK streamText function to process messages. |
examples/ai-sdk-getting-started-next-js-app-router-ai-sdk-nextjs-app-router-usech-3.text | A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input state. | Exact payloads, commands, or snippets shown in A React client component implementation using the useChat hook from the AI SDK to manage chat messages and input state. |
What This Skill Covers
- Getting Started Next.js App Router Copy markdown
- Main sections:
Prerequisites,Create Your Application,Create a Route Handler,Choosing a Provider,Using other providers.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://ai-sdk.dev/docs/getting-started/nextjs-app-router