Step-by-step Tutorial: Build an AI App

In this tutorial we will build a simple Slack bot, which uses OpenAI to perform sentiment analysis on messages, and then store the result in Airtable.

We will need to access three separate web APIs, and obtain an API key for each of them. Follow the short tutorials below to retrieve API keys from each of them.

Web API setup

• Slack setup

• OpenAI setup

  • If you want to use Groq instead, go to Groq setup. The API is similar to OpenAI.

• Airtable setup

Create our bot

Getting started

First off, create a new module called Main (or any other name you might want to use).

Add these two nodes using the Node Palette:

• Http Endpoint

• Http Response

Connect the onRequest trigger on the endpoint to the execute trigger on the response node. Leave the status input at 200 (which means our response is considered OK). We now have a basic endpoint setup that just returns an empty response. Enter /slack-event in the path field of Http.Endpoint and select POST in the method dropdown.

Registering our endpoint with Slack

Next up, we need to register our endpoint with Slack. Go to https://api.slack.com/apps, select your app (which you can set up following the steps here), and then select the 'Event subscriptions' item from the left side menu.

Add the url of our endpoint in the text box marked 'Request url'. Our url will be 'midio.com/slack-event',,, . TODO(Kristian): Add the actual url here.

Slack will try to verify our endpoint by sending us a POST request with a JSON body which looks something like this: { "challenge": "somechallgengeid" }. To verify our endpoint, we must return the value in the challenge field.

To do this in Midio, we need the following nodes:

• Json.Parse - Converts JSON encoded text to Midio objects

• Map.ContainsKey - Returns true if the input map contains a given key

• Std.If - Lets us choose a different path based on whether the input value is true or false.

• Std.Log - Writes to the log panel (just to make it easier to see what happens)

Add and hook up the nodes as shown here:

Note that you can add the 'waypoint' node, which is the small node between Parse.value and HttpResponse.body, by first creating a connection between them, and then double clicking he connection.

What you've hooked up everything, go back to the slack portal and click retry.

If everything is working correctly, slack will display a success message, and you'll see a trace of the execution in the Midio editor. Hover or click the blue dots on the arrows to view the data which have passed through your code.

Cleanup

We can then clean up our code by converting some of the nodes into a function, which hides them behind a single node. Lets do this by selecting (hold shift and drag the mouse) the nodes which are only related to handling the challenge event. Right click on one of them, and select 'Convert to function' from the dropdown menu. Give the function a name, like 'Handle slack challenge event'.

Sentiment analysis

Next up, we will create a Midio function which uses the OpenAI completion API to perform sentiment analysis on the content of the slack event.

First, create an empty function by right clicking on the Main module in the left side panel, and then clicking 'Add'. Then select 'function' from the popup window. Name the function something like 'Perform sentiment analysis'.

We will now add inputs and outputs to the function. Select the function from the left side panel, then click the 'add input' button in the top center, and select 'trigger'. Name it something like 'execute'.

Then add another input, this time a 'data' input, name it something like 'message', and pick String as its type (if you're ever unsure about which type to pick for an input or ouput, you can select the type Any, which means we don't care about the type. Read more about types The Midio Language. Add outputs using the 'add output' button right next to the 'add input'-button. First add an output, select trigger, and name it 'continue'. Then add another output, pick data, and call it 'sentiment'. Select Number as its type when prompted for a type.

You should then have something like this:

Call the OpenAI API.

For this, we need a couple new functions and a new node type:

• Http.FetchUrl - lets us perform an http request to a url

• Math.NumberFromString - Lets us convert a string to a number

• Data objects - to create the data expected by the Open AI API.

Implement the function like this:

The data nodes can be built by adding a 'data object' node from the node palette (space bar), or by pasting the following JSON objects using control-v/cmd-v.

{
  "Authorization": "Bearer <your API Key>",
  "content-type": "application/json"
}

{
  "messages": [
    {
      "content": "You perform sentiment analysis on user messages. Return a number between 0 and 10, where 0 represents a very negative sentiment, and 10 represents a very positive sentiment. Return the number and the number only!",
      "role": "system"
    },
    {
      "content": "prompt",
      "role": "user"
    }
  ],
  "model": "gpt-3.5-turbo",
  "temperature": "0.7"
}

To convert the messages.1.content item to an input, hover it, and click the 'convert to input'-icon. This will allow you to hook it up to the function input we created earlier.

Add it to the main flow

We can now use this function in our main flow. Select the 'Main' module from the left side panel. Then add an instance of our new function using the node palette (space bar).

We can now test our flow by sendimg a message to a channel in our slack workspace. Note that we are using the Std.FormatLog function to print the resulting sentiment to the log. You can also hover/click on the blue dots appearing on the connections between nodes to inspect the data which has passed through our flow.

Store in Airtable

The last step of our slack bot, is to store the analysis along with the original message in our airtable database (which you set up here).

We start by creating a new function, like we did in the previous step. Name the function something like 'Store analysis in Airtable'.

The function also uses Http.FetchUrl to interact with the API. Implement the function as shown here:

Note that the url you pass to `Http.FetchUrl` should be constructed as follows:

https://api.airtable.com/v0/<your base id>/<your table id>

If you navigate to your base in the airtable dashboard, you can get these IDs from the url. For example:

https://airtable.com/appzte7M4AptpTo3T/tblg2Z1Th1mKEjc3i/viwWhPV8Uo8zVLbH4?blocks=hide
                     <-----base id --> <---table id --->

The headers object looks the same as the one we used with OpenAI, but make sure you fill in your Airtable API-key:

{
  "Authorization": "Bearer patl3AnvCPtzEDTOm.3e674e850a1993e30a96e1d890f3a078e4fc44ae1434d66d44d687e365b0d2d9",
  "Content-Type": "application/json"
}

{
  "records": [
    {
      "fields": {
        "Message": "message",
        "Sentiment": "sentiment"
      }
    }
  ]
}

Finally, add an instance of this function to the main flow, and hook it up. The final top level code should look like this:

Now, write another message in slack to verify that everything works as expected, and that you can see a new row appear in your airtable table.

A final bug

We've forgotten a small detail, which causes our bot to potentially receive the same event multiple times. Slack expects a '200 OK' response from us, to indicate that the event has been handled, but we currently only do this for the challenge event. Lets respond to normal events as well by adding an instance of Http.Response just before we start our sentiment analysis.