Skip to main content

​
Getting Started with Azure AI Foundry

Welcome to your first lesson with Azure AI Foundry! In this tutorial, we’ll guide you through creating your first AI project and deploying a simple chat application.

​
What you’ll accomplish

By the end of this tutorial, you will have:
  • Created an Azure AI Foundry hub and project
  • Deployed your first AI model
  • Built a simple chat interface
  • Tested your application with real conversations

​
Before you begin

You’ll need:
  • An active Azure subscription
  • Basic familiarity with web applications
  • 30 minutes of focused time
This tutorial is designed for complete beginners. Follow each step carefully - we’ll explain what’s happening as we go.

​
Step 1: Create your Azure AI Foundry hub

Let’s start by setting up your workspace in Azure.
  1. Navigate to Azure AI Foundry portal
  2. Click “Create new hub”
  3. Fill in these details:
    • Name: my-first-ai-hub
    • Subscription: Select your Azure subscription
    • Resource group: Create new → rg-ai-foundry-tutorial
    • Location: Choose a region close to you
  4. Click “Review + create”
You should see a confirmation message. Your hub is now being created - this usually takes 2-3 minutes.
Notice how the portal shows you the deployment progress. This is your first glimpse into Azure’s resource management.

​
Step 2: Create your first project

Once your hub is ready, let’s create a project within it.
  1. From your hub dashboard, click ”+ New project”
  2. Enter these details:
    • Project name: chat-app-tutorial
    • Description: My first AI chat application
  3. Click “Create project”
Your project workspace will open. You’ll notice several sections:
  • Models: Where you’ll find and deploy AI models
  • Deployments: Your active model deployments
  • Playground: For testing models interactively

​
Step 3: Deploy a chat model

Now let’s deploy a model that can have conversations.
  1. Click on “Models” in the left navigation
  2. Search for gpt-4o-mini
  3. Click on the model card
  4. Click “Deploy”
  5. Use these settings:
    • Deployment name: chat-model-basic
    • Model version: Use the latest version
    • Pricing tier: Standard
  6. Click “Deploy”
The deployment process takes about 1-2 minutes. You’ll see the status change from “Creating” to “Succeeded”.
Watch the deployment logs - they show you exactly what Azure is setting up for your model.

​
Step 4: Test your model in the playground

Let’s verify your model works by having a quick conversation.
  1. Go to “Playground” → “Chat”
  2. Select your chat-model-basic deployment
  3. Type this message: 
    Hello! Can you help me understand what Azure AI Foundry is?
  4. Press Enter
You should receive a helpful response explaining Azure AI Foundry. Try asking a follow-up question to see how the model maintains context.

​
Step 5: Build a simple web interface

Now let’s create a basic web interface for your chat model.
  1. In your project, go to “Deployments”
  2. Click on your chat-model-basic deployment
  3. Note the Endpoint URL and Key - you’ll need these
  4. Create a simple HTML file (we’ll walk through this together): 
<!DOCTYPE html>
<html>
<head>
    <title>My First AI Chat App</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        #messages { border: 1px solid #ccc; height: 400px; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
        #userInput { width: 80%; padding: 10px; }
        #sendButton { padding: 10px 20px; }
        .message { margin-bottom: 10px; }
        .user { color: blue; }
        .ai { color: green; }
    </style>
</head>
<body>
    <h1>My First AI Chat App</h1>
    <div id="messages"></div>
    <input type="text" id="userInput" placeholder="Type your message here..." />
    <button id="sendButton">Send</button>

    <script>
        // We'll add the chat functionality here
        const messages = document.getElementById('messages');
        const userInput = document.getElementById('userInput');
        const sendButton = document.getElementById('sendButton');
        
        // Your endpoint details (replace with your actual values)
        const endpoint = 'YOUR_ENDPOINT_URL';
        const apiKey = 'YOUR_API_KEY';
        
        async function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;
            
            // Display user message
            addMessage('You: ' + message, 'user');
            userInput.value = '';
            
            try {
                // Call your AI model
                const response = await fetch(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        messages: [{ role: 'user', content: message }],
                        max_tokens: 150
                    })
                });
                
                const data = await response.json();
                const aiResponse = data.choices[0].message.content;
                
                // Display AI response
                addMessage('AI: ' + aiResponse, 'ai');
            } catch (error) {
                addMessage('Error: Could not get response', 'error');
            }
        }
        
        function addMessage(text, className) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${className}`;
            messageDiv.textContent = text;
            messages.appendChild(messageDiv);
            messages.scrollTop = messages.scrollHeight;
        }
        
        sendButton.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

​
Step 6: Test your application

  1. Save the HTML file as chat-app.html
  2. Replace YOUR_ENDPOINT_URL and YOUR_API_KEY with your actual values
  3. Open the file in your web browser
  4. Try having a conversation!
You now have a working AI chat application!

​
What you’ve learned

Congratulations! You’ve successfully:
  • ✅ Created an Azure AI Foundry hub and project
  • ✅ Deployed your first AI model
  • ✅ Built and tested a chat interface
  • ✅ Connected a web application to your AI model

​
Next steps

Now that you have the basics, you’re ready to explore more:

​
Troubleshooting

Model deployment failed?
  • Check that your subscription has available quota
  • Try a different region if capacity is limited
Chat not working?
  • Verify your endpoint URL and API key are correct
  • Check the browser console for error messages
  • Ensure your model deployment is in “Succeeded” status
Still stuck? Join our community forum where other learners and experts can help.
Remember: This tutorial focused on the concrete steps to get you started. Don’t worry about understanding every detail yet - that understanding will come naturally as you continue building and experimenting.