mirror of
https://github.com/vercel/ai-elements.git
synced 2026-09-14 19:48:26 +08:00
Ayodele Samuel Adebayo
80f91b5cab
* Feat: update chatbot example doc to include missing sonner guide * chore: undo formatting
92 lines
3.3 KiB
Plaintext
92 lines
3.3 KiB
Plaintext
---
|
|
title: Chatbot
|
|
description: An example of how to use the AI Elements to build a chatbot.
|
|
full: true
|
|
---
|
|
|
|
<Preview path="chatbot" type="block" className="p-0" />
|
|
|
|
## Tutorial
|
|
|
|
Let's walk through how to build a chatbot using AI Elements and AI SDK. Our example will include reasoning, web search with citations, and a model picker.
|
|
|
|
### Setup
|
|
|
|
First, set up a new Next.js repo and cd into it by running the following command (make sure you choose to use Tailwind the project setup):
|
|
|
|
```package-install
|
|
npx create-next-app@latest ai-chatbot && cd ai-chatbot
|
|
```
|
|
|
|
Run the following command to install AI Elements. This will also set up shadcn/ui if you haven't already configured it:
|
|
|
|
```package-install
|
|
npx ai-elements@latest
|
|
```
|
|
|
|
Now, install the AI SDK dependencies:
|
|
|
|
```package-install
|
|
npm i ai @ai-sdk/react zod
|
|
```
|
|
|
|
In order to use the providers, let's configure an AI Gateway API key. Create a `.env.local` in your root directory and navigate [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key) to create a token, then paste it in your `.env.local`.
|
|
|
|
We're now ready to start building our app!
|
|
|
|
### Client
|
|
|
|
In your `app/page.tsx`, replace the code with the file below.
|
|
|
|
Here, we use the `PromptInput` component with its compound components to build a rich input experience with file attachments, model picker, and action menu. The input component uses the new `PromptInputMessage` type for handling both text and file attachments.
|
|
|
|
The whole chat lives in a `Conversation`. We switch on `message.parts` and render the respective part within `Message`, `Reasoning`, and `Sources`. We also use `status` from `useChat` to stream reasoning tokens, as well as render `Loader`.
|
|
|
|
<SourceCode path="chatbot" />
|
|
|
|
Install Sonner for the toast notification used in `app/page.tsx`:
|
|
|
|
```package-install
|
|
npm i sonner
|
|
```
|
|
|
|
Add `<Toaster />` from `sonner` to your `app/layout.tsx` so toast notifications are visible.
|
|
|
|
### Server
|
|
|
|
Create a new route handler `app/api/chat/route.ts` and paste in the following code. We're using `perplexity/sonar` for web search because by default the model returns search results. We also pass `sendSources` and `sendReasoning` to `toUIMessageStreamResponse` in order to receive as parts on the frontend. The handler now also accepts file attachments from the client.
|
|
|
|
```ts title="app/api/chat/route.ts"
|
|
import { streamText, UIMessage, convertToModelMessages } from "ai";
|
|
|
|
// Allow streaming responses up to 30 seconds
|
|
export const maxDuration = 30;
|
|
|
|
export async function POST(req: Request) {
|
|
const {
|
|
messages,
|
|
model,
|
|
webSearch,
|
|
}: {
|
|
messages: UIMessage[];
|
|
model: string;
|
|
webSearch: boolean;
|
|
} = await req.json();
|
|
|
|
const result = streamText({
|
|
model: webSearch ? "perplexity/sonar" : model,
|
|
messages: await convertToModelMessages(messages),
|
|
system:
|
|
"You are a helpful assistant that can answer questions and help with tasks",
|
|
});
|
|
|
|
// send sources and reasoning back to the client
|
|
return result.toUIMessageStreamResponse({
|
|
sendSources: true,
|
|
sendReasoning: true,
|
|
});
|
|
}
|
|
```
|
|
|
|
You now have a working chatbot app with file attachment support! The chatbot can handle both text and file inputs through the action menu. Feel free to explore other components like [`Tool`](/components/tool) or [`Task`](/components/task) to extend your app, or view the other examples.
|