How to Integrate AI into Your Forms and Apps
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:
- Automated Customer Support Routing: When a user submits a query, the API determines the complexity level and responds with a multiple-choice answer, directing the request to a chatbot, knowledge base, or live support agent.
- Dynamic Content Filtering: An AI-driven API reviews user-generated content and returns "Yes" (content approved), "No" (content blocked), or a list of recommended edits for moderation.
- Smart Workflow Automation: A business process app can ask an API whether an invoice should be approved, flagged for review, or escalated based on predefined conditions and AI analysis.
- Interactive AI-Powered Surveys: An API dynamically selects follow-up questions based on previous responses, returning either "Yes/No" or multiple-choice options to guide the survey logic.
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.