How to use Airtop with Make

Overview

Make is a platform for building and deploying no-code automations. Airtop can be easily used inside Make to access content from the web and interact with sites. In addition, Airtop can be used to have your users authenticate into any sites and allow the automation to subsequently use the site.

Installation

To install Airtop in Make, simply search for “Airtop” when adding a new module.

Find Airtop in Make

The first module you’ll want to use is the “Create Session” module. For more information on creating sessions, see the Creating a Session guide.

Now create a connection, which will prompt you to add your Airtop API key. You can get your API key from the Airtop Portal.

Create a connection

Creating your first automation

Let’s build a simple automation that will navigate to the Banana Wikipedia page and ask a simple question about the page.

You’ll want to chain the following modules:

  1. Create Session - Create a session to use Airtop in your automation.

  2. Create New Browser Window - Create a new browser window inside your session to navigate to the Banana Wikipedia page.

  3. Page Query - Query the page to ask it any question. In this case we’ll ask it to answer what this page is about. See the Page Query guide for more information.

    Page Query
  4. Terminate Session - Terminate the session and clean up resources.

Here is an example of what the automation will look like once you’re done and you’ve run it once.

Flow of the automation

The output of the Page Query module will contain the answer to our question.

Output of the automation

Modules

Session Modules

Create Session

Creates a new Airtop browser session. This is typically the first module you’ll use in any automation. The session serves as a container for all browser windows and operations. For more information on sessions, see the Creating a Session guide.

Terminate Session

Closes a session and cleans up all associated resources. Always use this as the final step in your automation to prevent resource leaks.

Window Modules

Create New Browser Window

Creates a new browser window within an existing session. You can optionally specify a URL to load immediately after creation. Each session can have multiple browser windows. For more information on browser windows, see the Windows guide.

Load URL

Navigates an existing browser window to a specified URL. Use this module when you need to visit different pages within the same window.

Get Browser Window Info

Retrieves information about a browser window, including the Live View URL. For more information on Live Views, see the Live Views guide.

Act Modules

Click an Element

Executes a click action on a specified element using a natural language description. For more information on clicking elements, see the Clicking an Element guide.

Type

Executes a type action on a specified element. Useful for filling out forms or entering text in input fields. For more information on typing, see the Typing guide.

Hover on an Element

Performs a mouse hover action over a specified element. Helpful for triggering hover-based menus or interactions. For more information on hovering, see the Hovering guide.

Extract Modules

Page Query

Allows you to ask questions about or extract specific information from the current page. The AI will analyze the page content and provide relevant answers. For more information on querying a page, see the Page Query guide.

Smart Scrape

Extracts structured data from a webpage and returns it in markdown format. Ideal for content extraction and data collection tasks. For more information on smart scraping, see the Smart Scraping guide.

Authentication Modules

Create Human Auth Request

Initiates a request for human authentication. Use this when you need a user to log into a service manually. Returns a request ID for tracking.

Get Human Auth Request

Retrieves the current status and details of a human authentication request using its ID.

Update Human Auth Request

Modifies an existing human authentication request. Required when you need to update the status of the request.

Delete Human Auth Request

Removes a human authentication request from the system once it’s no longer needed.

Authentication

One common use case for Airtop is to have your users authenticate into a site, save a profile for the authenticated session, and subsequently allow your automation to use the authenticated profile to perform actions autonomously.

In order to accomplish that flow, you need to interrupt your automation flow and generate an authentication request to send to your user. Here is an example of a flow that accomplishes that.

This flow logs into the OpenAI platform site and fetches the monthly spend for the current and previous month.

We need to create 3 scenarios in order to accomplish this flow:

  1. The primary scenario that checks if the user is authenticated, branches to the authentication flow if necessary, or accomplishes the main task if the user is authenticated. If the user is not authenticated, it will create an authentication request and send it to the user.
  2. A scenario that creates a session for authentication when the user initiates the authentication flow.
  3. A scenario that terminates the session for authentication and saves the profile to be used in the primary scenario.

Because the authentication flow is highly asynchronous, we have to split the flow into 3 scenarios and connect them via webhooks. This is a limitation of Make’s platform.

Primary Scenario

OpenAI Flow

This scenario is the main entrypoint for the automation. You can schedule this scenario to run on a regular basis, or you can run it manually. It starts by fetching a profile ID from a data store. You’ll need to create a data store to save your profile ID. You can have a single data store for all profiles and use the key parameter to identify the profile ID for the flow. The value will just be a string where you store the profile ID.

The first part of the flow uses the profile ID and creates a session that opens the OpenAI platform site. It then checks if the user is authenticated. If the user is authenticated it will proceed to the top branch of the flow and fetch the monthly spend for the current and previous month. If the user is not authenticated it will proceed to the bottom branch of the flow and create an authentication request.

In order to create an authentication request, we’ll need to use the Create Human Auth Request module. This module will create an authentication request and send it to the user. In our case we use Slack to send the request to the user, but you can use any other mechanism you like.

Create Authentication Request

This module allows you to customize the UI presented to the user. The most important part are the 2 webhook URLs. These webhooks get called when the user either initiates or completes the authentication flow. We’ll create each of these webhooks in the next 2 scenarios.

The output of this module is an authentication request ID and URL. You will need to send the URL to the user. It will look like this: https://portal.airtop.ai/integration-auth?id=123e4567-e89b-12d3-a456-426614174000.

Authentication Request Scenario

The authentication request scenario starts with a Webhook module. This webhook URL should be the first webhook you use when creating the authentication request in the primary scenario.

Authentication Request Scenario

Upon opening the auth link, the user is presented with UI that asks them to initiate the authentication flow.

Login Prompt

Once the user begins the flow, this scenario is called via the webhook URL. It will create a session for authentication and send the user to the OpenAI platform site to log in using a Live View.

Authentication Request Scenario

Because the user is not authenticated yet, the user will be prompted to login. This scenario then updates the authentication request with the status of the authentication flow (loaded) and the Live View URL, which is presented to the user.

Authentication Completed Scenario

This scenario begins with another Webhook module. This webhook URL should be the second webhook you use when creating the authentication request in the primary scenario.

Authentication Completed Scenario

Once the user has completed the authentication flow and clicked on the “I’ve logged in” button, the authentication request 2nd webhook is called. This triggers this scenario that will terminate the authentication session and save the profile to the data store.

Once the process is complete, this scenario calls the primary scenario again, which should now proceed to the top branch of the flow and fetch the monthly spend for the current and previous month.

Built with