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:

​

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.