I’m developing a generative AI app using Azure AI Studio. Is it possible to embed the chat iframe window on my website, but passing along a JWT-Token (jsonp, or via args), so that the AI app can perform HTTP actions in my behalf?
If not, what other alternatives are there?
New contributor
user15778094 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can achieve the goal with the code below integrated into a functional AI Bot API (known generative LLMs or available endpoints) in Azure AI Studio, a jason JWT token will require to be used with NodeJS or a similar library combination:
const jwt = require('jsonwebtoken');
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization']
const token = authHeader && authHeader.split(' ')[1]
if (token == null) return res.sendStatus(401)
jwt.verify(token, process.env.TOKEN_SECRET as string, (err: any, user: any) => {
console.log(err)
if (err) return res.sendStatus(403)
req.user = user
next()
})
}
Installation:
Recommended to add it to this template to embed the AI Bot, this may require a combination of the code snippets or API for the LLM selected and deployed in Azure AI Studio (the access token or secret key),
Then add it in a WebApp, modify it in the Node application:
The source code for this WebApp template with Embedded Bot is (you can customize it):
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Inspiration Search Bar</title>
<link rel="stylesheet" href="./style.css">
</head>
<style>
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #fff;
border-radius: 12px;
box-shadow: -2px 8px 12px rgba(0, 0, 0, 0.2);
color: black;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 180px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
background-color: white;
border-radius: 15px;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
box-shadow: -2px 8px 12px rgba(0, 0, 0, 0.2);
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}
/* When the textarea gets focus, do something */
.form-container textarea:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/send button */
.form-container .btn {
background-color: #fff;
border-radius: 12px;
box-shadow: -2px 8px 12px rgba(0, 0, 0, 0.2);
color: black;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 50%;
margin-bottom: 10px;
opacity: 1;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
<body>
<!-- partial:index.partial.html -->
<div id="search">
<svg viewBox="0 0 420 60" xmlns="http://www.w3.org/2000/svg">
<rect class="bar" />
<g class="magnifier">
<circle class="glass" />
<line class="handle" x1="32" y1="32" x2="44" y2="44"></line>
</g>
<g class="sparks">
<circle class="spark" />
<circle class="spark" />
<circle class="spark" />
</g>
<g class="burst pattern-one">
<circle class="particle circle" />
<path class="particle triangle" />
<circle class="particle circle" />
<path class="particle plus" />
<rect class="particle rect" />
<path class="particle triangle" />
</g>
<g class="burst pattern-two">
<path class="particle plus" />
<circle class="particle circle" />
<path class="particle triangle" />
<rect class="particle rect" />
<circle class="particle circle" />
<path class="particle plus" />
</g>
<g class="burst pattern-three">
<circle class="particle circle" />
<rect class="particle rect" />
<path class="particle plus" />
<path class="particle triangle" />
<rect class="particle rect" />
<path class="particle plus" />
</g>
</svg>
<input type=search name=q aria-label="Search for inspiration" placeholder="The World's Local Search Engine. Search Here." />
</div>
<button class="open-button" onclick="openForm()">ChatBot</button>
<div class="chat-popup" id="myForm">
<link rel="stylesheet" href="chatUI.css">
<meta name="viewport" content="width=device-width">
<style>
#chatbot {
width: 100%;
height: 60vh;
}
</style>
</head>
<body>
<div id="chatbot">
<script src="d3.v4.min.js"></script>
<script src="index-d3.min.js"></script>
<script type="text/javascript">
var chat = chatUI(d3.select('#chatbot'));
var conversation = {},
userName = null;
conversation.init = function () {
chat.addBubble({ type: 'text', value: 'Hi there!', class: 'bot', delay: 1000 }, function () {
//After initial bubble is presented, ask the user for her name
chat.addBubble({ type: 'text', value: 'Welcome to RhinoStreet!<br>We would like to know more about you!<br>What is your name?', class: 'bot', delay: 0 });
//Show the input container
chat.showInput(conversation.nameResponse);
});
};
conversation.nameResponse = function (name) {
userName = name;
//As input arrives, present the input
chat.addBubble({ type: 'text', value: userName, class: 'human', delay: 0 });
//Hide the input container
chat.hideInput();
//And welcome the user with her name
chat.addBubble({ type: 'text', value: 'Hello ' + userName, class: 'bot', delay: 500 }, function () {
chat.addBubble({ type: 'text', value: 'Do you want to know my name?', class: 'bot', delay: 500 }, function () {
chat.addBubble({ type: 'select', value: [{ label: 'Yes, please' }, { label: 'No, it is okay' }], class: 'human', delay: 0 }, conversation.questResponse);
});
});
};
conversation.questResponse = function (mood) {
switch (mood.label) {
case 'Yes, please':
chat.addBubble({ type: 'text', value: 'My name is BOT.', class: 'bot', delay: 500 });
chat.addBubble(
{ type: 'text', value: 'How may I help you?', class: 'bot', delay: 4000 }
);
chat.addBubble({ type: 'text', value: 'You can visit us a at <b><i><a href="https://www.rhinostreet.com/">RhinoStreet</b></i>', class: 'bot', delay: 8000 });
break;
case 'No, it is okay':
chat.addBubble({ type: 'text', value: 'OK :(', class: 'bot', delay: 500 });
break;
}
};
// conversation.init();
</script>
</div>
<script>
function bottom() {
document.getElementById('chat-popup').scrollIntoView();
//window.setTimeout(function () { top(); }, 2000);
}
function openForm() {
document.getElementById("myForm").style.display = "block";
conversation.init();
bottom();
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
</body>
</html>
You can download the scripts and dependencies from here: https://github.com/svift-org/ChatUI
And the combination with JWT here: https://www.digitalocean.com/community/tutorials/nodejs-jwt-expressjs
New contributor
jbsidis is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2