Module VI — Building a Professional Web UI

Note

Duration: ~15 minutes In this module, you will use GitHub Copilot Agent mode to generate a complete web UI for the Compliance Compass agent using Streamlit. This transforms the command-line agent into a professional, browser-based application suitable for compliance teams.

Objectives

Use GitHub Copilot Agent mode to generate a complete Streamlit web application
Create a professional chat interface with compliance branding
Integrate the existing agent logic with the web UI
Test the application in the browser with real compliance scenarios

Step 1: Generate the Web UI with Copilot

Open GitHub Copilot Chat (Ctrl+Alt+I).
Switch to Agent mode using the mode selector.
Ensure run_agent.py is referenced as context — this file now contains the interactive loop added in Module V.

Send the following prompt:

# Context
I have a working Azure AI Foundry compliance agent in run_agent.py.
It uses:
- azure-ai-projects SDK with DefaultAzureCredential
- Azure AI Search as a RAG tool (already configured)
- An interactive input loop (added in Module V)
Load the .env file with load_dotenv() for all credentials.

# Task
Create app_ui.py — a complete Streamlit web UI for this agent.
Do NOT modify run_agent.py. Extract agent creation, thread management,
and query-sending logic and adapt it for Streamlit session state.

# UI Requirements
1. PAGE — st.set_page_config: title "Compliance Compass", icon "", wide layout
2. HEADER — " Compliance Compass" + subtitle "Regulatory Risk Assessment & Policy Analysis"
3. SIDEBAR:
   - About section (2-sentence description)
   - Sample Queries (4 buttons, clicking sends that query directly):
     a) "Assess vendor risk for an AI company in Singapore processing payment data"
     b) "GDPR requirements for transferring EU customer data to India"
     c) "RBI data localization rules for third-party fintech vendors"
     d) "DPDP Act obligations for a new SaaS vendor processing Indian citizen data"
   - Session Info: st.metric showing query count
   - Clear Chat button that resets agent, thread, and message history
4. CHAT INTERFACE:
   - Display full message history (user + assistant bubbles)
   - Render agent responses with st.markdown (supports headers, bold, tables)
   - Show timestamp (HH:MM) under each response
   - st.chat_input at bottom, or text_area + Send button
   - Spinner with label "Analyzing compliance scenario..." during processing

# Technical Constraints
- Use st.session_state for: agent, thread_id, messages list, query_count
- Initialize agent and thread ONCE (on first load), reuse across all messages
- Reuse the same thread_id for every message (conversation context must persist)
- Catch exceptions from the Azure SDK and display a friendly st.error() message
- Output file: app_ui.py (same directory as run_agent.py)

# Dependency
Update requirements.txt to add streamlit.

Copilot will generate the app_ui.py file and update requirements.txt.
Review each proposed change:
- app_ui.py — Complete Streamlit application
- requirements.txt — Updated with streamlit dependency
Click Accept to apply all changes.

Step 2: Review the Generated UI Code

The generated app_ui.py should contain the following key sections. The sequence diagram below shows the runtime data flow:

sequenceDiagram
    actor U as User
    participant UI as Streamlit (app_ui.py)
    participant SS as st.session_state
    participant A as AI Foundry Agent
    participant R as Azure AI Search

    U->>UI: Open http://localhost:8501
    UI->>SS: Initialize agent + thread (once)

    loop Each compliance query
        U->>UI: Submit query
        UI->>SS: Append user message
        UI->>A: messages.create(thread_id, content)
        A->>R: RAG retrieval
        R-->>A: Relevant policy chunks
        A-->>UI: Compliance report (Markdown)
        UI->>SS: Append message + timestamp
        UI-->>U: st.markdown(response)
    end

Page Configuration

import streamlit as st
from datetime import datetime

st.set_page_config(
    page_title="Compliance Compass",
    page_icon="",
    layout="wide"
)

Sidebar

with st.sidebar:
    st.image("", width=50)  # or a logo
    st.title("Compliance Compass")
    st.markdown("---")
    
    st.subheader(" About")
    st.markdown("""
    Compliance Compass is a RAG-powered compliance agent that helps 
    risk teams evaluate regulatory requirements across jurisdictions.
    """)
    
    st.subheader(" Sample Queries")
    sample_queries = [
        "Assess vendor risk for an AI company in Singapore processing payment data",
        "GDPR compliance requirements for transferring data to China",
        "Review contract clause: Customer data stored on servers in Frankfurt with backups in Mumbai",
        "What RBI regulations apply to third-party fintech vendors?"
    ]
    for query in sample_queries:
        if st.button(query, key=f"sample_{hash(query)}"):
            st.session_state.pending_query = query
    
    st.markdown("---")
    st.subheader(" Session Info")
    st.metric("Queries This Session", st.session_state.get("query_count", 0))

Chat Interface

st.title(" Compliance Compass")
st.caption("Regulatory Risk Assessment & Policy Analysis")

# Display chat history
for message in st.session_state.get("messages", []):
    with st.chat_message(message["role"]):
        st.markdown(message["content"])
        if "timestamp" in message:
            st.caption(f" {message['timestamp']}")

# User input
if prompt := st.chat_input("Describe your compliance scenario..."):
    # Add user message to history
    # Send to agent
    # Display response with Markdown rendering
    pass

Note

The exact code will vary based on what Copilot generates. The key elements are:

Streamlit session state for chat history and agent context
Markdown rendering for agent responses (compliance reports)
Sample queries in the sidebar for quick testing

Step 3: Install Dependencies and Run the UI

Install the updated dependencies:
```
pip install -r requirements.txt
```
This will install streamlit and any other new dependencies.
Run the Streamlit application:
```
streamlit run app_ui.py
```

Streamlit will display a URL in the terminal:

Local URL: http://localhost:8501
Network URL: http://192.168.x.x:8501

Open the URL in your browser (http://localhost:8501).

You should see the Compliance Compass web application with a sidebar (About, Sample Queries, Session Info) and a main chat area with the header " Compliance Compass".

Step 4: Test the Web UI

Test 1: Direct Input

In the chat input box at the bottom, type:

Assessing risks for a new AI analytics vendor based in Singapore 
that will process our customer transaction data. Are there any 
RBI localization concerns?

Click Send (or press Enter).
You should see:
- A loading spinner with "Analyzing compliance scenario..."
- The agent's structured compliance report rendered as Markdown
- Risk score, regulatory findings, references, and recommended actions

Test 2: Sample Query from Sidebar

In the left sidebar, click one of the Sample Queries buttons.
The query should automatically populate and send.
Verify the agent responds with a relevant compliance report.

Test 3: Follow-Up Query

After receiving the first response, type a follow-up:

Based on the previous assessment, what specific DPA clauses should 
we include in the vendor contract?

The agent should reference the previous conversation context and provide relevant DPA clauses from the Mitigation Templates document.

Test 4: Multi-Jurisdiction Scenario

Enter a complex scenario:

Our company (headquartered in India, with operations in EU and US) 
is onboarding a cloud infrastructure vendor based in China. The vendor 
will process: (1) customer payment data, (2) employee personal data, 
and (3) proprietary manufacturing technology specifications. 
What are all applicable regulatory risks?

The agent should produce a comprehensive report covering:
- RBI data localization (payment data)
- GDPR cross-border transfers (EU employee data to China)
- DPDP Act (Indian personal data)
- Export controls (manufacturing technology)

Step 5: Troubleshooting the UI

If you encounter issues, use Copilot to troubleshoot:

Issue: Agent Connection Error

The Streamlit app shows an error when trying to create the agent. 
The error is: "DefaultAzureCredential failed to retrieve a token."
Fix the authentication in app_ui.py. I am logged in with az login.

Issue: Chat History Not Persisting

The chat history resets after each message in the Streamlit app. 
Ensure st.session_state is correctly managing the message history 
and the agent thread ID persists across reruns. Fix app_ui.py.

Issue: Markdown Not Rendering

The agent responses are showing raw Markdown text instead of 
rendered formatting. Ensure the agent responses are displayed 
using st.markdown() instead of st.text() or st.write(). 
Fix the display logic in app_ui.py.

Tip

Streamlit reruns the entire script on each interaction. All state (agent, thread, messages) must be stored in st.session_state to persist across reruns.

Prerequisites Checklist

Before moving to Module VII (Optional), confirm:

app_ui.py created with Streamlit-based chat UI
requirements.txt updated with streamlit dependency
Application launches successfully at http://localhost:8501
Chat interface displays with compliance branding
Sample queries work from the sidebar
Agent responses render as formatted Markdown
Conversation context persists across messages
Multiple test scenarios produce relevant compliance reports

Key Takeaways

GitHub Copilot Agent mode can generate a complete web application from a single detailed prompt — including layout, styling, session management, and backend integration.
Detailed UI requirements (branding, sidebar contents, sample queries, Markdown rendering) produce better results than vague "create a UI" prompts.
Streamlit is ideal for rapid prototyping of AI agent UIs — it handles chat interfaces, session state, and Markdown rendering with minimal code.
The same agent logic from the command-line version is reused in the web UI — only the interaction layer changes.

Click Next to proceed to Module VII: Containerization and Testing (Optional).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module VI — Building a Professional Web UI

Objectives

Step 1: Generate the Web UI with Copilot

Step 2: Review the Generated UI Code

Page Configuration

Sidebar

Chat Interface

Step 3: Install Dependencies and Run the UI

Step 4: Test the Web UI

Test 1: Direct Input

Test 2: Sample Query from Sidebar

Test 3: Follow-Up Query

Test 4: Multi-Jurisdiction Scenario

Step 5: Troubleshooting the UI

Issue: Agent Connection Error

Issue: Chat History Not Persisting

Issue: Markdown Not Rendering

Prerequisites Checklist

Key Takeaways

FilesExpand file tree

06_Web_UI.md

Latest commit

History

06_Web_UI.md

File metadata and controls

Module VI — Building a Professional Web UI

Objectives

Step 1: Generate the Web UI with Copilot

Step 2: Review the Generated UI Code

Page Configuration

Sidebar

Chat Interface

Step 3: Install Dependencies and Run the UI

Step 4: Test the Web UI

Test 1: Direct Input

Test 2: Sample Query from Sidebar

Test 3: Follow-Up Query

Test 4: Multi-Jurisdiction Scenario

Step 5: Troubleshooting the UI

Issue: Agent Connection Error

Issue: Chat History Not Persisting

Issue: Markdown Not Rendering

Prerequisites Checklist

Key Takeaways