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

@eduardonunesp eduardonunesp 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

@pratikfromaspire pratikfromaspire 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

@demobo-com demobo-com 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

@artemgoncharuk artemgoncharuk 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

@capatow capatow 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

@dimitridarras dimitridarras commented Jun 27, 2015

Wow! Nice.

@glennhefley

This comment has been minimized.

Copy link

@glennhefley glennhefley 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

@AvnerHadjadj AvnerHadjadj 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

@gkgkgkgk gkgkgkgk 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

@aman-saggu-git aman-saggu-git 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

@sanketpardeshi sanketpardeshi commented Feb 22, 2016

Do you have implementation for Titanium Appcelerator??

@francesco2013

This comment has been minimized.

Copy link

@francesco2013 francesco2013 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

@saeemahmedpt saeemahmedpt 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

@saeemahmedpt saeemahmedpt 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

@saeemahmedpt saeemahmedpt 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

@Dottenpixel Dottenpixel 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

@sriram23 sriram23 commented Jul 28, 2017

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

@AndrasHPataki

This comment has been minimized.

Copy link

@AndrasHPataki AndrasHPataki commented Nov 21, 2017

Have a way to connect this service with the YahooWeatherForecast?

@SomeshTalk

This comment has been minimized.

Copy link

@SomeshTalk SomeshTalk commented Feb 10, 2018

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

@alkateb

This comment has been minimized.

Copy link

@alkateb alkateb 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

@latestscoop latestscoop 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.