Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
API.AI Usage Example
<html>
<head>
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var accessToken = "<your agent access token>";
var subscriptionKey = "<your agent subscription key>";
var baseUrl = "https://api.api.ai/v1/";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
send();
}
});
$("#rec").click(function(event) {
switchRecognition();
});
});
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
updateRec();
};
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
}
setInput(text);
stopRecognition();
};
recognition.onend = function() {
stopRecognition();
};
recognition.lang = "en-US";
recognition.start();
}
function stopRecognition() {
if (recognition) {
recognition.stop();
recognition = null;
}
updateRec();
}
function switchRecognition() {
if (recognition) {
stopRecognition();
} else {
startRecognition();
}
}
function setInput(text) {
$("#input").val(text);
send();
}
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
}
function send() {
var text = $("#input").val();
$.ajax({
type: "POST",
url: baseUrl + "query/",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken,
"ocp-apim-subscription-key": subscriptionKey
},
data: JSON.stringify({ q: text, lang: "en" }),
success: function(data) {
setResponse(JSON.stringify(data, undefined, 2));
},
error: function() {
setResponse("Internal Server Error");
}
});
setResponse("Loading...");
}
function setResponse(val) {
$("#response").text(val);
}
</script>
<style type="text/css">
body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
div { position: absolute; }
input { width: 400px; }
button { width: 50px; }
textarea { width: 100%; }
</style>
</head>
<body>
<div>
<input id="input" type="text"> <button id="rec">Speak</button>
<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
</div>
</body>
</html>
@eduardonunesp

This comment has been minimized.

Copy link

commented Sep 17, 2014

Great, but the support from API.AI told me that subscription key is disabled. And i have some problems with CORS, is my fault ?

XMLHttpRequest cannot load https://api.api.ai/v1/query/. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
@pratikfromaspire

This comment has been minimized.

Copy link

commented Oct 19, 2014

Yes, It CORS issue.
You can start chrome with disable security option for testing.
[path]\chrome.exe --disable-web-security

Then test in chrome

@demobo-com

This comment has been minimized.

Copy link

commented Nov 7, 2014

Will this work in a Cordova web app? or do you have a Cordova plugin?

@artemgoncharuk

This comment has been minimized.

Copy link

commented Nov 14, 2014

We will release Cordova plugin next week.
CORS issues should also been fixed

@capatow

This comment has been minimized.

Copy link

commented Nov 19, 2014

Here is the link to the iOS/Android Cordova plugins: http://plugins.cordova.io/#/package/ai.api.apiaiplugin

@dimitridarras

This comment has been minimized.

Copy link

commented Jun 27, 2015

Wow! Nice.

@glennhefley

This comment has been minimized.

Copy link

commented Oct 19, 2015

I'm just getting an internal server error. Any clue what I'm dong wrong? Does it have to be running under SSL?

@AvnerHadjadj

This comment has been minimized.

Copy link

commented Dec 18, 2015

@giennhefley Was it because SSL ? I'am also getting error 500. Chrome indeed need ssl to save the authorization to use the micro...

@gkgkgkgk

This comment has been minimized.

Copy link

commented Jan 26, 2016

Um, I used this, and when i say "hi" it returns something about chuck norris.
Why?

@aman-saggu-git

This comment has been minimized.

Copy link

commented Feb 18, 2016

@artemgoncharuk
Hi i got it working in chrome , you are using webkit that means it is only working on chrome . Is there any solution for Firefox or all browsers

@sanketpardeshi

This comment has been minimized.

Copy link

commented Feb 22, 2016

Do you have implementation for Titanium Appcelerator??

@francesco2013

This comment has been minimized.

Copy link

commented Mar 23, 2016

"Um, I used this, and when i say "hi" it returns something about chuck norris.
Why?"

ahahahahaha

@saeemahmedpt

This comment has been minimized.

Copy link

commented Jun 29, 2016

Can some one help me on how to get this thing working in a simple Web browser?
PLease!!

@saeemahmedpt

This comment has been minimized.

Copy link

commented Jun 29, 2016

I am new to JS. I am trying to understand this, I saved this as an HTML file and then when I click on the Speak button,nothing happens.

Please help me :-(

@saeemahmedpt

This comment has been minimized.

Copy link

commented Jun 29, 2016

@bhallaheemanshu

Can You please help me on how did yu make this work in the Chrome.

@Dottenpixel

This comment has been minimized.

Copy link

commented Jan 20, 2017

@saeemahmedpt: check out my fork of this gist. I struggled for a while until I found ways to get this to work with the latest version to date.

@sriram23

This comment has been minimized.

Copy link

commented Jul 28, 2017

Where could I get the agent subscription key? Please someone help.

@AndrasHPataki

This comment has been minimized.

Copy link

commented Nov 21, 2017

Have a way to connect this service with the YahooWeatherForecast?

@SomeshTalk

This comment has been minimized.

Copy link

commented Feb 10, 2018

Please tell me what to put under Subscription key? Please help me!

@alkateb

This comment has been minimized.

Copy link

commented Mar 6, 2018

I am getting "Internal Server Error" i put the access token key but still not fixing the problem

@latestscoop

This comment has been minimized.

Copy link

commented Jun 11, 2018

I have created a working fork of this here: https://github.com/latestscoop/DialogFlow-HTML5
It has some additional HTML, CSS and jQuery to pretty things up a bit too.
The README.md file has some simple instructions to help too (@SomeshTalk, @sriram23, @saeemahmedpt)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.