Next JS
With Next JS, Vercel AI, a simple chat with avatar experience.
Setup
Clone and try out the repo demo!Explaination
This demo shows how to integrate with Vercel AI SDK, visit this get started with Vercel AI SDK
https://sdk.vercel.ai/docs/guides/openai#guide-chat-bot
Create a new Next.js app. (Optional)
Create a new Next.js app. (Optional)
app/api/chat/route.ts
Integrate the `useAvatar` hook
Integrate the `useAvatar` hook
The
useAvatar
hook create and setup the avatar display for you! You only need to provide the avatarId and other corresponding loaders.chat.tsx
Update initial prompt with emotion tag support
Update initial prompt with emotion tag support
By utilising the
buildCharacterPersonaPrompt
the Avatech SDK provides a very simple way for you to configure the initial prompt with emotion tags.Final UI renders
Final UI renders
Using the avatar hook you created!
chat.tsx