Quickstart: Call a LUIS endpoint using JavaScript

In this quickstart, pass utterances to a LUIS endpoint and get intent and entities back.

For this article, you need a free LUIS account in order to author your LUIS application.

Create LUIS endpoint key

You need a Cognitive Services API key to make calls to the sample LUIS app used in this walkthrough.

To get an API key, follow these steps:

  1. You first need to create a Cognitive Services API account in the Azure portal. If you don't have an Azure subscription, create a free account before you begin.

  2. Log in to the Azure portal at https://portal.azure.com.

  3. Follow the steps in Creating Endpoint Keys using Azure to get a key.

  4. Go back to the LUIS website and log in using your Azure account.

Understand what LUIS returns

To understand what a LUIS app returns, you can paste the URL of a sample LUIS app into a browser window. The sample app is an IoT app that detects whether the user wants to turn on or turn off lights.

  1. The endpoint of the sample app is in this format: https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/df67dcdb-c37d-46af-88e1-8b97951ca1c2?subscription-key=<YOUR_API_KEY>&verbose=false&q=turn%20on%20the%20bedroom%20light. Copy the URL and substitute your endpoint key for the value of the subscription-key field.

  2. Paste the URL into a browser window and press Enter. The browser displays a JSON result that indicates that LUIS detects the HomeAutomation.TurnOn intent and the HomeAutomation.Room entity with the value bedroom.

    JSON result detects the intent TurnOn

  3. Change the value of the q= parameter in the URL to turn off the living room light, and press enter. The result now indicates that the LUIS detected the HomeAutomation.TurnOff intent and the HomeAutomation.Room entity with value living room.

    JSON result detects the intent TurnOff

Consume a LUIS result using the Endpoint API with JavaScript

You can use JavaScript to access the same results you saw in the browser window in the previous step.

  1. Copy the code that follows and save it into an HTML file:

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Javascript LUIS endpoint query</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
    
    <body>
        <form ajax="true">
    
            <p>This uses the IoT HomeAutomation app ID unless you change the LUIS App ID.</p>
    
            <div>
                <div>
                    <label>LUIS App ID: </label>
                    <input id="appid" type="text" name="html" value="df67dcdb-c37d-46af-88e1-8b97951ca1c2" size="40" />
                </div>
    
                <div>
                    <label>LUIS Endpoint Key: </label>
                    <input id="endpointkey" type="text" name="html" value="" size="40" />
                </div>
    
                <div>
                    <label>LUIS utterance: </label>
                    <input id="utterance" type="text" name="html" value="Turn on the lights" size="40" />
                </div>
    
                <div>
                    <input type="submit" value="Submit" />
                </div>
    
        </form>
        <hr>
    
        <div id="prediction">
        </div>
    
    
        <script type="text/javascript">
            $(document).ready(function (e) {
    
                $("form[ajax=true]").submit(function (e) {
    
                    e.preventDefault();
    
                    var region = "westus";
                    var appid = $("#appid").val();
                    var endpointkey = $("#endpointkey").val();
                    var utterance = encodeURIComponent($("#utterance").val());
    
                    var params = $.param({
                        // These are optional request parameters. 
                        "timezoneOffset": "0",
                        "verbose": "true",
                        "spellCheck": "false",
                        "staging": "false"
                    });
    
                    var url = `https://${region}.api.cognitive.microsoft.com/luis/v2.0/apps/${appid}?subscription-key=${endpointkey}&q=${utterance}&${params}`;
    
                    $.ajax({
                        url: url,
                        type: "GET",
                        cache: false,
                        beforeSend: function (xhrObj) {
                            // Request headers
                            xhrObj.setRequestHeader("Content-Type", "application/json");
                            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", endpointkey);
                        },
                        success: function (returnhtml) {
                            $("#prediction").append("<p>" + JSON.stringify(returnhtml) + "<p>");
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            console.log(xhr.status);
                            console.log(thrownError);
                        }
                    });
    
                });
    
            });
        </script>
    </body>
    
    </html>
    
  2. Open the file in a browser. Enter your LUIS endpoint key in the form and select Submit.

    Html sample displayed in browser with LUIS results for Home Automation app

    The result display under the form.

Clean up resources

The two resources created in this tutorial are the LUIS endpoint key and the C# project. Delete the LUIS endpoint key from the Azure portal. Close the Visual Studio project and remove the directory from the file system.

Next steps