AI Bot Sidebar
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial should take about 15 minutes. If you have any questions, click the purple live chat button in the bottom left corner or .
If you get stuck and cannot move forward, to see the final solution. Follow these docs if you need help Activating Mods.
Before starting this tutorial, please make sure you have:
a PixieBrix account ()
the Page Editor open ()
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.
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!
We'll use a Sidebar, which is like building a mini-application that you can open inside any webpage.
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!)
Your Sidebar Panel brick should look like the screenshot below. Once it does, you're ready to move to the next step.
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.
Sometimes you'll need to remove elements from the Sidebar.
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.
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.
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.
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.
Next, we'll change two fields in the Form Submission options.
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.
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)
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.
Our form is now ready! Next, we must tell PixieBrix what to do when someone submits the form.
You're ready to move to the next step when your form looks like this:
Any bricks added to this onSubmit pipeline will run when the form is submitted.
Click the + to open the modal, and search for Run with Async Mod Variable.
Hover over it, then click the blue Add button.
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.
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.
Start by updating the Messages items.
Click Add Item
Select system as the role value
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.
Click Add Item
Select user as the role value this time.
In the new content field, type the @ symbol to open the Variable Popover and choose the @values.question variable.
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.
If you don't see anything, you may need to click the Refresh button and you will need to open up the Public object.
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.
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.
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.
Now click the innermost three dots in the newly added Column element and choose the Text element.
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).
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.
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.
To do this, we'll add another row to the container, and then move it above the row containing the response list.
It's the second outermost box.
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.
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 }}
You're ready to move forward when your Sidebar looks like this:
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.
We'll add a button element just under the text that displays the response.
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.
Click the dropdown on Button Style to view your options for button styling and customize the button.
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 @.
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.
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.
To do this click the New Mod button in the top left of the Page Editor, then choose the Sidebar Panel option. (?)
A Sidebar Panel brick appears in the second panel from the left, the .
When you added the Sidebar Panel, you might have noticed two bricks in your , and the second one was Render Document.
When you click a brick in the , you'll notice the middle panel (the ) transforms to show configuration options for the selected brick.
With the Render Document brick, you'll notice the last panel (the ) on the far right changes to the Preview tab to display what the Sidebar will look like.
Clicking on an element in the Preview tab allows you to edit that element in the .
When you click the Example document text, the displays options for setting the Header text and applying other styles. You can learn more about , but for now, we'll focus on changing the text and adjusting the Header size.
As you make changes in the , you'll see them reflected in the Preview tab in the . 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.
To do so, select the element, and click the trash can icon that appears in the or the red Remove element button in the .
When you click the Form option, you'll see a third brick appear in your : the Custom Form brick. This is where you'll customize your form fields and options.
You'll see options appear in the 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 if you're wondering what is possible.
We'll start from the top of the and work our way down.
By default, forms will save data as 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.
Field Description (text that appears below the field, which )
When you selected the Custom Submit Handler toggle in the Form Submission options, you might have noticed a new section added to your called onSubmit @values. We call these pipelines as they're different paths and subsections of events in the Render Document brick.
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 .
When you add the Async Mod Variable brick, the will prompt you to set the Mod Variable Name. Call it chatGPT.
You might have noticed when you added the async mod brick, another pipeline was nested in the onSubmit section of the .
In the middle , 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.
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! to understand when you might use them.
You should see something like this in the Page State tab of the .
This tells PixieBrix to hide that text if the response is not loading. This is why we used an Async Mod Variable in so we could keep track of the status and display a loading indicator when it's loading.
The Button Pipeline name will appear in the as a subsection in the Form.
If it's not working, you can to see how it's meant to be structured, and compare your build to the template mod. You can also or click the live chat button in the bottom left corner of this page.
