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 Avatars from "https://framer.com/m/Avatars-TgZa.js@Vh7nkX7l5OepKtsHbDxA"

export default function Avatar(props) {
    return (
        <div>
            <Avatars
                audioService={{
                    apiKey: "**your Elevenlabs API key**",
                    modelId: "eleven_monolingual_v1",
                    voiceId: "**your Elevenlabs voice id**",
                }}
                endpoint={"**your LLM endPoint**"}
                characterPrompt={{
                    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.
                }}
            />
        </div>
    )
}

​

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.