How to Customize the AI Rate and Fix Mod
If building a mod from scratch feels intimidating, this tutorial is for you. Rather than building anything, we’ll show you how to take an existing mod and tweak it slightly. It’s much less intimidating than starting from scratch, and you’ll achieve the same result of building something custom for you!
In this tutorial, we’ll take an existing mod, called AI Rate and Fix Response and modify it slightly to make it rewrite content as our favorite fictional or real character. The mod in the marketplace currently takes selected text and rewrites it with AI based on certain guidelines such as
For fun, we will change these guidelines so that it rewrites text to sound more like a specific person. I’m going to use Leslie Knope from Parks and Rec, but you can use anyone you’d like!!
Here’s how we can do that.
1. Activate an existing mod
In this tutorial, we want to customize the AI Rate and Fix Response mod to rate text based on our own guidelines rather than the default ones provided. To do this, we’ll first need to activate the mod from the PixieBrix marketplace.
After you click “Activate”, you’ll be prompted to sign up for a PixieBrix account if you haven’t already. A sidebar appears asking you to select an OpenAI configuration. Feel free to use the default one, which is our Built In one - no configuration or hunting for API keys required!
Click the “Finish activating” button at the bottom of the screen, and you’re done!
🏁Checkpoint! Before moving to the next step, make sure this mod has been activated. You can do this by opening your page editor. On the left side panel, you’ll see a list of mods. Confirm you can see AI Rate and Fix Response. If you can see that, you’re ready to move on to the next step!
2. Copy the mod
Once you’ve activated the mod, it’s available in your Page Editor, and you can duplicate the mod.
To copy a mod, open your Page Editor, then click the three dots next to the mod AI Rate and Fix Response. From the options that appear, select “Make a copy”. If you’ve never created a mod before, you’ll be prompted to select an account alias. Name this anything you like - it’s what all of your mods will start with, and you can think of it as a username.
The next modal shows you the options for the mod. You can leave all of these to the default, but here’s what is being set:
Mod Id - this will start with your account alias, and then slug of the mod afterwards. You can select another alias if you are part of a team, and you can customize the slug of the mod. Basically just the text that comes after your account alias and will be part of your mod’s unique id.
Name - This is the name of the mod. When copying, it’s often nice to change this name to something else so you don’t get it confused with the original. You can call this “AI Rate and Fix Custom” or “AI Rate and Fix Copy”. Or, you can leave it as is.
Version - Leave this as the default for now, it’s more helpful to set when you update or make changes to your mod.
Description - This is a short description for your mod. You can leave this text to the existing, or change it if you want to describe what you’re going to do differently with your mod.
Once you’re done, click the blue Create button in the bottom right and you have yourself a copied mod!
🏁Checkpoint! You’re ready to move on to the next step if you see two of the AI Rate and Fix Response mods in your left side panel. If you didn’t change the name of your copied version, click the box on the left to see the Mod Metadata and find the one with your unique alias instead of @pixies
Go ahead and test that your new mod works by running it! To do this, highlight any text on the page in your webpage ABOVE the PixieBrix Page Editor, right click and select the second context menu item that says 🧮 Score Highlighted Response with AI and confirm that a window alert shows the mod is running and the sidebar panel appears, like this!
🙈 Not working? Retrace your steps, and if you’re stuck head to the PixieBrix Slack and post in #learning - we’ll help you get sorted out asap!
3. Explore the mod's bricks
Before we start tweaking too much, you need to understand what you’re looking at. While a lot is going on under the hood, don’t worry - this is just a brief overview to help you get your bearings!
Each mod package is made up of one or more mods inside of it. In the AI Rate and Fix Response mod, there’s just one mod inside called Score Menu Item.
We’ll go from left to right reviewing each of these panels.
Click Score Menu Item on the first panel on the left, and we’ll analyze what’s happening in that mod.
The panel to right of the one that lists your mods is your brick pipeline. That panel starts with Context Menu and says Brick Actions. This shows you all the bricks that make up the mod. You can think of bricks as “steps” that perform a specific function.
If you had a mod for making a peanut butter sandwich, you’d have a brick for getting peanut butter, another brick for getting bread, and another brick for putting the peanut butter on the bread.
The middle panel that says Name at the top and has Configuration options is the place you specify what is happening in a brick. For instance, we’re setting a context menu with this brick. 🤯 Don’t worry too much about what is happening here, it’s okay if you don’t understand all the configuration items because you won’t need to change most of them when copying a mod!
The last panel on the right shows what you get from a brick. For instance, if you’re using a brick that scrapes data from a page, you can reference the scraped data and use that in another brick. You can preview the data it’s getting by running the mod and seeing the output in this section. Once again, don’t worry if this all looks confusing. You don’t technically need to know any of it to change a mod! The more you tinker, the more comfortable you’ll become with these things.
To customize a mod, you’ll likely end up tweaking something in one of the bricks. In this case, we want to tweak the prompt that asks OpenAI to rewrite the text and update the prompt to sound more like Leslie Knope (or whoever you’d like to sound more like). So let’s click around and find the brick that does that.
First, find the one called HTTP Request. It’s the third brick from the top.
We also need to change the prompt in the Create Chat Response with ChatGPT brick (7th brick from the top).
Scroll inside the settings of each of those bricks and you’ll see the prompt that we want to customize. You can tell because there are four sections that specify how to rewrite the prompt that we need to change.
🏁Checkpoint We covered a lot in this step! You’re ready to move on to the next step if you’ve found the Create Chat Response with ChatGPT brick and the prompt inside it, just like in the above screenshot. No need to do any other action items!
4. Customize the bricks
We’re nearly there! Now we need to change the prompt inside the mods to help ChatGPT rewrite the text to sound like Leslie Knope rather than just “friendly and personable”.
a) Edit the HTTP Request Brick
Let’s start with this one. We need to rewrite the prompt here to examine four criteria that you can score a response on based on the persona we’re working on. To do this, it’s as simple as typing in that box and rewriting exactly what we’d ask ChatGPT. I will write a bit to help it understand more about Leslie Knope, but if you want to do someone else, go for it! Feel free to use this, or customize the parts in bold as you see fit.
Copy and paste this into the value field of prompt in HTTP Request brick.
As of Jan 4th, you'll need to update the model to gpt-3.5-turbo-instruct instead of text-davinci-003. If you've activated the template it should default to this text, but you'll want to confirm your brick looks like the screenshot above.
🏁Checkpoint: You’re ready to edit the next brick when your HTTP Request brick looks something like this (your text might be slightly different if you are choosing another persona or brand description). Run your mod again by highlighting text on the page above the PixieBrix Page Editor, right-click to open the context menu, and select the second context menu item that says 🧮 Score Highlighted Response with AI . Confirm your mod still runs, but don’t worry too much about what you see in the sidebar yet.
b) Edit the Create Chat Response with ChatGPT Brick
Now we need to update one more brick - the one that actually asks ChatGPT to rewrite the selected text based on the brand!
Like in the HTTP Request brick, I’ll go to the Create Chat Response with ChatGPT brick and edit the response.
This is the prompt I used for sounding like Leslie Knope. You’re welcome to edit as you see fit for whoever you’d like to sound like (or if you think you can improve on my description of Leslie Knope, then you’re welcome to!). I bolded the parts I changed from the original prompt so you can see what to update.
Remember, the more descriptive you are, the better!
Once again, you can just copy and paste that text right in the content field, like this.
Lastly, look in the brick just below the prompt, and change Original Response to Original Content, like this:
🏁Checkpoint: your Create Chat Response with ChatGPT brick should look like the screenshots above. Again, the exact text may vary if you’re trying another persona or brand besides Leslie Knope.
And once more, let’s just check it runs by highlighting some text on the webpage above the Page Editor, then right click to select the second context menu item that says 🧮 Score Highlighted Response with AI . Now when your sidebar appears, you should actually see the rewritten text that has rewritten the selected text to sound more like Leslie Knope! Try it!
5. Update a few styles in the brick
You’ve now changed the prompt, but you likely noticed while running the mod that there’s a few style things we might want to change. These don’t necessarily impact the performance of the mod, as we are already seeing scores and newly written responses, but it's a bit of a confusing experience because…
we have two identical context menu items when highlighting selected text
and when the sidebar appears, the text for the criteria doesn’t show the new ones we’ve replaced
a) Fix the context menu
We’ll start here because this is the easiest change. Click the Context Menu brick from the Brick pipeline. It’s the first one!
Edit the title field to change the name of this context menu to be something different. I’m going to call mine “Sound like Leslie Knope”. You can call it literally anything you want.
🏁Checkpoint Confirm you’ve changed the text by going to the webpage above the Page Editor and highlighting some text. Right-click to open the context menu, and now instead of seeing two identical commands for “Score Highlighted Response with AI”, you should see one with the new title you just created, like this!
b) Fix the chart
Now, let’s update the text on the chart. We’re going to go to the Render Document brick. You can find this in the Brick pipeline inside of Display Temporary Information. Click Render Document.
On the right side in the data panel, you’ll see a preview of the Side Panel, along with a bunch of jargon you’re probably not interested in.
See the word positive in Positive Tone? We want to change that because we changed the criteria to be something else. Double-click the text “positive”, and you’ll see an editor appear to the left allowing you to update the text in that box. Simply replace “Positive Tone”, with the first criteria you set. If you’ve been following along with me using Leslie Knope, the first criteria was Friendly so I’ll swap Positive Tone for Friendly.
Do this for each of the four criteria, swapping with the criteria you used in your prompt. Here are the values you can use if you used the exact prompt in the example above.
| Original | New |
|---|---|
Positive Tone | Friendly |
Conciseness | Energetic |
Conversational | Collaborative |
Factual | Positive |
And one last thing while we’re here… let’s change the headline on the sidebar! Click AI Score in the preview on the data panel and then select the text on the left in the editor and change it to whatever you’d like. I’ll call it “Does this sound like Leslie Knope?” Click Show Live Preview to see the changes reflected in the sidebar!
🏁Checkpoint The changes we just made only changed text and shouldn’t actually have changed any performance of your mod. Just to be safe, go ahead and run it and confirm everything still works!
6. Save your mod
Once your edited mod behaves as expected, you are ready to save it. All you need to do is click the Save icon on the name of the mod in the leftmost panel.
A modal appears confirming you’d like to save.
Press the blue button to confirm you’d like to save, and now let’s test it!
🏁Checkpoint You’re ready to go if your mod is saved and there is NOT a red save icon appearing on the name of your mod.
7. Test your mod
Hopefully, you’ve been testing your mod along the way and if it’s worked so far, then it should work now!
I’ve been testing with text on the marketplace listing page for this mod since it’s in the same tab, just above the Page Editor. So I’ll do that again and select a paragraph from the description.
Then I’ll right-click, select the “Sound like Leslie Knope” action from the context menu, and voila! My sidebar scores that response and shows me how I can improve it to sound more like Leslie Knope!
Remember, this works with any highlighted text, even text you type in an input box. Once you save your mod, you can try this out on other pages and use it anywhere in Chrome!
🏁Final checkpoint Head to another page, like Twitter! Write some copy (like drafting a tweet), and test out your mod!
🎉 Celebrate and show the world!
Congrats! You did it! You’re a PixieBrix builder. Now you should feel comfortable editing a mod to customize it for specific use cases, without having to actually build a mod from scratch. How can you celebrate? Well, a couple ways!
📷 We’d love to see how you customized your mod! Feel free to take a screen capture and share in the #show-and-tell channel in the PixieBrix Slack community.
📣 Tell your friends! Tweet about it, make a video, or share on LinkedIn! Your friends and colleagues might be interested in building a creation of their own!
💪 Build another mod! Find another mod in the PixieBrix Marketplace and customize it to create another use case!
Last updated
