AI Bot Sidebar

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

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.

If you get stuck and cannot move forward, activate this mod to see the final solution. Follow these docs if you need help Activating Mods.

PreReqs

Before starting this tutorial, please make sure you have:

• a PixieBrix account (create a free one)

• the Page Editor open (how?)

• completed the Basic Translation Tutorial (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.

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?)

1.2 Configure the Sidebar Panel

A Sidebar Panel brick appears in the second panel from the left, the Brick Actions Panel.

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

• 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

• 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.

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, 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, you'll notice the middle panel (the Brick Configuration Panel) transforms to show configuration options for the selected brick.

With the Render Document brick, you'll notice the last panel (the Data Panel) on the far right changes to the Preview tab to display what the Sidebar will look like.

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.

When you click the Example document text, the Brick Configuration Panel displays options for setting the Header text and applying other styles. You can learn more about styling the Sidebar 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 😃

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

As you make changes in the Brick Configuration Panel, you'll see them reflected in the Preview tab in the 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.

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.

To do so, select the element, and click the trash can icon that appears in the Preview Panel or the red Remove element button in the Brick Configuration Panel.

🏁 Checkpoint

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

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.

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.

When you click the Form option, you'll see a third brick appear in your Brick Actions Panel: the Custom Form brick. This is where you'll customize your form fields and options.

3.2 Click the Custom Form brick in the Brick Actions Panel

You'll see options appear in the 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 if you're wondering what is possible.

3.3 Review the Form settings

We'll start from the top of the Brick Configuration Panel and work our way down.

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.

By default, forms will save data as 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.

Next, we'll change two fields in the Form Submission options.

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.

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.

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:

• 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.

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

• Name (how you reference the field)

• Label (text that appears above the field)

• Field Description (text that appears below the field, which supports 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)

• 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:

• 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.

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.

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:

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 called onSubmit @values. We call these pipelines as they're different paths and subsections of events in the Render Document brick.

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

Click the + to open the modal, and search for Run with Async Mod Variable.

Hover over it, then click the blue Add button.

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.

4.2 Set the Mod Variable Name value to chatGPT

When you add the Async Mod Variable brick, the Brick Configuration Panel will prompt you to set the Mod Variable Name. Call it chatGPT.

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.

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.

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, 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.

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 to understand when you might use them.

4.5 Test your mod and view your response

Just like in the Basic Translation Tutorial, 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.

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).

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:

... 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.

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.

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.

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.

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.

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).

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.

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.)

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.

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.

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

It's the second outermost box.

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.

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.

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 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:

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.

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

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.

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.

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 as a subsection in the Form.

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.

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...

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

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 @.

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.

Set the Hidden field to {{ true if not @mod.chatGPT.isSuccess }}.

Save your mod, and try it out!

Clicking the Save icon will bring up a modal for Packaging a Mod. 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.

If it's not working, you can activate the template 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 or click the live chat button in the bottom left corner of this page.