# AI Bot Sidebar

{% hint style="info" %}
This tutorial shows you the basics of PixieBrix and will help you create an interactive Sidebar.

You'll learn how to : 

* Create persistent sidebars (mini webpages)
* Build forms to interact with users whenever the mod is used 
* Create and reference variables to save values while your mod runs
* Use Text Templates to inject dynamic values into text
* Insert text at cursor on a page
  {% endhint %}

This tutorial should take about 15 minutes. If you have any questions, click the purple live chat button in the bottom left corner or [reach out to support](mailto:support@pixiebrix.com).

{% hint style="warning" %}
If you get stuck and cannot move forward, [activate this mod](https://app.pixiebrix.com/activate?id%5B%5D=%40pixies%2Ftutorials%2Fask-chatgpt) to see the final solution. Follow these docs if you need help [activating-mods](https://docs.pixiebrix.com/activating-mods "mention").
{% endhint %}

### PreReqs

Before starting this tutorial, please make sure you have: 

* a PixieBrix account ([create a free one](https://app.pixiebrix.com/))
* the Page Editor open ([how?](https://docs.pixiebrix.com/platform-overview/page-editor/open-the-page-editor))
* completed the [basic-translation-tutorial](https://docs.pixiebrix.com/tutorials/developer-tutorials/beginner/basic-translation-tutorial "mention") *(The Translation tutorial will teach you concepts that won't be re-explained in this tutorial.)*

At the end of each step, you'll see a **🏁 Checkpoint** to know if you're ready to move to the next step. Screenshot will indicate how you should have configured the brick for that step.

### Prefer to watch? 

This video walks through the steps on this page to give you a visual walkthrough of completing this tutorial.  

{% embed url="<https://youtube.com/live/cojMRjNSluk?feature=share>" %}

If you prefer the text over the video, keep reading!

### Step 1: Add a Sidebar Panel

We'll use a Sidebar, which is like building a mini-application that you can open inside any webpage.

#### 1.1 - Click New Mod and choose the Sidebar Panel

To do this click the **New Mod** button in the top left of the Page Editor, then choose the **Sidebar Panel** option. ([What's a Sidebar Panel](https://docs.pixiebrix.com/developing-mods/developer-concepts/types-of-mods/sidebar-panel)?)

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FwyPJzNXkG1xM2RU9oZZp%2FCleanShot%202024-10-16%20at%2009.40.54.png?alt=media&#x26;token=b62662d9-b96a-4737-bae7-0495b122584b" alt=""><figcaption></figcaption></figure>

#### 1.2 Configure the Sidebar Panel&#x20;

A Sidebar Panel brick appears in the second panel from the left, the [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel).

You'll see configuration options for the Sidebar Panel brick to the right. Update the following:&#x20;

* **Name**: `Ask ChatGPT`
* **Tab Title**: `Ask ChatGPT`
* **Sites**: *click **All URLs**, then click the **ABC** at the end of the docs.pixiebrix.com field and choose **X Remove***&#x20;
* **Trigger**:  *choose **State Change** from the dropdown options (we'll explain this part in Step 3!)*

#### 🏁 Checkpoint

Your **Sidebar Panel** brick should look like the screenshot below. Once it does, you're ready to move to the next step.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FKMFY7ys3rNUY6OfytYHY%2Fimage.png?alt=media&#x26;token=7ce283aa-7d00-45ca-b8fa-1d7058591cf2" alt=""><figcaption></figcaption></figure>

### Step 2: Edit and remove elements in the Sidebar

When you added the **Sidebar Panel**, you might have noticed two bricks in your [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel), and the second one was **Render Document**.

#### 2.1 Click the Render Document brick in the Brick Actions Panel

When you click a brick in the [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel), you'll notice the middle panel (the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel)) transforms to show configuration options for the selected brick.&#x20;

With the **Render Document** brick, you'll notice the last panel (the [Data Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/data-panel)) on the far right changes to the **Preview** tab to display what the Sidebar will look like.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Ft4o49jhrwTmxxX0Q4lTV%2Fimage.png?alt=media&#x26;token=eabdf2b2-b049-4405-8ccd-b9ab95416b44" alt=""><figcaption></figcaption></figure>

#### 2.2 Click the *Example document* text in the Preview

Clicking on an element in the **Preview** tab allows you to edit that element in the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel).

When you click the *Example document* text, the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel) displays options for setting the Header text and applying other styles. You can learn more about [styling the Sidebar elements](https://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/styling-elements), but for now, we'll focus on changing the text and adjusting the Header size.

#### 2.3 Replace the text in the Title field with 🤖 Ask ChatGPT and adjust the size

You can replace the text with anything you want, and you can even use emojis 😃&#x20;

Below the **Title** field, you'll see styling options for the size of the Header. Click any of the sizes to adjust.

{% hint style="info" %}
As you make changes in the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel), you'll see them reflected in the **Preview** tab in the [Data Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/data-panel). You can also click the **Render Panel** button at the top of the Data Panel to see your changes reflected in the Sidebar on the webpage itself.

<img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FtPNtWGf6RCpwXZ6EHLHz%2Fimage.png?alt=media&#x26;token=a91a534e-3150-403e-a245-400b22c5f82d" alt="" data-size="original">
{% endhint %}

#### 2.4 Click the *Example text* element then click the trash icon to remove it

Sometimes you'll need to remove elements from the Sidebar.&#x20;

To do so, select the element, and click the trash can icon that appears in the [Preview Panel](https://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/understanding-the-preview-panel) or the red **Remove element** button in the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel).&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FW0kqjbRrBnUyPZMphAkB%2Fimage.png?alt=media&#x26;token=0ee04aaf-b086-42e1-9f34-78033e445bfe" alt=""><figcaption></figcaption></figure>

#### 🏁 Checkpoint

You're ready to move to the next step when your **Preview** tab looks like this:

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FAslHUcEBHSqzG5SyrqrG%2Fimage.png?alt=media&#x26;token=0cf0e4fc-80f3-4569-8a85-98ba51662731" alt=""><figcaption></figcaption></figure>

*It's okay if the text doesn't match exactly. You should have modified the text in the Header and removed the text element below the Header.*

### Step 3: Add a form element to the Sidebar

To interact with users when the mod runs, such as getting a query or confirming information, you'll need to add a form to your Sidebar.&#x20;

#### 3.1 Click the three dots on the innermost column element and choose Form

Clicking the three dots opens the element options. These options will vary depending on the element that you click. If you see Row or Column options, you are not inside a column element.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FrzeppZcRLF6zTLu2NYmT%2Fimage.png?alt=media&#x26;token=6d19f4d8-9158-4078-b7dd-5a3da166b5f8" alt=""><figcaption></figcaption></figure>

When you click the Form option, you'll see a third brick appear in your [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel): the Custom Form brick. This is where you'll customize your form fields and options.&#x20;

#### 3.2 Click the Custom Form brick in the Brick Actions Panel

You'll see options appear in the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel) for configuring your form.

We won't go through everything you can do in a form (it's a lot!), but you can always learn more about [collecting input from users](https://docs.pixiebrix.com/developing-mods/developer-concepts/user-input) if you're wondering what is possible.&#x20;

#### 3.3 Review the Form settings

We'll start from the top of the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel) and work our way down.&#x20;

For now, you can skip through the **Form Title/Description** options which allow you to specify a title and description that will appear in the Sidebar above the form.

Leave the **Data Binding** options as is.

{% hint style="info" %}
By default, forms will save data as [**Mod Variables**](https://docs.pixiebrix.com/developing-mods/developer-concepts/variables-and-data-context/using-mod-variables) in the **Mod** namespace. This means the values from the form will be accessible via `@mod.your_field_name`. You'll see how to define field names in Step 3.5.
{% endhint %}

Next, we'll change two fields in the **Form Submission** options.&#x20;

#### 3.4 Change the Submit Button Caption and toggle on the Custom Submit Handler

First, change the **Submit Button Caption** field to something like `Ask ChatGPT`.&#x20;

Click the **Render Panel** button in the top right corner of the Page Editor to see your new button text reflected in the Sidebar in the browser.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F4R22SsPKnFfKplSJfrbg%2Fimage.png?alt=media&#x26;token=27e90ace-4082-49db-b05b-111cfd06d099" alt=""><figcaption></figcaption></figure>

Lastly, toggle the **Custom Submit Handler** on (the toggle will turn from gray to blue when you click it).

In this tutorial, we won't change the other settings, but you can configure some helpful options for other mods you make in the future:&#x20;

* **Auto Save/Submit** (remove the button and save a form when a field changes)
* **Hide Submit Button?** (remove the built-in Submit button, must enable **Auto Save** or **Submit** on Enter for a field)
* **Success Message** (displays a custom window alert when the form is submitted)

Now it's time to customize our field.

#### 3.5 Set the field's Name and Label and remove the Field Description.&#x20;

All forms start with one example field you can change. Fields have options for setting:&#x20;

* **Name** (how you reference the field)
* **Label** (text that appears above the field)
* **Field Description** (text that appears below the field, which [supports markdown](https://docs.pixiebrix.com/developing-mods/developer-concepts/working-with-markdown))
* **Input Type** (choose from various options, including dates, websites, and even image cropping!)
* **Default Value** (set as the value when the form appears and can be changed by the user)&#x20;
* **Placeholder** (displayed in the field before submitting a value)
* **Required Field** (specify in this field must be filled out to submit the form)

Some Input Types will have additional fields, like setting options for Dropdown, or number of rows for Paragraph text.

**For this field, we'll only change the following values:**&#x20;

* **Name** -> question
* **Label** -> Ask ChatGPT your question below.
* **Field Description** -> *click **ABC** then **Exclude**.*

You should see the changes in the **Preview** tab, but you can also click **Render Panel** to view your changes in the browser Sidebar.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FRIKTlEfm48nusKPChKjb%2Fimage.png?alt=media&#x26;token=b53154b1-bb71-4c86-b3af-97ef41bc961f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can add as many fields as you want to your forms! Just click the **+ Add new** field button and customize as you see fit. Change the order by scrolling to the bottom of the field options and adjusting the **Field Order**.

&#x20;![](https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FC5FuacTnSZOWDdqeMpA1%2Fimage.png?alt=media\&token=897ae4d6-5314-4e0a-a0fa-0b53c9868fa2)
{% endhint %}

Our form is now ready! Next, we must tell PixieBrix what to do when someone submits the form.

#### 🏁 Checkpoint

You're ready to move to the next step when your form looks like this:&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FO4nktPbKFlp0eGqIZrPc%2Fimage.png?alt=media&#x26;token=01d33702-3deb-4298-b0b8-19dd0286b7ac" alt=""><figcaption></figcaption></figure>

### Step 4: Add actions on form submit

When you selected the **Custom Submit Handler** toggle in the **Form Submission** options, you might have noticed a new section added to your [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel) called `onSubmit @values`. We call these **pipelines** as they're different paths and subsections of events in the **Render Document** brick.&#x20;

Any bricks added to this **onSubmit** pipeline will run when the form is submitted.

#### 4.1 Click the + button in the new section to add the Run with Async Mod Variable brick

&#x20;Click the **+** to open the modal, and search for **Run with Async Mod Variable**.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FFuLUE6qdmvUexntzajeA%2Fimage.png?alt=media&#x26;token=607196f7-79c2-4408-82f6-abef7809a5a8" alt=""><figcaption></figcaption></figure>

&#x20;Hover over it, then click the blue **Add** button.

{% hint style="info" %}
Use the Run with Async Mod Variable brick when you want to perform actions and store the final result of those actions to reference later in a mod. Not only will you be able to reference the output of the brick, but you can also monitor the process so you can perform different actions or display different content based on if an action is loading, or there's an error. We'll work with the loading state in [Step 6](#step-6-add-a-loading-indicator).&#x20;
{% endhint %}

#### 4.2 Set the Mod Variable Name value to chatGPT

When you add the Async Mod Variable brick, the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel) will prompt you to set the **Mod Variable Name**. Call it `chatGPT`.&#x20;

You'll access the output of whatever happens in this brick with `@mod.chatGPT` . You'll see how to do that in step 4.5.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FkyOQgtH1XRLAsjyfG4gO%2Fimage.png?alt=media&#x26;token=6ba3cde7-ebc4-4523-aece-d762cbc6cbc9" alt=""><figcaption></figcaption></figure>

Next, we need to add bricks with actions inside the body for interacting with ChatGPT.

#### 4.3 Add the ChatGPT brick to the body section of the Run with Async Mod Variable pipeline

You might have noticed when you added the async mod brick, another pipeline was nested in the onSubmit section of the [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel).

Click the **+** button below the Run with Async Mod Variable brick and search for the **Create Chat Response with ChatGPT** brick. Hover over the brick, and click the **Add** button to add it to the pipeline.

#### 4.4 Configure your ChatGPT brick

In the middle [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel), you'll need to make a few adjustments to get a response from ChatGPT with the answer to the question you submitted in the form.

**Start by updating the Messages items.**

1. Click **Add Item**
2. Select `system` as the **role** value
3. In the **content** field, define the chatbot's objective. In this case, use something like `You are a chat tool that answers questions when asked. You will answer concisely and clearly.`
4. Click **Add Item**
5. Select `user` as the **role** value this time.
6. In the new **content** field, type the `@` symbol to open the Variable Popover and choose the `@values.question` variable.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FM5GiX0OKBf6bQFEnPBHq%2Fimage.png?alt=media&#x26;token=b063f54d-71cd-4425-8ac7-b2d053e3fa34" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The ChatGPT brick has other settings you can adjust, such as the Model, Temperature, Top P Probability, Max Tokens, Presence and Frequency Penalties, and Stop Sequences. If you don't know of a reason to change these, you probably don't need to! [Learn more about the different OpenAI options](https://www.codecademy.com/learn/intro-to-open-ai-gpt-api/modules/intro-to-open-ai-gpt-api/cheatsheet) to understand when you might use them.
{% endhint %}

#### 4.5 Test your mod and view your response

Just like in the [basic-translation-tutorial](https://docs.pixiebrix.com/tutorials/developer-tutorials/beginner/basic-translation-tutorial "mention"), we ran the mod to test that our HTTP Request was working and we could view our response. Although a different brick, the ChatGPT brick also uses an HTTP Request under the hood, and you'll check for a response in the same way.

Click **Render Panel** in the top right of the Page Editor, type a question in the field, and then click **Ask ChatGPT**.

You should see something like this in the **Page State** tab of the [Data Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/data-panel).

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FaTB1mqhCVFmY7vLz1BnQ%2Fimage.png?alt=media&#x26;token=c835edf1-36d1-4eed-a7a9-35a4471f95c1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Don't see the **Page State** tab? It's only available on *some* bricks. Try clicking the **Run with Async Mod Variable** brick, or the first brick in the pipeline (the starter brick, which is **Show Sidebar**).&#x20;
{% endhint %}

If you don't see anything, you may need to click the **Refresh** button and you will need to open up the Public object.

#### 🏁 Checkpoint

You're ready to move to the next step when your Create Chat Response with ChatGPT brick looks like this:&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FY4glTBOYPI5Z84oU3gqu%2Fimage.png?alt=media&#x26;token=af2349d2-aab6-4ae2-b793-8927369f9b1e" alt=""><figcaption></figcaption></figure>

... AND when you have a response from ChatGPT in the Page State when you run the mod.

### Step 5: Add a text element to the Sidebar

Since we've got our response, we'll head back to our **Render Document** brick.&#x20;

Since we have an array (list) of options that we want to show from ChatGPT, we'll add another row, and then add a list element inside it to display each response.&#x20;

#### 5.1  Add a row by clicking the second outermost three dots in the Preview Panel and choosing Row

In the **Preview** tab, click the three dots in the top right of the Container element, which is the second outermost box on the page.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FIlmH43OjaiIumEhHy9Ul%2Fimage.png?alt=media&#x26;token=007f89d9-2c0b-4015-b95e-82fc1ba5ff51" alt=""><figcaption></figcaption></figure>

Once you click an option appears for adding a Row or List. Choose **Row**.

#### 5.2 Add a Text element inside the newly added column inside the row

Now click the innermost three dots in the newly added Column element and choose the Text element.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FYZ8rxkDgJNyVIJPHlc0U%2Fimage.png?alt=media&#x26;token=0e5d81c9-f248-439f-bd81-6954a7628033" alt=""><figcaption></figcaption></figure>

#### &#x20;5.3 Click the Text element and update the text value to @mod.chatGPT?.data?.choices\[0].message.content

To edit the newly added Text element, you'll need to click the element in the **Preview** tab.&#x20;

Set the value to `@mod.chatGPT?.data?.choices[0].message.content`. Use the `?` so the mod doesn't error when you first open the Sidebar and haven't asked a question, and therefore don't have data yet. Make sure the @ symbol is after the text and not ABC (this clarifies it's a variable and not a string of text).

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FPr3FTmso61uTyqtys90n%2Fimage.png?alt=media&#x26;token=28039e40-48fd-475b-8fa2-b18a900d2b6c" alt=""><figcaption></figcaption></figure>

#### 5.4 Change the text color.

Style the text a different color, which may help it stand out. Go to the **Layout/Style** option and click the **A** to choose another color.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fz3rDgj9GKitV5Ds2xTfA%2Fimage.png?alt=media&#x26;token=bac1b4f8-b14d-45f1-a470-9417890e5cc1" alt=""><figcaption></figcaption></figure>

#### 5.5 Run the mod to try it out.

Type a question in the Sidebar, and click **Ask ChatGPT**. Click the **Render Panel** button at the top right corner of the Page Editor, which will display the response. *(The response will display without clicking the **Render Panel** button after you've saved the mod and closed the Page Editor.)*

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fr82Q4MlDC1s2Sar6eGH7%2Fimage.png?alt=media&#x26;token=d53d49f8-5a61-48ae-b00c-ccefe901bad8" alt=""><figcaption></figcaption></figure>

It was a little confusing after clicking the Ask ChatGPT button to know if it worked or not! It might take a minute for the response to display for your users, so let's add a loading indicator so they'll know their question was successfully submitted and is being processed.&#x20;

### Step 6: Add a loading indicator

To do this, we'll add another row to the container, and then move it above the row containing the response list.&#x20;

#### 6.1 Click the three dots on the Container element and choose Row

It's the second outermost box.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FcxRXcZXhuoJc56PSaWOZ%2Fimage.png?alt=media&#x26;token=c610e986-a7d1-4f51-a6f7-1ba5c81f75b3" alt=""><figcaption></figcaption></figure>

#### 6.2 Move the row above the Text element.

Once you've added the row, click the row in the **Preview** tab, then click the Up arrow once to move it above the row that contains the Response Text.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Ffe2PEr5QKbDjTeiUWUdk%2Fimage.png?alt=media&#x26;token=a3b5747f-987d-4d40-96f4-f1c413bf666c" alt=""><figcaption></figcaption></figure>

#### 6.3 Add a text element with a hidden condition to only show when loading

Inside the newly created row and column, click the three dots to add a **Text** element.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FuSpVxbKAj2YcLVqxLJfv%2Fimage.png?alt=media&#x26;token=1136cc22-eddf-4dcb-945b-0be06d401758" alt=""><figcaption></figcaption></figure>

Edit the text to say `Loading...`

Lastly, update the Hidden field with `{{ true if not @mod.chatGPT.isFetching }}`

This tells PixieBrix to hide that text if the response is not loading. This is why we used an Async Mod Variable in [Step 4](#step-4-add-actions-on-form-submit) so we could keep track of the status and display a loading indicator when it's loading.

#### 🏁 Checkpoint

You're ready to move forward when your Sidebar looks like this:

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FSQdUCvDQNZCoUwyg43rd%2Fimage.png?alt=media&#x26;token=03fb0000-8fb4-4744-9b81-ce6f3afacdb1" alt=""><figcaption></figcaption></figure>

### Step 7: Add a button to set text at the cursor with a response

Let's add one final touch to make this really useful.&#x20;

Sometimes you'll want to copy a response from ChatGPT and use that response somewhere, such as updating a ticket or sending an email.&#x20;

By adding a button below the response, so we can create an action that sets the text from the response to wherever the cursor is at.&#x20;

#### 7.1 Click the three dots on the @...message.content text element and choose Button

We'll add a button element just under the text that displays the response.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FOnD15GKkWAf3anbFJCs9%2Fimage.png?alt=media&#x26;token=920bfbd3-2787-41b5-a422-00d41bfdf80e" alt="" width="360"><figcaption></figcaption></figure>

#### 7.2 Click the new button that appears and change the Button Pipeline and Button Label to Set input value.

The Button **Pipeline name** will appear in the [Brick Actions Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel) as a subsection in the Form.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F8kStN3gtLvTxPla3OEtQ%2Fimage.png?alt=media&#x26;token=f903d56b-2e6e-456a-bc95-a5f587f12d5b" alt="" width="276"><figcaption></figcaption></figure>

It's best practice to use the name as a way to explain what the button will do, for example we may call this "Set response at cursor" since we're creating an action to take the response from ChatGPT and inject it on the page where the cursor is.

The **Button Label** is the text that appears on the button. You'll see this reflected in the Preview Panel when you update the text.

#### 7.3 Change the Button Style

Click the dropdown on Button Style to view your options for button styling and customize the button.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FPRqmNYGt4Dr3uq2199Sj%2Fimage.png?alt=media&#x26;token=a3d4bd4c-a9d5-4d66-8ed7-b411107229a4" alt=""><figcaption></figcaption></figure>

#### 7.4 Add an action to the button by adding Insert Text at Cursor to the pipeline

Click the + button inside the Set input value pipeline...

&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F977jR8WM9GNQTRz7BRTU%2Fimage.png?alt=media&#x26;token=7319298c-34ac-4fed-93a6-eca067eeb496" alt=""><figcaption></figcaption></figure>

...and add the **Insert Text at Cursor** brick.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FzB2Obi7q8mM8Uv0Rm7gV%2Fimage.png?alt=media&#x26;token=5d99ae26-630c-42e6-ae8d-1900a1e22df5" alt=""><figcaption></figcaption></figure>

Set the text field to `@mod.chatGPT?.data?.choices[0].message.content`, which will take the response from and paste that wherever your cursor is. (Note, if you don't have your cursor set, you may see an error. You can also use the copy to clipboard action if you'd prefer!)

You'll also need to change the ABC field at the end of the row to @.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FVHORcZUxF6Tqc39dqyr9%2Fimage.png?alt=media&#x26;token=59848d32-36cf-4306-8f38-e29af59e5cbb" alt=""><figcaption></figcaption></figure>

#### 7.5 Make the response row hidden unless there is a response

One more thing, let's make sure this section with the response and button doesn't show up unless there is a response. It might look strange to see a button to insert text if you haven't asked a question yet!

Click the **Render Document** brick in the Brick Action Pipeline.

Then in the Preview Panel, click the Row element that holds the response and button.&#x20;

Set the **Hidden** field to `{{ true if not @mod.chatGPT.isSuccess }}`.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FrmHQtagYG8CsX9UeleXu%2Fimage.png?alt=media&#x26;token=7dcc262c-0ad6-4b5e-bc41-5d3e2363ff36" alt=""><figcaption></figcaption></figure>

Save your mod, and try it out!

Clicking the **Save** icon will bring up a modal for [packaging-a-mod](https://docs.pixiebrix.com/developing-mods/sharing-mods/packaging-a-mod "mention"). Set an alias (like a username) if you haven't already and give the mod a unique ID and description, then click **Create**.

#### 🏁 Checkpoint

You did it! You've completed the tutorial if you can open the PixieBrix Sidebar (click the PixieBrix icon in the URL bar), and type a question in your Sidebar.&#x20;

{% hint style="info" %}
If it's not working, you can [activate the template](https://app.pixiebrix.com/activate?id%5B%5D=%40pixies%2Ftutorials%2Fask-chatgpt) to see how it's meant to be structured, and compare your build to the template mod. You can also [reach out to our support team ](mailto:support@pixiebrix.com)or click the live chat button in the bottom left corner of this page.
{% endhint %}