Back to Templates

Vercel AI SDK useChat with Attachments Example
This example demonstrates how to use the Vercel AI SDK with Next.js with the useChat hook to create a chat interface that can send and receive multi-modal messages from the AI provider of your choice.
Deploy your own
How to use
Run create-next-app with npm, Yarn, or pnpm to bootstrap the example:
To run the example locally you need to:
- Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
- Obtain API keys for each provider.
- Set the required environment variables as shown in the
.env.examplefile, but in a new file called.env. npm installto install the required dependencies.npm run devto launch the development server.
Learn More
To learn more about Vercel AI SDK or Next.js take a look at the following resources:
- Vercel AI SDK docs
- Vercel AI Playground
- Next.js Documentation - learn about Next.js features and API.
Related Templates
Object Generation Streaming with useObject
An application that converts text inputs into structured objects and streams the expense as it’s being processed using the Vercel AI SDK.

Next.js AI Chatbot
A full-featured, hackable Next.js AI chatbot built by Vercel

Upstash Vector + Vercel AI SDK Starter
A RAG chatbot starter for expert answers on university degrees. Built using Vercel AI SDK, LangChain, Upstash Vector, and OpenAI.
