Below is step by step explaination on how to integrate with Vercel AI SDK.
Create a new Next.js app. (Optional)
Copy
pnpm dlx create-next-app my-ai-appcd my-ai-apppnpm install ai openai-edge
Setup the OpenAI API key in your environment variables.
Copy
OPENAI_API_KEY=xxxxxxxxx
app/api/chat/route.ts
Copy
import { Configuration, OpenAIApi } from 'openai-edge'import { OpenAIStream, StreamingTextResponse } from 'ai'// Optional, but recommended: run on the edge runtime.// See https://vercel.com/docs/concepts/functions/edge-functionsexport const runtime = 'edge'const apiConfig = new Configuration({ apiKey: process.env.OPENAI_API_KEY!})const openai = new OpenAIApi(apiConfig)export async function POST(req: Request) { // Extract the `messages` from the body of the request const { messages } = await req.json() // Request the OpenAI API for the response based on the prompt const response = await openai.createChatCompletion({ model: 'gpt-3.5-turbo', stream: true, messages: messages }) // Convert the response into a friendly text-stream const stream = OpenAIStream(response) // Respond with the stream return new StreamingTextResponse(stream)}
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.
By utilising the buildCharacterPersonaPrompt the Avatech SDK provides a very simple way for you to configure the initial prompt with emotion tags.
Copy
// Set initial promptuseEffect(() => { if (!availableEmotions) return setMessages([ { content: buildCharacterPersonaPrompt({ name: 'Ava', context: 'Im ava, a virtual idol from avatechs.', exampleReplies: ['I am ava!', 'I love next js!', 'What are you working on recently?', 'npm i @avatechai/avatars'], emotionList: availableEmotions, }), role: 'system', id: '1', }, ])}, [availableEmotions])