Demo & Screenshots
Visual walkthrough of the Loan Defenders multi-agent loan processing system.
Live Demo
Note: This is a reference implementation for learning and development. You can clone the repository and run it locally following the Quick Start Guide.
System Overview
Architecture
The Loan Defenders system uses a multi-agent architecture powered by Microsoft Agent Framework with MCP (Model Context Protocol) servers as tools.
Agent Squad: - 🦸♂️ Cap-ital America - Conversation coordinator (UI personality) - 🦅 Eagle Eye - Application intake and validation - 🎯 Scarlet Witch-Credit - Credit analysis specialist - 💰 Hawk-Income - Income verification expert - 🎲 Doctor Strange-Risk - Final risk assessment
User Experience Walkthrough
1. Landing Page
Clean, inviting interface that introduces users to the conversational loan experience.
Key Elements: - Clear call-to-action: "Start Your Loan Application" - Superhero agent branding - Trust indicators and security messaging - Mobile-responsive design
2. Conversational Intake
Users engage in natural conversation with Cap-ital America to provide loan requirements.
Sample Conversation Flow:
Cap-ital America: 🦸♂️ Welcome, soldier! Ready to secure that loan?
What's your name?
User: John Doe
Cap-ital America: Great to meet you, John! What email should we use
for updates on your application?
User: john@example.com
Cap-ital America: Perfect! How much are you looking to borrow?
User: $350,000
[... continues for ~5 fields total]
Features: - One question at a time (progressive disclosure) - Smart validation and error handling - Quick replies for common options - Progress indicator showing completion %
3. Multi-Agent Processing
Real-time visualization of AI specialists processing the application.
Processing Stages:
Stage 1: Intake Validation (Eagle Eye)
🦅 Eagle Eye - Application Validator
Status: Processing...
✓ Verified applicant identity
✓ Validated loan amount and income
✓ Confirmed all required fields
Stage 2: Credit Analysis (Scarlet Witch)
🎯 Scarlet Witch - Credit Analyst
Status: Processing...
✓ Retrieved credit report
✓ Analyzed credit history
✓ Calculated debt-to-income ratio
Risk Level: Low (Credit Score: 720)
Stage 3: Income Verification (Hawk-Income)
💰 Hawk-Income - Income Specialist
Status: Processing...
✓ Verified employment status
✓ Validated income documentation
✓ Assessed income stability
Capacity Rating: Strong
Stage 4: Final Risk Assessment (Doctor Strange)
🎲 Doctor Strange - Risk Evaluator
Status: Processing...
✓ Synthesized all agent assessments
✓ Comprehensive risk analysis complete
✓ Final decision calculated
User Experience: - All updates stream into a single, evolving message - Real-time progress with agent activities - Clear status indicators (Processing/Complete) - Estimated time remaining
Processing Time: Typically <2 minutes
4. Loan Decision
Clear presentation of the loan decision with celebration and next steps.
Approval Message
🎉 CONGRATULATIONS! 🎉
Your loan application has been APPROVED!
Loan Details:
• Amount: $350,000
• Rate: 3.75% APR
• Term: 30 years
• Monthly Payment: $1,621
Next Steps:
1. Review and sign loan documents (sent to john@example.com)
2. Schedule closing appointment
3. Prepare required documentation
Questions? Contact your loan officer at 1-800-DEFENDERS
Conditional Approval
📋 Almost There!
Your application is CONDITIONALLY APPROVED pending:
• Recent pay stubs (last 2 months)
• Bank statements (last 3 months)
Upload documents at: [secure link]
Estimated approval time: 24-48 hours after submission
Denial (with Constructive Feedback)
We appreciate your application, but we're unable to approve at this time.
Reasons:
• Credit score below minimum threshold (required: 620, current: 580)
• Debt-to-income ratio too high (required: <43%, current: 48%)
Steps to Improve:
1. Pay down existing debt to improve DTI ratio
2. Review credit report and dispute any errors
3. Consider a co-applicant with strong credit
Reapply in 6 months after improving these factors.
Free credit counseling: [link]
Key Features Demonstrated
1. Conversational Interface
- ✅ Natural language processing
- ✅ Progressive disclosure (one question at a time)
- ✅ Smart defaults and suggestions
- ✅ Real-time validation
2. Multi-Agent Processing
- ✅ Parallel agent execution
- ✅ Real-time status updates
- ✅ Transparent agent activities
- ✅ <2 minute processing time
3. Mobile-First Design
- ✅ Responsive layout (works on all devices)
- ✅ Touch-friendly interactions
- ✅ Optimized for mobile networks
- ✅ Voice input support (future)
4. Security & Privacy
- ✅ Encrypted data transmission
- ✅ Secure applicant identification (UUID-based)
- ✅ No full SSN storage (last 4 digits only)
- ✅ Audit logging of all decisions
Technical Stack
Frontend: - React + TypeScript - Vite build system - Tailwind CSS for styling - Real-time Server-Sent Events (SSE)
Backend: - FastAPI (Python) - Microsoft Agent Framework - MCP servers for specialized tools - Azure AI Foundry for LLM models
Infrastructure: - Azure Container Apps - Azure AI Services - Azure Container Registry - GitHub Actions CI/CD
Performance Metrics
Based on current demo/development environment:
| Metric | Target | Current |
|---|---|---|
| Application Completion Time | <15 min | ~5-7 min |
| Agent Processing Time | <2 min | ~45-90 sec |
| Page Load Time | <2 sec | ~1.2 sec |
| Mobile Responsiveness | 100% | 100% |
| Uptime | 99.9% | 99.5% (dev) |
Try It Yourself
Local Development
Follow the Quick Start Guide to run the system locally.
Requirements: - Python 3.11+ - Node.js 18+ - Azure AI Foundry access - Git
Quick Start:
# Clone repository
git clone https://github.com/niksacdev/loan-defenders.git
cd loan-defenders
# Install dependencies
uv sync
cd apps/ui && npm install
# Start services
# Terminal 1: MCP servers
uv run python -m loan_defenders.tools.mcp_servers.application_verification.server
# Terminal 2-3: Other MCP servers...
# Terminal 4: API
cd apps/api && uv run python -m loan_defenders.api.app
# Terminal 5: UI
cd apps/ui && npm run dev
Running the Demo
Clone and run locally:
Follow the complete setup instructions in the Installation Guide.
What's Next?
- Product Vision - Understand the strategic vision
- User Experience Flow - Deep dive into UX design
- Architecture Overview - Learn the technical architecture
- Getting Started - Try it yourself
Questions?
- Technical Issues: See Troubleshooting Guide
- Getting Started: See Quick Start Guide
- Deployment: See Deployment Guide
- Architecture: See System Architecture
Want to learn more? See AI Development Philosophy to understand how this project was built.