Brand new Azure AI Agent Service at your fingertips|Complete Guide 2025
- Rohit.Rs
- Feb 18
- 6 min read
Introduction:
Imagine having the power to create intelligent AI agents without worrying about complex coding or infrastructure management. That’s exactly what Azure AI Agent Service brings to the table. This fully managed service simplifies the entire process—allowing developers to build, deploy, and scale AI agents effortlessly.
What once took hours of coding and debugging can now be done in just a few lines! No more wrestling with infrastructure headaches—just pure innovation at your fingertips.
To showcase its capabilities, we’ve built a web application that makes handling documents easier than ever. Upload files, let AI summarize them, and instantly access those summaries whenever needed. In this article, we’ll take you through the architecture and implementation of this solution, inspired by our journey with Azure AI Foundry and secure AI integrations. Get ready to see how Azure AI Agent Service is transforming the way we work with AI.
Architecture Overview
Our Azure AI Agent Service WebApp is designed to seamlessly bring together multiple Azure services, ensuring a smooth and efficient user experience. Here’s how everything works together:
Azure AI Projects & Azure AI Agent Service: These form the heart of our system, using AI to summarize uploaded documents and generate meaningful titles, making information more accessible.
Azure Blob Storage: Acts as a secure digital vault, storing both the original and processed documents, ensuring data integrity and easy retrieval.
Azure Cosmos DB: Works as an intelligent organizer, keeping metadata and summaries structured for quick and effortless access.
Azure API Management (APIM): Acts as a security gatekeeper, managing and safeguarding API endpoints to ensure only authorized access to backend services.
This well-structured architecture guarantees a frictionless journey—from uploading a document to AI processing and storage—giving users instant access to clear, summarized content without any hassle.
Azure AI Agent Service – Frontend Implementation
The frontend of the Azure AI Agent Service WebApp is designed with Vite and React, ensuring a smooth, fast, and user-friendly experience. Every element is built to feel intuitive, making interactions effortless for users.
Key Features:
Real-time AI Chat Interface: Imagine having a virtual assistant at your fingertips—ready to answer questions, provide insights, and engage in meaningful conversations in real time.
Document Upload Functionality: Need to process important files? Simply upload documents in multiple formats, and the backend AI takes care of the rest, analyzing and extracting key details effortlessly.
Document Repository: No more losing track of uploaded files! Every document appears neatly listed with a summary and a convenient download link for easy access.
At the heart of this experience is ChatApp.jsx, the main UI component. You can chat with the AI agent for everyday queries, but if you type “upload:”, a hidden upload menu magically appears, giving you access to advanced document-handling features.
This system isn’t just about functionality—it’s about creating a seamless and engaging user experience, where AI feels less like a tool and more like an intelligent assistant that understands your needs.
Azure AI Agent Service – Frontend & Backend
Our backend, built using Express.js, acts as the central hub that connects multiple services to ensure smooth AI-powered document processing. Here's what it handles:
File Uploads: When users upload documents, they are securely stored in Azure Blob Storage.
AI Processing: Our system utilizes Azure AI Projects to analyze documents, extract key information, summarize content, and generate relevant titles.
Metadata Storage: Once processed, document summaries and metadata are saved in Azure Cosmos DB for quick and easy retrieval.
The Challenge: Persistent AI Agents
One of the biggest challenges we faced was ensuring that our AI agents weren’t recreated every time the backend restarted. Constantly spinning up new agents would be inefficient, causing unnecessary delays and resource consumption. To solve this, we implemented a structured approach with dedicated modules for managing the Azure AI Agent Service and agent creation.
Backend Implementation: AI Agent Initialization
To keep things efficient, we handle AI initialization in a single module:
const { DefaultAzureCredential } = require('@azure/identity');
const { SecretClient } = require('@azure/keyvault-secrets');
const { AIProjectsClient, ToolUtility } = require('@azure/ai-projects');
require('dotenv').config();
// Keep global instances for reusability
let aiProjectsClient = null;
let agents = {
chatAgent: null,
extractAgent: null,
summarizeAgent: null,
titleAgent: null
};
async function initializeAI(app) {
try {
// Securely fetch AI credentials
const keyVaultName = process.env.KEYVAULT_NAME;
const keyVaultUrl = `https://${keyVaultName}.vault.azure.net`;
const credential = new DefaultAzureCredential();
const secretClient = new SecretClient(keyVaultUrl, credential);
const secret = await secretClient.getSecret('AIConnectionString');
const AI_CONNECTION_STRING = secret.value;
// Initialize AI Projects Client
aiProjectsClient = AIProjectsClient.fromConnectionString(AI_CONNECTION_STRING, credential);
// Setup AI tools
const codeInterpreterTool = ToolUtility.createCodeInterpreterTool();
const tools = [codeInterpreterTool.definition];
const toolResources = codeInterpreterTool.resources;
console.log('🚀 Initializing AI Agents...');
// AI Agents Creation
agents.chatAgent = await aiProjectsClient.agents.createAgent("gpt-4o-mini", {
name: "chat-agent",
instructions: "You are a helpful AI assistant that provides clear and concise responses.",
tools,
toolResources
});
console.log('✅ Chat Agent is ready!');
agents.extractAgent = await aiProjectsClient.agents.createAgent("gpt-4o-mini", {
name: "extract-agent",
instructions: "Process and clean text while preserving its original structure.",
tools,
toolResources
});
console.log('✅ Extract Agent is ready!');
agents.summarizeAgent = await aiProjectsClient.agents.createAgent("gpt-4o-mini", {
name: "summarize-agent",
instructions: "Generate concise summaries that highlight the most important details.",
tools,
toolResources
});
console.log('✅ Summarization Agent is ready!');
agents.titleAgent = await aiProjectsClient.agents.createAgent("gpt-4o-mini", {
name: "title-agent",
instructions: `You are responsible for creating document titles. Follow these rules:
1. Only return the title, no extra explanations.
2. Keep it under 50 characters.
3. Focus on the document’s key theme.
4. Use Title Case capitalization.
5. Avoid special characters or quotes.
6. Ensure the title is clear and descriptive.
Example good titles:
- Digital Transformation Strategy 2025
- Market Analysis: Premium Chai Tea
- Cloud Computing Implementation Guide`,
tools,
toolResources
});
console.log('✅ Title Agent is ready!');
// Store instances globally
app.locals.aiProjectsClient = aiProjectsClient;
app.locals.agents = agents;
console.log('✅ All AI Agents have been successfully initialized!');
return { aiProjectsClient, agents };
} catch (error) {
console.error('❌ Failed to initialize AI Agents:', error);
throw error;
}
}
// Export initialization function and agents
module.exports = {
initializeAI,
getClient: () => aiProjectsClient,
getAgents: () => agents
};
Final Thoughts
Our backend integrates four AI-powered agents that work together to automate document handling, from text extraction to title generation. Thanks to careful planning and an optimized setup, these agents persist across backend reloads, ensuring smooth performance without unnecessary overhead.
Once deployed, we can find all our AI agents within the Azure AI Agent Service Portal, ready to handle incoming documents efficiently.
At the same time, each interaction is stored and managed as thread and that’s how we are interacting with the Azure AI Agent Service.
Deployment and Security of Azure AI Agent Service WebApp
Deploying our Azure AI Agent Service WebApp securely and efficiently is our top priority. We’ve taken careful steps to ensure everything runs smoothly while keeping sensitive data protected.
How We Secure Our WebApp:
Azure API Management (APIM): We use this to safeguard our API endpoints, ensuring only authorized users can access them. It also helps us monitor API traffic and manage requests efficiently.
Azure Key Vault: Security is everything, and that’s why we rely on Azure Key Vault to store and manage sensitive data like API keys and connection strings. This keeps crucial information encrypted and out of reach from potential threats.
Every request to our backend service is secured with Azure API Management Basic Tier, ensuring only necessary endpoints are accessible. Each endpoint is carefully mapped to match our WebApp’s backend, preventing unauthorized access and keeping operations seamless and efficient.
By taking these steps, we’re not just deploying an AI service—we’re building a secure, reliable, and trustworthy system that protects user data and ensures smooth performance.
Also we are storing the AIConnectionString variable in Key Vault and we can move all Variables in Key Vault as well, which i recommend !
Get Started with Azure AI Agent Service
Getting started with Azure AI Agent Service is easier than you might think. Whether you're an AI enthusiast or a developer exploring new possibilities, setting up your AI environment is a smooth process.
First, you'll need to create an Azure AI Foundry hub and an Agent project within your Azure subscription. Think of this as laying the foundation for your AI-powered applications.
If you're new to the service, don’t worry—the quickstart guide is there to walk you through everything step by step.
Once your AI hub and project are ready, you can configure the necessary resources. After that, it’s time for the exciting part—you can deploy a compatible AI model like GPT-4o and start harnessing its power.
With a deployed model, you’ll be able to make API calls using the provided SDKs, opening the door to countless AI-driven applications.
To make things even simpler, Azure provides two quick-start options: Basic and Standard. These will help you get your Azure AI Agent Service up and running quickly, so you can focus on creating something amazing.
So, why wait? Dive in and start building with Azure AI today!
I decided to go with the Standard plan because we have a WebApp, and the overall architecture fits perfectly! It makes everything smoother and more efficient.
We also integrated CosmosDB interaction and API Management to scale up for an enterprise-level setup. It’s exciting to see how everything is coming together!
With our own Azure AI Agent Service deployment, we can seamlessly interact with agents and use various tools and functions effortlessly. It truly simplifies the whole process!
Conclusion
With the power of Azure’s cloud services, we’ve built a web application that’s not just scalable and efficient but truly makes document management easier. By integrating AI-driven processing, we’ve transformed the way information is handled—saving time, reducing frustration, and bringing a sense of order to what often feels like chaos. This solution doesn’t just boost productivity; it gives users peace of mind, knowing their essential documents are secure, well-organized, and always within reach.
Comments