format

Author: seligj95

README.md

@@ -1,12 +1,12 @@
-# Todo MCP Agent with Azure AI
+# To-do MCP Agent with Azure AI
 
-A FastAPI-based todo list application with Azure AI Agents integration and Model Context Protocol (MCP) server functionality.
+A FastAPI-based to-do list application with Azure AI Agents integration and Model Context Protocol (MCP) server functionality.
 
 ## Features
 
-- 🤖 **AI-Powered Chat**: Azure AI Agents with GPT-4o for natural language todo management
+- 🤖 **AI-Powered Chat**: Azure AI Agents with GPT-4o for natural language to-do management
 - 🔧 **MCP Integration**: Model Context Protocol server for AI tool access
-- ✅ **Todo Management**: Full CRUD operations with priority levels
+- ✅ **To-do Management**: Full CRUD operations with priority levels
 - 🌐 **Web Interface**: Clean, responsive UI with chat functionality
 - ☁️ **Azure Deployment**: Ready for Azure App Service with AI Foundry
 
@@ -35,7 +35,7 @@ A FastAPI-based todo list application with Azure AI Agents integration and Model
    ```
 
 3. **Access the app**:
-   - Todo List: http://localhost:8000
+   - To-do List: http://localhost:8000
    - AI Chat: http://localhost:8000/chat
    - Health Check: http://localhost:8000/health
 
@@ -57,23 +57,23 @@ This creates:
 
 The application combines three key components:
 
-1. **Todo Management**: Standard CRUD operations for managing tasks
-2. **MCP Server**: Exposes todo operations as tools that AI agents can use
-3. **AI Chat Interface**: Azure AI Agents that can interact with your todos through natural language
+1. **To-do Management**: Standard CRUD operations for managing tasks
+2. **MCP Server**: Exposes to-do operations as tools that AI agents can use
+3. **AI Chat Interface**: Azure AI Agents that can interact with your to-dos through natural language
 
 ### Example Chat Interactions
 
-- "Create a high priority todo to finish the project"
-- "Show me all my incomplete todos"
-- "Mark the project todo as complete"
-- "What todos do I have for today?"
+- "Create a high priority to-do to finish the project"
+- "Show me all my incomplete to-dos"
+- "Mark the project to-do as complete"
+- "What to-dos do I have for today?"
 
 ## Architecture
 
 ```
 ┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
 │   Chat UI       │────│   FastAPI App    │────│   In-Memory     │
-│   (AI Agent)    │    │   + MCP Server   │    │   Todo Store    │
+│   (AI Agent)    │    │   + MCP Server   │    │   To-do Store   │
 └─────────────────┘    └──────────────────┘    └─────────────────┘
                                 │
                        ┌──────────────────┐
@@ -85,7 +85,7 @@ The application combines three key components:
 
 ## Model Context Protocol (MCP)
 
-This application implements a complete MCP server following the [MCP specification](https://modelcontextprotocol.io/introduction). The MCP server exposes todo management functionality as tools that AI agents can discover and use.
+This application implements a complete MCP server following the [MCP specification](https://modelcontextprotocol.io/introduction). The MCP server exposes to-do management functionality as tools that AI agents can discover and use.
 
 ### MCP Documentation and Resources
 
@@ -107,10 +107,10 @@ See **[Connect to Model Context Protocol servers (preview)](https://learn.micros
 
 The application exposes these tools for AI agents:
 
-- `create_todo` - Create new todos with title, description, and priority
-- `list_todos` - List all todos or filter by completion status  
-- `update_todo` - Update existing todo properties
-- `delete_todo` - Delete todos by ID
+- `create_todo` - Create new to-dos with title, description, and priority
+- `list_todos` - List all to-dos or filter by completion status  
+- `update_todo` - Update existing to-do properties
+- `delete_todo` - Delete to-dos by ID
 - `mark_todo_complete` - Toggle completion status
 
 ### Testing MCP Locally
@@ -130,15 +130,15 @@ curl -X POST http://localhost:8000/mcp/stream \
 ## API Endpoints
 
 ### Web Interface
-- `GET /` - Todo list page
+- `GET /` - To-do list page
 - `GET /chat` - AI chat interface
 - `GET /health` - Health check
 
 ### REST API
-- `GET /api/todos` - List todos
-- `POST /api/todos` - Create todo
-- `PUT /api/todos/{id}` - Update todo
-- `DELETE /api/todos/{id}` - Delete todo
+- `GET /api/todos` - List to-dos
+- `POST /api/todos` - Create to-do
+- `PUT /api/todos/{id}` - Update to-do
+- `DELETE /api/todos/{id}` - Delete to-do
 
 ### AI Chat API
 - `POST /api/chat/session` - Create chat session

main.py

@@ -6,7 +6,13 @@
 import logging
 import traceback
 from datetime import datetime
-from typing import Dict, List, Optional, Any
+from typing import Dict, List, Option            # Default instructions for MCP-enabled agent
+            instructions = """
+            You are a helpful agent with access to to-do management tools via MCP.
+            You can help users create, list, update, and delete to-do items using the available MCP tools.
+            When users ask about to-dos, use the MCP tools to perform the requested actions.
+            Always be helpful and provide clear feedback about what actions you've taken.
+            """
 from contextlib import asynccontextmanager
 
 from fastapi import FastAPI, HTTPException, Request
@@ -165,9 +171,9 @@ async def create_agent_with_mcp(self, instructions: str = None) -> Optional[str]
             # Default instructions if none provided
             if not instructions:
                 instructions = """
-                You are a helpful agent that can use MCP tools to assist users with todo management. 
+                You are a helpful agent that can use MCP tools to assist users with to-do management. 
                 Use the available MCP tools to answer questions and perform tasks like creating, 
-                listing, updating, and deleting todos.
+                listing, updating, and deleting to-dos.
                 """
 
             # Create agent with MCP tool definitions
@@ -210,9 +216,9 @@ async def chat_with_agent(self, message: str) -> ChatResponse:
 
             # Default instructions for MCP-enabled agent
             instructions = """
-            You are a helpful AI agent with access to todo management tools via MCP.
-            You can help users create, list, update, and delete todo items using the available MCP tools.
-            When users ask about todos, use the MCP tools to perform the requested actions.
+            You are a helpful agent with access to to-do management tools via MCP.
+            You can help users create, list, update, and delete to-do items using the available MCP tools.
+            When users ask about to-dos, use the MCP tools to perform the requested actions.
             Always be helpful and provide clear feedback about what actions you've taken.
             """
 

static/css/style.css

@@ -399,10 +399,10 @@ select.form-control {
 
 .chat-messages .message.user-message {
     margin-left: auto;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #3498db;
     color: white;
     border-radius: 20px 20px 6px 20px;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
 }
 
 .chat-messages .message.assistant-message {
@@ -489,7 +489,7 @@ select.form-control {
 
 .send-button {
     padding: 14px 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #3498db;
     color: white;
     border: none;
     border-radius: 20px;
@@ -500,20 +500,21 @@ select.form-control {
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
 }
 
 .send-button:hover:not(:disabled) {
+    background: #2980b9;
     transform: translateY(-1px);
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
 }
 
 .send-button:active:not(:disabled) {
     transform: translateY(0);
 }
 
 .send-button:disabled {
-    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
+    background: #cbd5e1;
     cursor: not-allowed;
     transform: none;
     box-shadow: 0 2px 8px rgba(203, 213, 225, 0.3);
@@ -640,16 +641,17 @@ select.form-control {
     }
 }
 
-/* Navigation Tabs - Enhanced Design */
+/* Navigation Tabs - Clean Design */
 .navigation-tabs {
     display: flex;
     margin-bottom: 0;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: white;
     border-radius: 12px 12px 0 0;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     padding: 4px;
     position: relative;
     overflow: hidden;
+    border-bottom: 1px solid #e2e8f0;
 }
 
 .navigation-tabs::before {
@@ -659,7 +661,7 @@ select.form-control {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    background: linear-gradient(135deg, rgba(52, 152, 219, 0.02) 0%, rgba(44, 62, 80, 0.02) 100%);
     pointer-events: none;
 }
 
@@ -670,7 +672,7 @@ select.form-control {
     border: none;
     cursor: pointer;
     text-decoration: none;
-    color: rgba(255,255,255,0.8);
+    color: #64748b;
     font-weight: 600;
     font-size: 15px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -679,20 +681,19 @@ select.form-control {
     text-align: center;
     position: relative;
     z-index: 2;
-    backdrop-filter: blur(10px);
 }
 
 .nav-tab:hover:not(.active) {
-    background: rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.95);
+    background: #f8fafc;
+    color: #2c3e50;
     transform: translateY(-1px);
 }
 
 .nav-tab.active {
-    background: white;
-    color: #4a5568;
+    background: #3498db;
+    color: white;
     font-weight: 700;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
     transform: translateY(-2px);
 }
 
@@ -704,7 +705,7 @@ select.form-control {
     transform: translateX(-50%);
     width: 40px;
     height: 3px;
-    background: linear-gradient(90deg, #667eea, #764ba2);
+    background: #2980b9;
     border-radius: 2px;
 }
 

templates/chat.html

@@ -14,9 +14,9 @@ <h1>App Service MCP To-do List App</h1>
             <p>With chat powered by AI Foundry Agent MCP server integration</p>
         </div>
 
-        <!-- Navigation -->
+        <!-- Navigation Tabs -->
         <div class="navigation-tabs">
-            <a href="/" class="nav-tab">Todo List</a>
+            <a href="/" class="nav-tab">To-do List</a>
             <a href="/chat" class="nav-tab active">AI Chat</a>
         </div>
 
@@ -25,7 +25,7 @@ <h1>App Service MCP To-do List App</h1>
             <div class="chat-messages" id="chatMessages">
                 <div class="message assistant-message">
                     <div class="message-content">
-                        <strong>Agent:</strong> Hi! I'm your AI agent powered by Azure AI Foundry with MCP integration. I can help you manage your todos through natural language. Try asking me to "create a new todo" or "show me all my todos"!
+                        <strong>agent:</strong> Hi! I'm your AI agent powered by Azure AI Foundry with MCP integration. I can help you manage your to-dos through natural language. Try asking me to "create a new to-do" or "show me all my to-dos"!
                     </div>
                     <div class="message-time" id="initialTime"></div>
                 </div>
@@ -37,7 +37,7 @@ <h1>App Service MCP To-do List App</h1>
                         <input 
                             type="text" 
                             id="chatInput" 
-                            placeholder="Ask me to manage your todos... (e.g., 'Create a high priority todo to finish the project')"
+                            placeholder="Ask me to manage your to-dos... (e.g., 'Create a high priority to-do to finish the project')"
                             class="chat-input"
                             disabled
                         >

templates/index.html

@@ -16,13 +16,13 @@ <h1>App Service MCP To-do List App</h1>
 
         <!-- Navigation Tabs -->
         <div class="navigation-tabs">
-            <a href="/" class="nav-tab active">Todo List</a>
+            <a href="/" class="nav-tab active">To-do List</a>
             <a href="/chat" class="nav-tab">AI Chat</a>
         </div>
 
-        <!-- Add Todo Section -->
+        <!-- Add To-do Section -->
         <div class="add-todo-section">
-            <h2>Add New Todo</h2>
+            <h2>Add New To-do</h2>
             <form id="addTodoForm">
                 <div class="form-group">
                     <label for="todoTitle">Title *</label>
@@ -40,7 +40,7 @@ <h2>Add New Todo</h2>
                         <option value="high">High</option>
                     </select>
                 </div>
-                <button type="submit" class="btn btn-primary">Add Todo</button>
+                <button type="submit" class="btn btn-primary">Add To-do</button>
             </form>
         </div>
 
@@ -51,9 +51,9 @@ <h2>Add New Todo</h2>
             <button class="filter-btn" data-filter="completed">Completed</button>
         </div>
 
-        <!-- Todo List Section -->
+        <!-- To-do List Section -->
         <div class="todo-list-section">
-            <h2>Your Todos</h2>
+            <h2>Your To-dos</h2>
             <div id="todoList">
                 <p class="no-todos">Loading todos...</p>
             </div>