How to Integrate AI into Your Forms and Apps (not Chatbot)
You can interface with the Mensaflow AI directly through our APIs, connecting to the AI LLM rather than using the chatbot interface. With various mechanisms, you can design responses, integrate them into your applications, manage workflows, and even generate code snippets. See the demo below.
- In this demo, we will input a city and country (e.g., "Paris, France") to retrieve HTML code for a form display. The form will display an HTML select control showing IATA airport codes for the three closest cities to the user’s request.
- This API tester demonstrates how to use the API (click the link to see it in action):
api-sous-tester.html - To get the code, merely go into the inspect browser and copy the code.
- You can select from various LLM models and train them with your own data to achieve optimal results.
Note: Basic software development knowledge is required to implement these features.
The feature photo shows the execution with a glowing sparkle to show it is AI generated. Below is the results:
Integrating AI-driven API responses into an application allows for dynamic decision-making, automation, and enhanced user interactions. By making calls to an API that returns "Yes," "No," or even multiple-choice answers, an app can intelligently adapt to user inputs and automate workflows. Here are five practical use cases:
By leveraging AI-powered decision-making, applications can become more adaptive, responsive, and efficient, improving both user experience and operational effectiveness.
Here are the key elements of the tester's sample code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mensaflow LLM Query API</title>
<style>
.your_styles {
}
</style>
</head>
<body>
<h1>Mensaflow</h1>
<h3>Mensaflow LLM Query API</h3>
<div class="container">
<div class="input-group">
<input type="text" id="userInput" placeholder="Enter city, country...">
<button id="submitBtn">Submit</button>
</div>
<div id="response" class="hidden"></div>
<div id="responseAirports" class="hidden"></div>
<div id="airlinesSection" class="hidden">
<button id="findAirlinesBtn">Find Airlines</button>
<div id="responseAirlines"></div>
</div>
<button id="clearFormBtn">Clear Form</button>
</div>
<script>
// Configuration object
const config = {
apiUrlMfAPIQ: "<HOST>/api/v1/system/apiq",
apiKey: "<APIKEY>",
embedCode: "<EMBED_CODE>",
workspace: "mensaflow",
provider: "ollamaAPIQ",
model: "deepseek-r1:14b",
similarityThreshold: 0.10
};
// DOM Elements
const elements = {
userInput: document.getElementById('userInput'),
response: document.getElementById('response'),
responseAirports: document.getElementById('responseAirports'),
responseAirlines: document.getElementById('responseAirlines'),
airlinesSection: document.getElementById('airlinesSection'),
submitBtn: document.getElementById('submitBtn'),
findAirlinesBtn: document.getElementById('findAirlinesBtn'),
clearFormBtn: document.getElementById('clearFormBtn')
};
// API Service
const apiService = {
async makeRequest(prompt) {
const response = await fetch(config.apiUrlMfAPIQ, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${config.apiKey}`,
},
body: JSON.stringify({
prompt,
workspace: config.workspace,
provider: config.provider,
model: config.model
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
}
};
// UI Controller
const uiController = {
showLoading(isAirlines = false) {
const targetElement = isAirlines ? elements.responseAirlines : elements.response;
targetElement.classList.remove('hidden');
targetElement.innerHTML = 'Loading... <span class="sparkle">✨</span>';
},
showError(message, isAirlines = false) {
const targetElement = isAirlines ? elements.responseAirlines : elements.response;
targetElement.classList.remove('hidden');
targetElement.innerHTML = `<div class="error">Error: ${message}</div>`;
},
clearAll() {
elements.userInput.value = '';
elements.response.innerHTML = '';
elements.responseAirports.textContent = '';
elements.responseAirlines.innerHTML = '';
// Hide all response elements
elements.response.classList.add('hidden');
elements.airlinesSection.classList.add('hidden');
elements.responseAirports.classList.add('hidden');
},
updateResponse(content, htmlCode) {
elements.response.classList.remove('hidden');
elements.response.innerHTML = content;
elements.responseAirports.textContent = "HTML code:\n" + htmlCode;
elements.responseAirports.classList.remove('hidden');
elements.airlinesSection.classList.remove('hidden');
elements.responseAirlines.innerHTML = '';
}
};
// Event Handlers
async function handleAirportsRequest() {
const userInput = elements.userInput.value.trim();
if (!userInput) {
uiController.showError('Please enter a query');
return;
}
try {
elements.response.classList.remove('hidden'); // Show response div when starting request
uiController.showLoading(false);
const systemPrompt = `write the html code for a select input control for a webpage. The options for this select control should have the top 3 airports near ${userInput}. The first options will always be "<option>Please select an Airport</option>" Then, fill in "IATA airport code #1" with closest airport to ${userInput} IATA_CODE, and then for the next closest for #2 and #3.`;
const data = await apiService.makeRequest(systemPrompt);
const cleanedString = data.results.data.replace(/<think>[\s\S]*?<\/think>/gi, "");
const match = cleanedString.match(/<select\b[^>]*>[\s\S]*?<\/select>/i);
const bodyContent = match ? match[0] : '<select><option>Please select an Airport</option></select>';
uiController.updateResponse(bodyContent, bodyContent);
} catch (error) {
uiController.showError(error.message);
}
}
async function handleAirlinesRequest() {
const selectElement = document.querySelector("select");
const selectedOption = selectElement?.selectedOptions[0]; // Get selected <option>
if (!selectedOption || selectedOption.value === "Please select an Airport") {
uiController.showError("Please select an airport first", true);
return;
}
const selectedAirport = `${selectedOption.value} - ${selectedOption.textContent.trim()}`;
try {
uiController.showLoading(true);
const systemPrompt = `make me a list of airlines that fly into and out of the selected airport: ${selectedAirport}`;
const data = await apiService.makeRequest(systemPrompt);
const rawResponse = data?.results?.data || "";
const cleanedString = rawResponse.replace(/<think>[\s\S]*?<\/think>/gi, "").trim();
elements.responseAirlines.innerHTML = cleanedString
? `<div class="formatted-response">${cleanedString}</div>`
: '<div class="formatted-response">No airlines found</div>';
} catch (error) {
uiController.showError(error.message, true);
}
}
// Event Listeners
elements.submitBtn.addEventListener('click', handleAirportsRequest);
elements.findAirlinesBtn.addEventListener('click', handleAirlinesRequest);
elements.clearFormBtn.addEventListener('click', uiController.clearAll);
elements.userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleAirportsRequest();
});
</script>
</body>
</html>
End code block.