Using The Create Chat Completions API To Conduct Tool Calls In Storyline

Using The Create Chat Completions API To Conduct Tool Calls In Storyline

With the version 2.11 release of the eLearning Magic Toolkit plugin, we have provided the ability to use the Create Chat Completions API request performed in Storyline in order to request that the AI performs a tool function request as opposed to a normal natural language written response.

This feature is particularly useful if you are designing a feature like a software function that is designed to operate like an action taking place in the software itself, as opposed to something that results in a value being generated for the user to see immediately, such as requesting the AI to update a custom variable in Storyline based on whether or not something the AI has been told is true or false.

The important thing to note regarding the tool call functionality of Create Chat Completions is that it will not return a response for both the function call and a message that can be displayed to the user at the same time. Instead if you wish to have the AI generate a natural language message then this will need to be sent as a separate Create Chat Completions API request.

Here is an example of how the tool function call capability can be used in Articulate Storyline:

In this project I am using a text entry box to get the user to give an instruction to the UI, which is that they want to update the custom True/False variable.

I will use the following Execute JavaScript trigger code in order to provide this detail to the AI, as well as details on the tool call that the AI can operate in order to perform the user request:

var prompt_text = getVar("TextEntry");

var messages = []

var system_message = { role: "system", content: "You are a helpful and knowledgeable AI chatbot." };
var user_prompt00 = {role: "user", content: "Please conduct the following request by the user: " + prompt_text + ". You can use set_boolean_value at any time to change the custom boolean value per the user's request." };

// Define the tools
var tools = [
      {
            "type": "function",
            "function": {
                "name": "set_boolean_value",
                "description": "Set a custom boolean value",
                "parameters": {
                    "type": "object",
                    "properties": {
                        "value": {
                            "type": "boolean",
                            "description": "The boolean value to set",
                        }
                    },
                    "required": ["value"],
                },
            }
      }
];

messages.push(system_message);
messages.push(user_prompt00);

var sendData = {
'nonce': parent.storylineMagicNonce,
'value': JSON.stringify( messages ),
'api': 'chatCompletion', 
'jsonresponse': 'false',
'tools': JSON.stringify(tools),
};

sendData = JSON.stringify( sendData );

const myHeaders = new Headers();

myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-WP-Nonce", parent.storylineMagicRestNonce);

async function openai_req() {

fetch(parent.storylineMagicEndpoint, {
method:'POST',
headers: myHeaders,
body: sendData
})

.then(res => res.json())
.then(data => {
if ( Object.prototype.hasOwnProperty.call(data.data, 'data') ) {

var value = false;
try {
    value = JSON.parse(
        data.data.data.choices[0].message.tool_calls[0].function.arguments
    ).value;
} catch (e) {
    console.error("Error parsing boolean value:", e);
}

    setVar("My_Boolean_Value", value);
} else {
    console.error('Error fetching data:', error);
}

})
.catch(error => {
console.error('Error fetching data:', error);
})
};

openai_req();

Upon return of the response from the Create Chat Completions API, we need to extract the tool call data that the AI provided in order to then perform the action we wish to happen in the Storyline interface.

In this example, you can see that I am using this in order to get the tool call value generated by the AI, and then updating a custom variable in my project that I can then use to display that value to the user on screen, and perform any additional automation actions that I may wish:

.then(res => res.json())
.then(data => {
if ( Object.prototype.hasOwnProperty.call(data.data, 'data') ) {

var value = false;
try {
    value = JSON.parse(
        data.data.data.choices[0].message.tool_calls[0].function.arguments
    ).value;
} catch (e) {
    console.error("Error parsing boolean value:", e);
}

    setVar("My_Boolean_Value", value);
} else {
    console.error('Error fetching data:', error);
}

})
.catch(error => {
console.error('Error fetching data:', error);
})
};

This then results in the outcome that I desire. Note how the custom variable has changed to true in the bottom text based on the user action: