vercel · Vercel AI SDK Docs
AI SDK Getting Started: Next.js Pages Router
Instructions for integrating the AI SDK into a Next.js application using the Pages Router architecture.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK Getting Started: Next.js Pages Router
Instructions for integrating the AI SDK into a Next.js application using the Pages Router architecture.
When To Use
Use when you need to set up the Vercel AI SDK within a Next.js project that utilizes the Pages Router instead of the App Router.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-getting-started-next-js-pages-router-workflow-guide.md | A guide for setting up the AI SDK within a Next.js application using the Pages Router architecture. | Questions about a guide for setting up the AI SDK within a Next.js application using the Pages Router architecture. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-e.text | A text file containing the required environment variable configuration for setting up the AI SDK with the Next.js Pages Router. | Exact payloads, commands, or snippets shown in A text file containing the required environment variable configuration for setting up the AI SDK with the Next.js Pag... |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-s.text | A Next.js Pages Router API route implementation using the AI SDK streamText function to handle message streaming. | Exact payloads, commands, or snippets shown in A Next.js Pages Router API route implementation using the AI SDK streamText function to handle message streaming. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-g.text | A text-based example demonstrating the initial setup and configuration for using the AI SDK within a Next.js Pages Router environment. | Exact payloads, commands, or snippets shown in A text-based example demonstrating the initial setup and configuration for using the AI SDK within a Next.js Pages Ro... |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-g-2.text | Code examples demonstrating two different methods for importing the gateway function from the AI SDK in a Next.js Pages Router environment. | Exact payloads, commands, or snippets shown in Code examples demonstrating two different methods for importing the gateway function from the AI SDK in a Next.js Pag... |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-s-2.text | A code example demonstrating how to initialize the AI SDK within a Next.js Pages Router environment using the OpenAI provider. | Exact payloads, commands, or snippets shown in A code example demonstrating how to initialize the AI SDK within a Next.js Pages Router environment using the OpenAI... |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-u.text | A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. | Exact payloads, commands, or snippets shown in A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-s-3.text | A Next.js Pages Router API route implementation using streamText to handle AI message streaming and tool calling. | Exact payloads, commands, or snippets shown in A Next.js Pages Router API route implementation using streamText to handle AI message streaming and tool calling. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-u-2.text | A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. | Exact payloads, commands, or snippets shown in A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-r.text | A Next.js Pages Router API route implementation using the AI SDK to stream text responses from a model. | Exact payloads, commands, or snippets shown in A Next.js Pages Router API route implementation using the AI SDK to stream text responses from a model. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-r-2.text | A TypeScript implementation of an AI SDK route handler using the Next.js Pages Router to stream text responses. | Exact payloads, commands, or snippets shown in A TypeScript implementation of an AI SDK route handler using the Next.js Pages Router to stream text responses. |
examples/ai-sdk-getting-started-next-js-pages-router-ai-sdk-nextjs-pages-router-u-3.text | A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. | Exact payloads, commands, or snippets shown in A React component implementation using the useChat hook from the AI SDK within a Next.js Pages Router environment. |
What This Skill Covers
- Getting Started Next.js Pages Router Copy markdown
- Main sections:
Prerequisites,Setup 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-pages-router