+
+ {messages.map(m => (
+
+ {m.role === 'user' ? 'User: ' : 'AI: '}
+ {m.content}
+
+ ))}
+
- {completion ? (
-
{completion}
- ) : (
-
Enter a business description and click enter to generate slogans.
- )}
);
}
```
- This component utilizes the `useCompletion` hook, which will, by default, use the `POST` route handler we created earlier. The hook provides functions and state for handling user input and form submission. The `useCompletion` hook provides multiple utility functions and state variables:
+ This component utilizes the `useChat` hook, which will, by default, use the `POST` route handler we created earlier. The hook provides functions and state for handling user input and form submission. The `useChat` hook provides multiple utility functions and state variables:
- - `completion` - This is the current completion result, a string value representing the generated text.
+ - `messages` - The current chat messages, an array of objects with `id`, `role`, and `content` properties (among others).
- `input` - This is the current value of the user's input field.
- `handleInputChange` and `handleSubmit` - These functions handle user interactions such as typing into the input field and submitting the form, respectively.
- `isLoading` This boolean indicates whether the API request is in progress or not.
- Finally, create a Svelte component with a form to collect the prompt from the user and display the completion.
+ Finally, create a Svelte component that shows a list of chat messages and provides a user message input.
```svelte filename="src/routes/+page.svelte"
+
+ {#each $messages as message}
+ - {message.role}: {message.content}
+ {/each}
+
- {$completion}
```
@@ -253,8 +233,8 @@ We've written some code to get you started — follow the instructions below to
pnpm run dev
```
- Now your application is up and running! Test it by entering a business description and see the AI-generated slogans in real-time.
+ Now your application is up and running! Test it by entering a message and see the AI chatbot respond in real-time.
- Nice! You've built a streaming slogan generator using the Vercel AI SDK. Remember, your imagination is the limit when it comes to using AI to build apps, so feel free to experiment and extend the functionality of this application further. In the next section of the tutorial, we're going to pivot our little company to chat.
+ Nice! You've built an AI chatbot using the Vercel AI SDK. Remember, your imagination is the limit when it comes to using AI to build apps, so feel free to experiment and extend the functionality of this application further. In the next section of the tutorial, we'll explore the fundamental concepts in more detail.