how to connect my chatbot user interface to APIAI

how to exactly connect my chatbot UI which i made it in html and css to API.AI server by using the token provided by API.AI and python sdk api.aienter code here below is the html code ..!

<!DOCTYPE html>
<html>
<head>
    <title>GUIDEBOT</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script>
    var GUIDEBOT = angular.module('GUIDEBOT', ['ui.bootstrap']);
    function CollapseDemoCtrl($scope) {
        $scope.isCollapsed = false;
    }

</script>
<body >
<div class="demo" ng-app="GUIDEBOT">
    <div class="chat-box" >
    <div class="user-photo"><img src="filebot.png"></div>
    <p class="bot-intro">SammY, Your personal guidebot!</p>
        <div class="chat-logs">
            <div class="chat self">
                <div class="user-photo"></div>
                <p class="chat-message">Hello !</p>
            </div>
            <div class="chat bot">
                <div class="user-photo"><img src="filebot.png"></div>
                <p class="chat-message">Hello ! What Would you like to know </p>
            </div>
             <div class="chat self">
                <div class="user-photo"></div>
                <p class="chat-message">Would like to know the courses worth 10 credits?</p>
            </div>

        </div>
        <div class="chat-form" ng-controller="CollapseDemoCtrl">
            <textarea></textarea>
            <button class="button" ng-click="isCollapsed = !isCollapsed">Send</button>
            <div collapse="isCollapsed">

            </div>
        </div>
    </div>
  </div>  
</body>
</html>

CSS(style.css) code is

*{
margin:0;
padding-bottom: 0pz;
font-family:tahoma, sans-serif;
box-sizing: border-box;


}

body{

background: #1ddced;

}

.demo{
position: absolute;
  bottom: 0px;
  right: 3px;
}

.chat-box{

width: 450px;
position: relative;
min-width: 390px;
height:600px;
background: #e6ffff;
padding: 25px;
margin: 20px auto;
box-shadow: 0 4px #ccc

}

.chat-box .bot-intro{

font-size:18px;
}


.user-photo  {
width:45px;
height:45px;
background :  #fff;
border-radius:50%;
overflow:hidden;
}

 .user-photo img{
width:100%;
}

.chat-logs{
padding: 10px;
width: 100%;
height: 450px;
background: #eee;
overflow-x: hidden;
overflow-y: scroll;
}

.chat-logs:: -webkit-scrollbar{
width:10px;
}
.chat-logs:: -webkit-scrollbar-thumb{
border-rad: 5px;
background: rgba(0,0,0,.1);
}

.chat{

    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
margin-bottom:10px;
}

.chat .user-photo{
width:45px;
height:45px;
background :  #fff;
border-radius:50%;
overflow:hidden;
}

.chat .user-photo img{
width:100%;
}

.chat .chat-message {
width: 80%;
padding: 10px;
margin: 5px 10px 0;
color: black;
border-radius: 10px;
font-size:18px;

}

.self .chat-message{
background: #4dff88;
}
.bot .chat-message{
background: #1ddced;
order: -1;
}

.chat-form{
margin-top:20px;
display:flex;
align-items: flex-start;

}

.chat-form textarea{
background: #fbfbfb;
width:75%;
height:50px;
border: 2px solid #eee;
border-radius:3px;
resize:none;
padding:10px;
font-size: 18px;
color: #333;

}

.chat-form textarea:focus {
background: #fff;
}

.chat-form textarea:: -webkit-scrollbar{
width:10px;
}
.chat-form textarea:: -webkit-scrollbar-thumb{
border-rad: 5px;
background: rgba(0,0,0,.1);
}


.chat-form  button{
background:1ddced;
padding: 5px 15px;
font-size:30px;
color:#fff;
border: none;
margin: 0px 10px;

box-shadow: 0 3px 0 #ccc;
cursor: pointer;
-webkit-transition: background .2px ease;
-moz-transition: background .2px ease;
-o-transition: background .2px ease;
}

.chat-form button:haver{
background: #13c8d9
}

And the Access tokes key provided by apiai is https://bot.api.ai/0a5185fc-2c39-4b22-bf1b-40a5eab7c8a2

The user will send a question to APi.AI in Natural language and it wil get converted into JSON , and depending on the response it will again get converted into natural language and show it on chat.!

How to connect this chatbot ui to apipi via python sdk or javascript?

Take a look at this example for a working case: https://gist.github.com/Dottenpixel/78d9a5487b4aeef32659a017058f75b9

So, using the code below, in your case you'd just need to link the send() function with an ng-click and bind your input field and upon click your sending to API.ai.

Then in API.ai check what you've set your callback URL as, and build an endpoint for processing the replies from API.ai. Let me know if you need an example for that

var accessToken = "<your agent access token>";
var baseUrl = "https://api.api.ai/v1/";

function send() {
  var text = $("#input").val();
  $.ajax({
    type: "POST",
    url: baseUrl + "query?v=20150910",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    headers: {
      "Authorization": "Bearer " + accessToken
    },
    data: JSON.stringify({
      query: text,
      lang: "en",
      sessionId: "<any random string>"
    }),
    success: function(data) {
      setResponse(JSON.stringify(data, undefined, 2));
    },
    error: function() {
      setResponse("Internal Server Error");
    }
  });
  setResponse("Loading...");
}