Framer Demo
You can easily create your AI chatbot and basic UI with the help of Framer.
Create a framer project
Login or create a framer account in order to create a new project to edit.
After creating new project, You should see a editor with a empty ‘Desktop’ frame inside.
Create code component
Click the ‘Assets’ tap in the top-left corner, Then create two Code components by clicking the ’+’ sign next to the ‘Code’.
You can freely name the file. In this guide, we will name it ‘Chat’ and ‘Avatar’.
Overwrite the code
Overwrite two code components with the code below:
You need to replace the audio service apikey, voice id and LLM endpoint to interact with your avatar. You can learn more about our supported audio service and LLM in this session.
Import code components
After saving two components, You can simply drag & drop these two component into the ‘Desktop’ frame.
If you want to make the demo mobile-responsive, you can hover the ‘Desktop’ frame and click the ‘breakpoint’ button on the top-right to create tablet view and phone view.
Publishing the demo
After publishing your demo to the domain framer provided, a basic ai chatbot demo will be shown in the domain.
You can also customize your ai chatbot by filling in characterPrompt
.