---
title: "Multi-Modal Chatbot"
description: "A multi-modal chatbot application using the Vercel AI SDK."
url: "https://vercel.com/templates/next.js/multi-modal-chatbot"
links:
  repository: "https://github.com/vercel-labs/ai-sdk-preview-attachments"
  demo: "https://ai-sdk-preview-attachments.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Multi-Modal+Chatbot&demo-description=A+multi-modal+chatbot+application+using+the+Vercel+AI+SDK.&demo-url=https%3A%2F%2Fai-sdk-preview-attachments.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4bSFzn9tgVWG1IPanp7DJa%2F960ea31b9fc711ea81fd6a81062d10ff%2FUntitled_design__2_.png&project-name=Multi-Modal+Chatbot&repository-name=multi-modal-chatbot&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-attachments&from=templates&skippable-integrations=1&env=OPENAI_API_KEY&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-attachments%2Fblob%2Fmain%2FREADME.md"
---

# Multi-Modal Chatbot

A multi-modal chatbot application using the Vercel AI SDK.

# Vercel AI SDK useChat with Attachments Example

This example demonstrates how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) 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

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-attachments&env=OPENAI_API_KEY&envDescription=API%20keys%20needed%20for%20application&envLink=platform.openai.com)

## How to use

Run [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-example
```

```bash
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-example
```

```bash
pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-attachments ai-sdk-preview-attachments-example
```

To run the example locally you need to:

1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
2. Obtain API keys for each provider.
3. Set the required environment variables as shown in the `.env.example` file, but in a new file called `.env`.
4. `npm install` to install the required dependencies.
5. `npm run dev` to 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](https://sdk.vercel.ai/docs)
- [Vercel AI Playground](https://play.vercel.ai)
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

## Related Templates

### [Chatbot](https://vercel.com/templates/next.js/chatbot)

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

### [Object Generation Streaming with useObject](https://vercel.com/templates/next.js/use-object)

An application that converts text inputs into structured objects and streams the expense as it’s being processed using the Vercel AI SDK.

### [Upstash Vector + Vercel AI SDK Starter](https://vercel.com/templates/next.js/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.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.