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 Avatars from ""

export default function Avatar(props) {
    return (
                    apiKey: "**your Elevenlabs API key**",
                    modelId: "eleven_monolingual_v1",
                    voiceId: "**your Elevenlabs voice id**",
                endpoint={"**your LLM endPoint**"}
                    name: "", // your character name
                    context: ``, // background of your character, similar to LLM's system prompt
                    exampleReplies: [], // the more example replies you wrote, the more likely the bot will reply refering to the word you provided.

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.