PixieBrix Docs
CommunityTemplates
  • Welcome to PixieBrix!
  • Quick Start
    • Productivity Enthusiasts
    • Mod Developer
    • Team Member
    • Enterprise Admin
  • Activating Mods
    • Linking Your PixieBrix Account
    • Using the Marketplace
      • Finding Mods
      • Activating From the Marketplace
    • Activating Your Assigned Mods
    • Updating Mods
    • Troubleshooting
  • Developing Mods
    • Building Your First Mod
    • Developer Concepts
      • Types of Mods
        • Context Menu Item
        • Button
          • Troubleshooting Buttons
        • Sidebar Panel
        • Trigger
          • Working with Custom Events
        • Quick Bar Action
        • AI Copilot
        • What Are URL Match Patterns?
      • Text Template Guide
        • Basic Text Templates
        • Transforming Data with Filters
        • Writing Conditional Statements
        • Template Examples
      • Using Bricks
        • Brick Input Data Types
        • Bricks for Scraping Data
          • Retrieving Attributes from Elements
        • Bricks for Interacting with the DOM
        • Bricks for AI
          • Passing Custom Data to an LLM
      • Data Context
        • Types of Variables
        • Using Mod Variables
        • Using Page State (Advanced)
        • Referencing Variables
      • User Input
        • Show a Modal or Sidebar Form
        • Prompt for Input
      • Working With APIs
        • API Providers
        • Encoding URL Parts
        • Selecting and Transforming API Results
      • Working with Markdown
      • Control Flow
        • Conditional Field on Bricks
        • Control Flow Bricks
          • When to Use Control Flow Bricks
          • Control Flow Brick Output
          • Raising Exceptions/Errors
          • FAQs
      • Transforming Data
        • Using JQ in PixieBrix
        • Using JavaScript in PixieBrix
      • Building Interfaces
        • Understanding the Preview Panel
        • Styling Elements
        • Adding Advanced Elements
        • Custom Themes/CSS
      • Mod Product Telemetry
      • Advanced: Brick Runtime
    • Customizing Existing Mods
    • Sharing Mods
      • Packaging a Mod
      • Exposing Activation-Time Mod Options
      • Sharing a Mod With Your Team
      • Updating Published Mods
    • Troubleshooting
    • Mod Development Best Practices
    • Advanced: Workshop
  • Platform Overview
    • Page Editor
      • Open the Page Editor
      • Page Editor Components
        • Mod Listing Panel
        • Brick Actions Panel
        • Brick Configuration Panel
        • Data Panel
    • Admin Console
      • Campaigns
    • Extension Console
  • Managing Teams
    • Creating a Team
    • Inviting Members
    • Access Control
      • Roles
      • Groups
    • Managing Team Integrations
    • Assigning Mods
    • Billing
    • Advanced: Isolating Development, Test, and Production Environments
  • Deploying Mods
    • Deployment Keys
  • Integrations
    • Configuring Integrations
    • Integration Scenarios
    • Embed Web Apps via IFrames
    • Integrate with Desktop Apps via Custom URL Schemes
    • Airtable
    • Atlassian
    • Automation Anywhere
      • Configure Automation Anywhere Integration in PixieBrix
      • Embedding the Automation Co-Pilot
      • Running AA Bots via Control Room
      • Creating AARI Requests
      • Enhancing AARI Table Fields
      • Enhancing AARI Forms
      • AARI Extensions Enterprise IT Setup Guide
        • Point PixieBrix Extension to Staging AuthConfig App
      • Create a Control Room Certificate on Windows
    • Google Drive
      • Creating Google Drive Integration
      • Google Drive Bricks
      • Migrating from Google Sheet to Google Drive Integration
      • Reactivating Your Google Sheet Mods
      • Troubleshooting Google Integration Errors
      • Sheety: Sharing Google Sheets without Google Workspace
      • [LEGACY] Configure Google Sheets Integration
      • [LEGACY] Adding a Google Sheet to Mod Input
    • Guru
    • Hunter.io
    • HTTP Basic Authentication
    • Microsoft
      • Connect to Custom Azure Applications/APIs
      • Add a Power BI chart to the Sidebar
      • Microsoft Power Automate
      • Microsoft Office
        • Microsoft OneDrive / Files
        • Microsoft Excel
        • Microsoft Sharepoint
        • Microsoft Teams
        • FAQs & Troubleshooting
    • Notion
      • Public (OAuth2)
      • Internal (API Token)
    • OAuth2 Client Credentials
    • Ollama
    • OpenAI/ChatGPT
    • Pipedrive
    • Retool
      • Embed a Retool App
      • Trigger Retool Workflows
    • Robocorp Control Room Integration
    • Salesforce
    • SerpAPI
    • ServiceNow
    • Slack
    • Streamlit
    • Trello
      • Configure Trello integration
      • Find board and list IDs in Trello
    • UiPath
      • Running unattended bots via UiPath Cloud Orchestrator
      • Embed a UiPath App
      • Running local bots via UiPath Assistant
    • Val Town
    • Zapier
    • Zendesk
    • Advanced: Custom Integrations
  • Storing Data with Team Databases
  • Enterprise IT Setup
    • Authentication
      • Enabling Login with Microsoft
      • Enabling Login with Google
      • Setting Up SAML/SSO
    • Browser Extension Installation and Configuration
      • Browser Extension Installation Policy
        • Google Workspace Policy
        • Windows Group Policy/ADMX
        • Windows Registry
        • Citrix Profile Configuration
        • Advanced: Create a Windows Installer EXE
      • Browser Extension Configuration Policy
        • Extension Authentication Configuration
        • Microsoft Edge Mini Menu Configuration
        • Microphone and Audio Capture Configuration
        • Extension Logo Configuration
        • Managed Storage Schema
      • Browser Extension Security
    • Network/Email Firewall Configuration
    • Custom Branding and Themes
    • Security and Compliance
    • Performance
    • Version Control and Backups
    • Web Application Platform Configuration
    • Enterprise Troubleshooting
  • Developer API
    • Service Accounts
    • Making an API Request
    • Team Management APIs
    • Package Management APIs
    • Deployment APIs
    • Database APIs
    • Health Check APIs
    • OpenAPI Specification
    • Deprecated Resources
  • How To
    • Installing the PixieBrix Chrome Browser Extension
    • Changing the Quick Bar Shortcut
    • Pinning the Chrome Extension
    • Updating the Browser Extension
    • Installing a PixieBrix Pre-Release Build
    • Editing Pages with iFrames
    • Adding bricks to mods
    • Opening the PixieBrix Sidebar
    • Troubleshooting
      • Troubleshooting Bad API Requests
      • Troubleshooting Network Errors
      • Troubleshooting IndexedDB Errors
      • Troubleshooting Browser Extension Performance and Crashes
      • Troubleshooting extension corruption errors
    • Extend my PixieBrix Trial
  • Release Notes
    • 🏗️Release 2.3.1
    • ✅Release 2.3.0
    • 📜Release Notes Archive
      • ✅Release 2.2.10
      • ✅Release 2.2.9
      • ✅Release 2.2.8
      • ✅Release 2.2.7
      • ✅Release 2.2.6
      • ✅Release 2.2.5
      • ✅Release 2.2.4
      • ✅Release 2.2.3
      • ✅Release 2.2.2
      • ✅Release 2.2.1
      • ✅Release 2.2.0
      • ✅Release 2.1.7
      • ❌Release 2.1.6
      • ✅Release 2.1.5
      • ✅Release 2.1.4 (Hotfix)
      • ✅Release 2.1.3
      • ✅Release 2.1.2
      • ✅Release 2.1.1
      • ✅Release 2.1.0
      • ✅Release 2.0.7
      • ✅Release 2.0.6
      • ✅Release 2.0.5
      • ✅Release 2.0.4
      • ✅Release 2.0.3
      • ✅Release 2.0.2
      • ✅Release 2.0.1 (Hotfix)
      • ✅Release 2.0.0
      • PixieBrix Browser Extension 2.0.0 Migration Guide
      • ✅Release 1.8.14
      • ✅Release 1.8.13
      • ✅Release 1.8.12
      • ✅Release 1.8.11
      • ✅Release 1.8.10
      • ✅Release 1.8.9
      • ✅Release 1.8.8
      • ✅Release 1.8.7
      • ✅Release 1.8.6
      • ✅Release 1.8.5
      • ✅Release 1.8.4
      • ✅Release 1.8.3
      • ✅Release 1.8.2
      • ✅Release 1.8.1
      • ✅Release 1.8.0
      • ✅Release 1.7.41
      • ✅Release 1.7.40
      • ✅Release 1.7.39
      • ✅Release 1.7.38
      • 🚫Release 1.7.37
      • ✅Release 1.7.36
      • ✅Release 1.7.35
      • ✅Release 1.7.34
      • ✅Release 1.7.33
      • ✅Release 1.7.32
      • 🚫Release 1.7.31
      • ✅Release 1.7.30
      • ✅Release 1.7.29
      • ✅Release 1.7.28
      • ✅Release 1.7.27
      • ✅Release 1.7.26
      • ✅Release 1.7.25
      • ✅Release 1.7.24
      • ✅Release 1.7.23
      • ✅Release 1.7.22
      • ✅Release 1.7.21
      • ✅Release 1.7.20
      • ✅Release 1.7.19
      • ✅Release 1.7.18
      • ✅Release 1.7.17
      • ✅Release 1.7.16
      • ✅Release 1.7.15
      • ✅Release 1.7.14
      • ✅Release 1.7.13
      • ✅Release 1.7.12
      • ✅Release 1.7.11
      • ✅Release 1.7.10
      • ✅Release 1.7.9
      • ✅Release 1.7.8
      • ✅Release 1.7.7
      • ✅Release 1.7.6
      • 🚫Release 1.7.5
      • ✅Release 1.7.4
      • ✅Release 1.7.3
      • ✅Release 1.7.2
      • ✅Release 1.7.1
      • ✅Release 1.7.0
      • ✅Release 1.6.4
      • ✅Release 1.6.3
      • ✅Release 1.6.2
      • ✅Release 1.6.1
      • ✅Release 1.6.0
      • ✅Release 1.5.11
      • ✅Release 1.5.10
      • ✅Release 1.5.9
      • ✅Release 1.5.8
      • ✅Release 1.5.7
      • ✅Release 1.5.6
      • ✅Release 1.5.5
      • ✅Release 1.5.4
      • ✅Release 1.5.3
      • ✅Release 1.5.2
      • ✅Release 1.5.1
      • ✅Release 1.5.0
      • ✅Release 1.4.12
      • ✅Release 1.4.11
      • ✅Release 1.4.10
      • ✅Release 1.4.9
      • ✅Release 1.4.8
      • ✅Release 1.4.7
      • ✅Release 1.4.6
      • 🚫Release 1.4.5
      • ✅Release 1.4.4
      • 🚫Release 1.4.3
      • 🚫Release 1.4.2
      • ✅Release 1.4.1
      • ✅Release 1.4.0
      • 🚫Release 1.3.2
      • ✅Release 1.3.1
      • ✅Release 1.3.0
      • ✅Release 1.2.11
      • ✅Release 1.2.10
      • ✅Release 1.2.9
      • ✅Release 1.2.8
      • ✅Release 1.2.7
      • ✅Release 1.2.5
      • ✅Release 1.2.4
      • ✅Release 1.2.3
      • ✅Release 1.2.2
      • ✅Release 1.2.1
      • ✅Release 1.2.0
      • ✅Release 1.1.12
      • ✅Release 1.1.11
      • ✅Release 1.1.10
      • ✅Release 1.1.9
      • ✅Release 1.1.8
      • ✅Release: 1.1.7
      • ✅Release: 1.1.6
      • ✅Release: 1.1.5
      • ✅Release: 1.1.4
      • ✅Release: 1.1.3
      • ✅Release: 1.1.2
      • ✅Release: 1.1.1
      • ✅Release: 1.1.0
      • ✅Release: 1.0.3
      • ✅Release: 1.0.2
      • ✅Release: 1.0.1
      • ✅Release: 1.0.0
      • ✅Release: 0.2.2
      • ✅Release: 0.2.1
  • Tutorials
    • Developer Tutorials
      • Beginner
        • Search Yelp Reviews from OpenTable
        • Right-click Currency Conversion
        • Web Highlighter Tutorial
        • Trello Status Sidebar
        • Right-click Google Scholar Search
        • Google Dorking
        • Tweet a Link
        • Ask AI To Generate a LinkedIn Connection Request
        • How to Customize the AI Rate and Fix Mod
        • Right-click Translate Language
        • Basic Translation Tutorial
        • AI Bot Sidebar
        • Search and Highlight Words on a Page
      • Intermediate
        • Create a status nudge button in Github
Powered by GitBook
On this page
  • 1. Go to a user’s profile on LinkedIn
  • 2. Open the PixieBrix Page Editor
  • 3. Select a Quick Bar action
  • 4. Add an "Extract from Page" brick
  • 5. Add a "Create Text Completion with OpenAI" brick
  • 6. Add a "Display Temporary Information" brick
  • 🎉 Congrats!! You did it!!
  • 🐛 Troubleshooting

Was this helpful?

  1. Tutorials
  2. Developer Tutorials
  3. Beginner

Ask AI To Generate a LinkedIn Connection Request

PreviousTweet a LinkNextHow to Customize the AI Rate and Fix Mod

Last updated 7 months ago

Was this helpful?

🍎 Before you begin this tutorial, make sure you've completed the .

This tutorial guides you through building a PixieBrix mod using OpenAI to create a Quick Bar action that reads a user's LinkedIn profile, sends that data in a prompt to OpenAI, and then returns messages for a customized connection request to that user.

Don’t worry— this mod only generates the content of a message. It will not automatically send a message. This means you can test this and view responses without actually firing off any accidental connection requests!

1. Go to a user’s profile on LinkedIn

We’ll build this mod to search a user’s page, so it’s best to start there. Go to any user’s page except your own. If you need an idea, you’re welcome to 💁‍♀️.

2. Open the PixieBrix Page Editor

From the page, . If you’ve never done this, right-click on the page, then click Inspect at the bottom of the menu. Go to the PixieBrix tab.

You’re ready to move to the next step when your screen looks like this:

3. Select a Quick Bar action

To trigger our mod, we need to select a starter brick. These are found via the New Mod button next to the PixieBrix logo on the left sidenav. Click it and select Quick Bar Action.

You’ve just started your mod and are ready to configure the first brick!

In the Name field at the very top, set the value to something descriptive about the mod. I named mine the verbose yet descriptive Generate a personalized LinkedIn connection request message with AI.

The Action Title is the text that appears on the Quick Bar - this should be shorter but still clear about the action. I chose to name mine Get personalized connect message.

By default, the Contexts and Sites fields will suit this tutorial and can be ignored. If desired, you can configure an icon before the Action Title on the Command bar. I prefer to do this as it adds a bit of style and helps distinguish the actions, plus there are a lot of icons to choose from.

✅ Checkpoint! 🏁

To confirm your Quick Bar action brick is set up the way you’d like, click the keyboard shortcut you configured to toggle your Quick Bar. View your new Quick Bar action - it should be at the top! If it’s ready to go, move to the next step. (Don’t worry—you don’t have to save anything!)

4. Add an "Extract from Page" brick

Next, we need to scrape some info from the LinkedIn profile page to help OpenAI to make a personalized message.

To add another brick to our mod, click the + button below the Quick Bar Action brick in the Brick Actions pipeline.

This opens a modal where you can search for bricks, like steps, to add to our mod. Search for the Extract from Page brick and click + Add to add it into our mod.

Click the mouse button next to the Selector field and click the part of the page you want to scrape info from. PixieBrix will automatically apply a selector.

We will need to add multiple properties to get a comprehensive profile. In this case, we want to grab the following:

  • the name of the person

  • their description under their name

  • the current company they’re at

To do this, when you click the selector, the screen turns purple as you mouse over parts. Select the area, then rename the property value to the corresponding info. To make another property, click the Add Property button.

Clicking the mouse turns on the selector grabber and highlights elements on hover over a page to help you better select the right data to scrape

If the selector doesn’t grab the right elements, copy and paste these values into the value field for each property.

Property

Selector Value

name

.text-heading-xlarge

description

#main .text-body-medium

company

#main ul:nth-child(2) button:first

You will need to manually copy and paste the value for the company as the default selector value from clicking the company element does not work consitently.

✅ Checkpoint! 🏁 You’re ready to move on if your Extract from Page brick looks like this.

You can also test it out by running your mod and previewing the output on the right-side panel. It should show values for each of those properties. To run your mod, use the keyboard shortcut you configured to toggle the Quick Bar, and select the action.

5. Add a "Create Text Completion with OpenAI" brick

We’ll add another brick, just like we did before, by clicking the + icon below the Extract from Page brick in the Brick Actions panel. Search for the Create Text Completion with OpenAI brick and add it to the mod. There’s a lot you can customize and play around with here, and I encourage you to do that, but for the sake of the tutorial, start with these configurations and then tweak as you go.

The first two options (OpenAI integration and the model) will be configured by default so you can safely ignore these.

The next part is where it gets fun. This is where we’ll pass a prompt asking OpenAI to write a connection request. Feel free to customize the prompt however you’d like, but here’s what I’ve been using and found to work pretty well.

Change the second to last paragraph with information about yourself!

Given an individual, generate a personalized connection request message that would be appropriate for a professional networking context. The message should be unique and tailored to the individual's profile, highlighting any shared interests or experiences between the individual and myself. 

The individual describes themselves as {{@data.description}}. Currently they're working at {{@data.company}}. Their name is {{@data.name}}.

I describe myself as a community builder and content creator who enjoys building things and solving problems. I also enjoy productivity and automation. I also like to travel. I love to support other females in tech. I also like to learn more about indie builders and the things they're building. My name is Brittany. I currently work as Head of Developer Relations at PixieBrix.

The response should be less than 280 characters. Avoid using generic or overly sales-y language. Do not use hashtags.

Notice that inside the prompt, we’re referencing the information we scraped from that user’s profile, allowing OpenAI to get to know the person and make a personalized note. To reference pieces from another brick, you simply need to wrap it like {{@data}}.

How do you find @data.description? Easy! Return to the brick you want to reference information from and go to the right side to view the Output Panel. This shows everything you can reference from the brick. Click the copy button to copy the name of the variable you want to reference.

⚡ Pro tip: This is also useful for debugging and ensuring you get the expected information from each brick in your mod.

After setting the prompt, I recommend using these settings to help fine-tune the results and give you a couple of options in case you don’t like the first one that’s generated. (Turns out even robots sometimes need a couple of tries to get things right! 🤖)

You can read more about these different settings in the descriptions below each field.

✅ Checkpoint! 🏁

You’re ready to move to the next step when you have set the prompt and updated the fields to values in the above screenshot.

6. Add a "Display Temporary Information" brick

We are nearly finished, but first, we need to create a way to view the response from OpenAI. To do this, we’ll add one more brick to our mod. Click the + button and search for the Display Temporary Information brick. Add it to the mod.

This brick has a few nested steps. The top step is primarily descriptive. You can change the Title field to anything you’d like. I chose something simple, like AI Assist.

Click into the brick inside this brick called Render Document.

This is where we style our data! 🎉

Click the text that says Example Document on the right side, and you’ll see a Header box appear. Type something else in the Title field to see it updated in the preview on the right side. I named mine 💌 Customized Connection Requests for {{@data.name}} and changed it to an H3 heading type. You can use the options below to customize the text further by centering it, changing the color, adding margin, and more.

Next, we’ll need to add a row containing a List for displaying our responses. Click the three dots in the preview panel. See a lot of dots? Click the second set from the right side, as the screenshot shows. Click Row. Then click the three dots in the newly created box, and select List.

That's a lot - here’s a visual walkthrough of adding a list element.

Click the newly created List in the preview, and you can configure the data you want to show.

The Array value should be set to loop through the info we got from the Open AI brick. You already know how to find the output of a brick, but ill save you a minute - copy @transformed.completions and leave the Element Key value as is, set to element.

Select the Text type of item, which creates a new text box inside your List. Select the text that says “paragraph text…”

Replace the paragraph text with {{@element}} . This tells it to show the element text for each item so that it will show the actual response.

✅ Final Checkpoint! 🏁

Are you ready? Time to test it out! Use your keyboard shortcut to toggle your PixieBrix Quick Bar. Select the action, and watch a sidebar show personalized connection request messages for you and the user on the page!

Demo of generating a personalized connection request from OpenAI

🎉 Congrats!! You did it!!

🐛 Troubleshooting

Not working? Don’t worry—it happens to the best of us. Here are some tips for debugging.

  • Not getting any information? Check that each step of the brick has an output. Using the last panel on the right, you should be able to preview the output of each brick. See if any brick isn’t returning output, and then check if the selectors or configuration on that brick matches what we have in the tutorial.

Once you have completed these steps, you will have created a "mod" that uses PixieBrix and OpenAI to generate a customized LinkedIn connection request.

Sidebar pops up, but there’s no content? The Render Document brick is a bit tricky. We’re working on optimizing it to be a better experience for users, but it’s a lot to click through and can take a bit to get used to navigating in there. If you want to see how it should be configured, I recommend checking out the “source code”, aka . You can activate that mod, and then in your Page Editor, you’ll see precisely what that brick should look like to see what’s different in your setup. You can even copy the Display Temporary Information brick, paste it into your mod, and customize it.

🙋Need some help with building? , and we’ll gladly help you!

this published mod in the marketplace
Head over to the Slack Community
Developer Quick Start Guide
use mine
open the PixieBrix Page Editor