amazon-bedrock-agentcore-samples/01-tutorials/07-AgentCore-E2E/lab-05-frontend.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "354ce590-0831-400f-93eb-2240cfd5a22f",
   "metadata": {},
   "source": [
    "# Lab 5: Building a Customer-Facing Frontend Application\n",
    "\n",
    "## Overview\n",
    "\n",
    "In the previous labs, we've built a comprehensive Customer Support Agent with memory, shared tools, and production-grade deployment. With them we show cased the capabilities of AgentCore services to move an agentic use case from prototype to production. You can now invoke your agent runtime from any application. On real world applications, customers expect an user interface to be available. Now it's time to create a user-friendly frontend that customers can actually use to interact with our agent.\n",
    "\n",
    "**Workshop Journey:**\n",
    "- **Lab 1 (Done)**: Create Agent Prototype - Built a functional customer support agent\n",
    "- **Lab 2 (Done)**: Enhance with Memory - Added conversation context and personalization\n",
    "- **Lab 3 (Done)**: Scale with Gateway & Identity - Shared tools across agents securely\n",
    "- **Lab 4 (Done)**: Deploy to Production - Used AgentCore Runtime with observability\n",
    "- **Lab 5 (Current)**: Build User Interface - Create a customer-facing application\n",
    "\n",
    "In this lab, we'll create a **Streamlit-based web application** that provides customers with an intuitive chat interface to interact with our deployed Customer Support Agent. The frontend will include:\n",
    "\n",
    "- **Secure Authentication** - User login via Amazon Cognito\n",
    "- **Real-time Chat Interface** - Streamlit-powered conversational UI\n",
    "- **Streaming Responses** - Live response streaming for better user experience\n",
    "- **Session Management** - Persistent conversations with memory\n",
    "- **Response Timing** - Performance metrics for transparency\n",
    "\n",
    "### Architecture for Lab 5\n",
    "\n",
    "Our frontend application connects to the AgentCore Runtime endpoint we deployed in Lab 4, providing a complete end-to-end customer support solution:\n",
    "\n",
    "<div style=\"text-align:left\">\n",
    "    <img src=\"images/architecture_lab5_streamlit.png\" width=\"100%\"/>\n",
    "</div>\n",
    "\n",
    "\n",
    "### What You'll learn\n",
    "\n",
    "- How to integrate Secure Authentication with a frontend.\n",
    "- How to implement real-time streaming responses\n",
    "- How to manage user sessions and conversation context\n",
    "- How to create an intuitive chat interface for customer support\n",
    "\n",
    "### Lab Objectives\n",
    "\n",
    "By the end of this lab, you will have:\n",
    "\n",
    "- Deployed a customer-facing Streamlit web application\n",
    "- Integrated secure user authentication with AgentCore Identity\n",
    "- Implemented real-time streaming chat responses\n",
    "- Created a complete end-to-end customer support solution\n",
    "- Tested the full customer journey from login to support resolution\n",
    "\n",
    "## Prerequisites\n",
    "\n",
    "- **Completed Labs 1-4**\n",
    "- **Python 3.10+** installed locally\n",
    "- **Streamlit** and required frontend dependencies\n",
    "- **AgentCore Runtime endpoint** from Lab 4 (deployed and ready)\n",
    "- **Amazon Cognito** user pool configured for authentication"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8576f257",
   "metadata": {},
   "source": [
    "### Step 1: Install Frontend Dependencies\n",
    "\n",
    "First, let's install the required packages for our Streamlit frontend application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2154a8d4",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Install frontend-specific dependencies\n",
    "%pip install -r lab_helpers/lab5_frontend/requirements.txt -q\n",
    "print(\"✅ Frontend dependencies installed successfully!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f57d6047",
   "metadata": {},
   "source": [
    "### Step 2: Understanding the Frontend Architecture\n",
    "\n",
    "Our Streamlit application consists of several key components:\n",
    "\n",
    "#### Core Components:\n",
    "\n",
    "1. **main.py** - Main Streamlit application with UI and authentication\n",
    "2. **chat.py** - Chat management and AgentCore Runtime integration\n",
    "3. **chat_utils.py** - Utility functions for message formatting and display\n",
    "4. **sagemaker_helper.py** - Helper for generating accessible URLs\n",
    "\n",
    "#### Authentication Flow:\n",
    "\n",
    "1. User accesses the Streamlit application\n",
    "2. Amazon Cognito handles user authentication\n",
    "3. Valid JWT tokens are used to authorize AgentCore Runtime requests\n",
    "4. User can interact with the Customer Support Agent securely"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "90e03fd3",
   "metadata": {},
   "source": [
    "### Step 3: Launch the Customer Support Frontend 🚀\n",
    "\n",
    "Now let's start our Streamlit application. The application will:\n",
    "\n",
    "1. **Generate an accessible URL** for the application\n",
    "2. **Start the Streamlit server** on port 8501\n",
    "3. **Connect to your deployed AgentCore Runtime** from Lab 4\n",
    "4. **Provide a complete customer support interface**\n",
    "\n",
    "**Important Notes:**\n",
    "- The application will run continuously until you stop it (Ctrl+C)\n",
    "- Make sure your AgentCore Runtime from Lab 4 is still deployed and running\n",
    "- The Cognito authentication tokens are valid for 2 hours"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d5639a9a",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Get the accessible URL for the Streamlit application\n",
    "from lab_helpers.lab5_frontend.sagemaker_helper import get_streamlit_url\n",
    "\n",
    "streamlit_url = get_streamlit_url()\n",
    "print(f'\\n🚀 Customer Support Streamlit Application URL:\\n{streamlit_url}\\n')\n",
    "\n",
    "# Start the Streamlit application\n",
    "!cd lab_helpers/lab5_frontend/ && streamlit run main.py"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "630e4944",
   "metadata": {},
   "source": [
    "### Step 4: Testing Your Customer Support Application\n",
    "\n",
    "Once your Streamlit application is running, you can test the complete customer support experience:\n",
    "\n",
    "#### Authentication Testing:\n",
    "1. **Access the application** using the Customer Support Streamlit Application URL provided above\n",
    "2. **Sign in** with the test credentials provided in the output\n",
    "3. **Verify** that you see the welcome message with your username\n",
    "\n",
    "<div style=\"text-align:left\">\n",
    "    <img src=\"images/lab5_streamlit_login.png\"/>\n",
    "</div>\n",
    "<div>\n",
    "    <img src=\"images/lab5_welcome_user.png\"/>\n",
    "</div>    \n",
    "\n",
    "\n",
    "#### Customer Support Scenarios to Test:\n",
    "\n",
    "Product Information Queries: \"What are the specifications for your laptops?\"\n",
    "\n",
    "Return Policy Questions: \"What's the return policy for electronics?\"\n",
    "\n",
    "Troubleshooting Support: \"My iPhone is overheating, what should I do?\"\n",
    "\n",
    "<div style=\"text-align:left\">    \n",
    "    <img src=\"images/lab5_agent_question.png\" width=\"75%\"/>\n",
    "</div>\n",
    "\n",
    "Memory and Personalization Testing: Have a conversation, then refresh the page\n",
    "\n",
    "<div style=\"text-align:left\">\n",
    "    <img src=\"images/lab5_agent_chat_history.png\" width=\"75%\"/>\n",
    "</div>\n",
    "\n",
    "#### What to Observe:\n",
    "\n",
    "- **Real-time streaming** - Responses appear as they're generated\n",
    "- **Response timing** - Performance metrics displayed with each response\n",
    "- **Memory persistence** - Agent remembers conversation context\n",
    "- **Tool integration** - Agent uses appropriate tools for different queries\n",
    "- **Professional UI** - Clean, intuitive customer support interface\n",
    "- **Error handling** - Graceful handling of any issues"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "007df2c7",
   "metadata": {},
   "source": [
    "## 🎉 Lab 5 Complete!\n",
    "\n",
    "Congratulations! You've successfully built and deployed a complete customer-facing frontend application for your AI-powered Customer Support Agent. Here's what you accomplished:\n",
    "\n",
    "### What You Built\n",
    "\n",
    "- **Web Interface** - Streamlit-based customer support application\n",
    "- **Secure Authentication** - Amazon Cognito integration for user management\n",
    "- **Real-time Streaming** - Live response streaming for better user experience\n",
    "- **Session Management** - Persistent conversations with memory across interactions\n",
    "- **Complete Integration** - Frontend connected to your AgentCore Runtime\n",
    "\n",
    "### End-to-End Customer Support Solution\n",
    "\n",
    "You now have a **complete, customer support system** that includes:\n",
    "\n",
    "1. **Intelligent Agent** (Lab 1) - AI-powered support with custom tools\n",
    "2. **Persistent Memory** (Lab 2) - Conversation context and personalization\n",
    "3. **Shared Tools & Identity** (Lab 3) - Scalable tool sharing and access control\n",
    "4. **Production Runtime** (Lab 4) - Secure, scalable deployment with observability\n",
    "5. **Customer Frontend** (Lab 5) - web interface for end users\n",
    "\n",
    "### Key Capabilities Demonstrated\n",
    "\n",
    "- **Multi-turn Conversations** - Agent maintains context across interactions\n",
    "- **Tool Integration** - Seamless use of product info, return policy, and web search\n",
    "- **Memory Persistence** - Customer preferences and history maintained\n",
    "- **Real-time Performance** - Streaming responses with performance metrics\n",
    "- **Security & Identity** - Proper authentication and authorization\n",
    "- **Observability** - Full tracing and monitoring of agent behavior\n",
    "\n",
    "### Next Steps\n",
    "\n",
    "To further enhance your customer support solution, consider:\n",
    "\n",
    "- **Custom Styling** - Brand the frontend with your company's design system\n",
    "- **Additional Tools** - Integrate with your existing CRM, ticketing, or knowledge base systems\n",
    "- **Multi-language Support** - Add internationalization for global customers\n",
    "- **Advanced Analytics** - Implement custom dashboards for support team insights\n",
    "- **Mobile Optimization** - Ensure the interface works well on mobile devices\n",
    "\n",
    "### Cleanup\n",
    "\n",
    "When you're ready to clean up the resources created in this workshop:\n",
    "\n",
    "**Ready to clean up?** [Proceed to Lab 6: Cleanup →](lab-06-cleanup.ipynb)\n",
    "\n",
    "---\n",
    "\n",
    "**🎊 Congratulations on completing the Amazon Bedrock AgentCore End-to-End Workshop!**\n",
    "\n",
    "You've successfully built a complete, production-ready AI agent solution from prototype to customer-facing application using Amazon Bedrock AgentCore capabilities."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}