Skip to content

Instantly share code, notes, and snippets.

Last active September 4, 2023 06:45
Show Gist options
  • Star 55 You must be signed in to star a gist
  • Fork 32 You must be signed in to fork a gist
  • Save ystrot/e799f338ab9849c90b04 to your computer and use it in GitHub Desktop.
Save ystrot/e799f338ab9849c90b04 to your computer and use it in GitHub Desktop.
API.AI Usage Example
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=""></script>
<script type="text/javascript">
var accessToken = "<your agent access token>";
var subscriptionKey = "<your agent subscription key>";
var baseUrl = "";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
$("#rec").click(function(event) {
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
recognition.onend = function() {
recognition.lang = "en-US";
function stopRecognition() {
if (recognition) {
recognition = null;
function switchRecognition() {
if (recognition) {
} else {
function setInput(text) {
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
function send() {
var text = $("#input").val();
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");
function setResponse(val) {
<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%; }
<input id="input" type="text"> <button id="rec">Speak</button>
<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
Copy link

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 Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Copy link

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

Then test in chrome

Copy link

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

Copy link

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

Copy link

capatow commented Nov 19, 2014

Here is the link to the iOS/Android Cordova plugins:

Copy link

Wow! Nice.

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

Do you have implementation for Titanium Appcelerator??

Copy link

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


Copy link

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

Copy link

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 :-(

Copy link


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

Copy link

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

Copy link

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

Copy link

Have a way to connect this service with the YahooWeatherForecast?

Copy link

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

Copy link

alkateb commented Mar 6, 2018

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

Copy link

I have created a working fork of this here:
It has some additional HTML, CSS and jQuery to pretty things up a bit too.
The 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