# Framer

In this tutorial, we will show you how to integrate your AI Agent into Framer. **This integration is only available for the chatbox version of your Agent, not "Bubble".**

1. Access and log in to your Framer account, you can do it [here](https://www.notion.so/Framer-ed68d11771cc431b92b50e575c1dc9d4?pvs=21).
2. Once inside the Framer Dashboard, create a new project or click on an existing project.
3. Look for the **"Assets"** option in the left sidebar menu and click on **"Code".**
4. \*\*\*Create a new component and give it a name.

<figure><img src="/files/kccHuBqzrNCvSXYKFJVf" alt=""><figcaption></figcaption></figure>

You will see a default code here.

5. Delete it and paste the one we provide you, you can access it from the Caleida Dashboard, under advanced integrations and within the Framer configuration. This code supports the style changes you make to your Agent, so you won't have to change it again every time you edit your Agent.

<figure><img src="/files/AiJExTvAS6srBSPBSNrt" alt=""><figcaption></figcaption></figure>

6. Once you've done this, you'll need to return to the main page by clicking on **"Home"** and then click on **"Assets"** again.
7. Now, in the **"Components"** section, a new one called "Caliope\_Agent\_desktop" should appear.
8. Drag it onto your page, Stack, or Frame, and you're all set.

<figure><img src="/files/PlLl5bcUNf80ayZt4s1D" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.caleida.io/integrations/framer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.