Check for pridewashing with AI and PixieBrix
Tags: devpride, lowcode, ai, tutorial
Published: 2023-06-28 21:45:22


Ah, it's the time of year that every company has decided to come up with some sort of campaign or brand image that says "WE LOVE LGBQT+ FOLKS". 🙃

But sometimes those same companies have no history of _actually_ supporting the queer community. Support is way more than slapping a rainbow on your logo or offering pride swag. It's about using your influence as a business to push for supportive legislation, using profits to help causes that support the community, and providing an inclusive place for your customers, users, and employees. 

Although I'm a sucker for anything with a rainbow on it, I've been thinking about ways to make sure I'm not subject to "pridewashing". That's what it's called when a company or organization using Pride-themed marketing or messaging without actively supporting or advocating for the LGBTQ+ community.

Using PixieBrix + OpenAI, I created a tool that helps me check for pridewashing on websites that I use. And I plan to use this not just in June, but as part of my regular online shopping routine!

## What It Does

My new mod (that's what we call automations built with PixieBrix) grabs the name of the company of the current webpage you're on and asks ChatGPT if they support LGBTQ+ causes and communities. It then returns a response with an invitation to search and learn more with just a click. 

![Demo of how it works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wse360aatjscpf2etg0.gif)

### Let's break it down.

Right click on any webpage and select a button to **Check for pridewashing**.

![Context menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9b7mhgod5zsvqbhqrp0l.png)

An alert appears letting you know that PixieBrix is asking ChatGPT to look up the company. 


After a few seconds, a sidebar appears on the page, with more details and an explanation about anything the company has done to support the LGBTQ+ community. 


![Sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuambksvllshiytksvom.png)

**Remember - this is AI, and it's NOT always accurate. So do not rely solely on the results, but let this start your research!**

Below the explanation, you'll see a button to continue your research.

![Button to continue research](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kdv8ai450b2qi7vk1mc.png)

Clicking the button takes you to Google results about things that company has done to support the LGBQT+ community.

![Research button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uj4teo9916s8o1iochf.png)

It's simple, but it helps me be more aware of the companies I'm engaging with.

If you want to try it out, you can [activate it here](https://www.pixiebrix.com/marketplace/ada1dc95-c0fe-4aa8-9ab3-178ef24a96fa/check-for-pridewashing/?utm_medium=guest-blog&utm_source=britt&utm_campaign=devto-pride). But if you're wanting to know how this works and how you can build something similar, here's how I built it.

## How I Built It

I built this mod with PixieBrix, a browser based automation tool. It allows you to create automations built by small functions called "Bricks". Piecing together a couple actions, I'm able to make this whole workflow!

If you want to follow along, here's how to do it. _Comment if you get stuck and I'll be monitoring to help!_

1. Create a [free PixieBrix account](https://app.pixiebrix.com/?utm_medium=guest-blog&utm_source=britt&utm_campaign=devto-pride). _(You'll be prompted to add the PixieBrix Chrome Extension as you sign up.)_
2. Right click on any page, click **Inspect**, and then select the **PixieBrix** tab to open the Page Editor. 
![Chrome dev console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkrd1m1hm82za5sa3lqa.png)
3. Click the **Add** button in the top left of the panel, and select how you want to trigger your mod (_we call these starter bricks_. In my case, I used Context Menu but you could use Quick Bar or a Sidebar panel.
4. Configure the starter brick buy giving it a name and a title _(this is the caption that appears in the context menu)_. Lastly, scroll to the Sites section and click **All URLs**.
5. Click the + button in the middle panel to add another brick. 
![Brick actions panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghtt19v9v9k9v82dw5zj.png)
6. Search for ChatGPT and select the **Create a Chat Response with ChatGPT** brick. Click the blue **Add** button.
7. Now time to configure your prompt brick! I started with a prompt to ask it to tell me the name of the company based on the URL. It looks like this. 
![Configuring chatGPT brick in PixieBrix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3g3osh0d44gusj5jz7h.png)
8. Next, I'm going to make another prompt that asks ChatGPT to research the company. You can duplicate the previous brick _(click the copy button at the top of brick panel to the right of **Brick Actions**.)_ Here's the prompt I used. Feel free to adjust it!
```
you are a system that analyzes a company and determines if they are helping folks in the LGBQT+ community.  You will research a company to see if they have ever donated to any LGBQTQ causes. You will also research to see if they've ever supported any pro-LGBQT+ legislation. You'll also research if they've ever done anything to hurt the LGBQT+ community.


Please research {{@getCompany.choices[0].message.content}}. 

Based on your research, are they supportive of the LGBQT+ community? Please respond with a Yes or No, and an explanation. You can only cite information you know to be true, do not make up information about the company.
```
Scroll down to turn the temperature down. I changed it to .5 because I don't want it to make up information.
 
You're nearly done! Now it's about styling and referencing information from our bricks.

Add the **Display Temporary Information** brick. This allows you to create a sidebar panel to display the response from OpenAI. 
![How to use the editor for the Display Temporary Information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofbg38mecwgahq992tkv.png)

You'll need to tinker around with the Render Document brick a bit depending on what you'd like it to do. If you're interested in building with PixieBrix, best to get started with a [tutorial](https://docs.pixiebrix.com/tutorials) or join the [Slack Community](https://slack.pixiebrix.com/) and get support!

## What Else You Can Build with PixieBrix + OpenAI

I walked you through one example, but explore the bricks as you're building and you'll see there's a million different kind of things you can build. For instance, you could build a mod that recommends LGBQT+ causes for you to donate to whenever you spend money. 

You could use the Fetch Google Search Results to show recent news about a company in the sidebar, without even opening a new tab to go to Google.


## Oh no... is this all pridewashing?

And just in case you're wondering... how does Dev.to support the LGBQT+ community? The #devpride tag is [amplifying posts by queer authors](https://dev.to/devteam/share-your-expertise-stories-with-devpride-this-pride-month-39mc) to help their voices get past the algorithm this month. Last year they promoted some [special groups for LGBTQ+ folks in tech to join](https://dev.to/devteam/happy-lgbtqia-pride-month-1j7b), my favorite being [Out in Tech](https://outintech.com/), a community I joined in the last year that has led to new friends, more connections, and a lot of support and joy!

And how does PixieBrix support the LGBQT+ community? Well, for a small team, we have a high percentage of LGBTQ+ members on our team, over 25%! Rather than simply saying "we're inclusive", we actually do something about it by offering competitive pay and creating a safe workspace that brings in talent, regardless of identity. We didn't switch our logo, or create any rainbow swag this year though...