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:
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-exampleyarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-examplepnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-exampleTo 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.
