Skip to content

tutorial-ai-openai-chatbot-python.md

Latest commit

 

History

History
240 lines (179 loc) · 10.2 KB

tutorial-ai-openai-chatbot-python.md

File metadata and controls

240 lines (179 loc) · 10.2 KB
title Build and deploy an Azure OpenAI (Flask) chatbot
description Learn how to build a Python web app that connects to Azure OpenAI and deploy it to Azure App Service using managed identity.
author jefmarti
ms.author jefmarti
ms.date 03/03/2026
ms.update-cycle 180-days
ms.topic tutorial
ms.custom
devx-track-node
linux-related-content
build-2025
ms.collection ce-skilling-ai-copilot
ms.service azure-app-service

Tutorial: Build a chatbot with Azure App Service and Azure OpenAI (Flask)

In this tutorial, you build an intelligent AI application by integrating Azure OpenAI with a Python web application and deploy it to Azure App Service. You create a Flask app that sends chat completion requests to a model in Azure OpenAI, and connect to the service using a managed identity.

You learn how to:

[!div class="checklist"]

  • Create an Azure OpenAI resource and deploy a language model.
  • Build a Flask application that connects to Azure OpenAI.
  • Deploy the application to Azure App Service.
  • Implement passwordless secure authentication in the development environment and in Azure.

:::image type="content" source="media/tutorial-ai-openai-chatbot-python/chat-in-browser.png" alt-text="Screenshot showing a chatbot running in Azure App Service.":::

Prerequisites

1. Create an Azure OpenAI resource

[!INCLUDE tutorial-ai-openai-chatbot/create-openai-resource]

2. Create and set up a Flask app

  1. In your codespace terminal, create a virtual environment and install the PIP packages you need.

    python3 -m venv .venv
source .venv/bin/activate
pip install flask openai azure.identity dotenv
pip freeze > requirements.txt

  2. In the workspace root, create a file named app.py containing the following code for a simple chat completion call with Azure OpenAI.

    import os
from flask import Flask, render_template, request
from azure.identity import DefaultAzureCredential, get_bearer_token_provider
from openai import AzureOpenAI

app = Flask(__name__)

# Initialize the Azure OpenAI client with Microsoft Entra authentication
token_provider = get_bearer_token_provider(
    DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
)
client = AzureOpenAI(
    api_version="2024-10-21",
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    azure_ad_token_provider=token_provider,
)

@app.route('/', methods=['GET', 'POST'])
def index():
    response = None
    if request.method == 'POST': # Handle form submission
        user_message = request.form.get('message')
        if user_message:
            try:
                # Call the Azure OpenAI API with the user's message
                completion = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role": "user", "content": user_message}]
                )
                ai_message = completion.choices[0].message.content
                response = ai_message
            except Exception as e:
                response = f"Error: {e}"
    return render_template('index.html', response=response)

if __name__ == '__main__':
    app.run()

  3. Create a templates directory and an index.html file in it. Paste in the following code for creating a simple chat interface.

    <!doctype html>
<html>
<head>
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <main class="container py-4">
        <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
        <form method="post" action="/" class="mb-3">
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
        <div class="card p-3">
            {% if response %}
                <div class="alert alert-info mt-3">{{ response }}</div>
            {% endif %}
        </div>
    </main>
</body>
</html>

  4. In the terminal, retrieve your OpenAI endpoint:

    az cognitiveservices account show \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --query properties.endpoint \
  --output tsv

  5. Run the app by adding AZURE_OPENAI_ENDPOINT with the value from the preceding CLI output.

    AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run

  6. Select Open in browser to launch the app in a new browser tab. Submit a question to see a response message.

3. Deploy to Azure App Service and configure OpenAI connection

Now that your app works locally, deploy it to Azure App Service and set up a service connection to Azure OpenAI using managed identity.

  1. First, deploy your app to Azure App Service using the Azure CLI command az webapp up. This command creates a new web app in the same resource group as your OpenAI resource and deploys your code to it. The command might take a few minutes to complete.

    az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false

  2. After the app is deployed, create a service connection between your web app and the Azure OpenAI resource using managed identity. The following command creates a connection between your web app and the Azure OpenAI resource by:

    • Generating a system-assigned managed identity for the web app.
    • Adding the Cognitive Services OpenAI Contributor role to the managed identity for the Azure OpenAI resource.
    • Adding the AZURE_OPENAI_ENDPOINT app setting to your web app.
    az webapp connection create cognitiveservices \
  --resource-group $RESOURCE_GROUP \
  --name $APPSERVICE_NAME \
  --target-resource-group $RESOURCE_GROUP \
  --account $OPENAI_SERVICE_NAME \
  --connection azure_openai \
  --system-identity

  3. Find the URL of your deployed app in the terminal output from the az webapp up command, and navigate to the app in your web browser.

    az webapp browse

  4. In your web app, enter a message in the textbox and select Send. Give the app a few seconds to reply with the message from Azure OpenAI.

    :::image type="content" source="media/tutorial-ai-openai-chatbot-python/chat-in-browser.png" alt-text="Screenshot showing chatbot running in Azure App Service.":::

Your app is now deployed and connected to Azure OpenAI with managed identity.

Frequently asked questions

How can I connect to OpenAI instead of Azure OpenAI?

To connect to OpenAI instead of Azure OpenAI, use the following code:

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

For more information, see How to switch between OpenAI and Azure OpenAI endpoints with Python.

Important

When working with connection secrets like API keys in App Service, you should use Azure Key Vault references instead of storing secrets directly in your code. This practice ensures that sensitive information remains secure and is managed centrally.

Can I connect to Azure OpenAI with an API key instead of managed identity?

Yes, you can connect to Azure OpenAI by using an API key instead of managed identity. The Azure OpenAI SDK and Semantic Kernel support this approach.

Important

When working with connection secrets like API keys in App Service, you should use Key Vault references instead of storing secrets directly in your code. This practice ensures that sensitive information remains secure and is managed centrally.

How does the DefaultAzureCredential work?

The DefaultAzureCredential simplifies authentication by automatically selecting the best available authentication method.

  • During local development, after you run az login, the DefaultAzureCredential uses your local Azure CLI credentials.
  • For Azure App Service deployments, the DefaultAzureCredential uses the app's managed identity for secure, passwordless authentication.

This approach lets your code run securely and seamlessly in both local and cloud environments without modification.

Related content