Team Tangerine - AI Tinkerers & Google Cloud: Agents Hackathon Toronto
AI Tinkerers - Toronto
Hackathon Showcase Finalist

Team Tangerine

Team consisting of Tangerine engineering leads/architects (Head of Engineering, Solutions Architects), a Scotiabank GenAI full‑stack intern, and a Tangerine tech intern — JS, C#, Azure, cloud, GenAI.

5 members Watch Demo

TangerineTeam: AI-Powered Travel Planning Assistant

Project Overview

TangerineTeam is an intelligent travel planning system that combines Google’s Agent Development Kit (ADK) with real-time TripAdvisor data to create personalized, comprehensive travel itineraries. The system features a multi-agent architecture with specialized agents for different aspects of travel planning, integrated with a modern React frontend for interactive itinerary visualization.


Technical Excellence - End-to-End Demo & Working Code

Multi-Agent Architecture:

  • Root Agent: Orchestrates the entire travel planning conversation, gathering user preferences (destination, dates, budget, group size, interests, accessibility needs)
  • Lookup Agent: Specialized agent with TripAdvisor MCP integration for real-time data on attractions, restaurants, hotels, and activities
  • Itinerary Agent: Creates structured JSON itineraries with precise timing, locations, and categorization

Key Features:

  • Real-time TripAdvisor data integration via Model Context Protocol (MCP)
  • Structured JSON output for seamless frontend integration
  • Interactive React Flow visualization for itinerary planning
  • Dockerized TripAdvisor MCP server for reliable external data access
  • Human-in-the-loop conversational interface for preference gathering

Solution Architecture & Documentation

Repository Structure:

├── agent/                 # ADK-powered backend agents  
│   ├── app/              # Core agent logic and MCP integration  
│   ├── deployment/       # Terraform infrastructure  
│   ├── notebooks/        # Evaluation and testing notebooks  
│   └── tests/           # Comprehensive test suite  
├── frontend/             # React.js visualization interface  
│   ├── src/components/   # Interactive UI components  
│   └── styles/          # Modern CSS modules  
└── tripadvisor-mcp/     # External MCP server integration  

Setup & Deployment:

  • One-command local setup: make install && make playground
  • Cloud deployment via make backend
  • Frontend: npm run dev (http://localhost:5173)
  • Comprehensive documentation in README.md with clear installation steps

Gemini Integration

Model Usage:

  • Primary Model: Gemini-2.5-flash for all agent interactions
  • Tool Calling: Sophisticated agent-to-agent communication using AgentTool
  • Chaining: Multi-step workflow from preference gathering → lookup → itinerary creation
  • Structured Output: Enforced JSON schemas for consistent data formatting

Advanced Gemini Features:

  • Callback hooks for request/response processing
  • Context management for session state
  • Environment variable integration for API keys
  • Error handling and fallback mechanisms

Evaluation:

  • Integration test suite in tests/integration/
  • Jupyter notebooks for agent performance evaluation
  • Load testing capabilities for scalability assessment

Impact & Innovation

Problem Solved:
Traditional travel planning requires visiting multiple websites, comparing options manually, and organizing information across different platforms. TangerineTeam automates this entire workflow while maintaining human control over preferences and final decisions.

Innovation:

  • Real-time Data Integration: First-class TripAdvisor API integration via MCP
  • Conversational Planning: Natural language preference gathering with structured output
  • Visual Itinerary Builder: Interactive React Flow interface for itinerary manipulation
  • Multi-modal Architecture: Combines conversational AI with visual planning tools

Impact:

  • Reduces travel planning time from hours to minutes
  • Ensures up-to-date information from trusted travel sources
  • Provides accessible interface for users with varying technical skills
  • Scalable architecture for commercial deployment

Bonus Points

✅ ADK Usage: Complete Google Agent Development Kit implementation with:

  • Multi-agent orchestration
  • Tool calling between agents
  • Structured instruction sets
  • Environment configuration management

✅ Human-In-The-Loop: Conversational preference gathering ensures human control while automating research and organization

✅ Vertex AI: Integration ready for Vertex AI deployment via ADK backend infrastructure


Technology Stack

Backend:

  • Google Agent Development Kit (ADK) 1.14.0
  • Python 3.10+ with asyncio
  • Model Context Protocol (MCP)
  • Docker for MCP server isolation
  • OpenTelemetry for observability
  • Terraform for infrastructure

Frontend:

  • React 19.1.1 with modern hooks
  • XYFlow/React Flow for interactive visualization
  • Vite 7.1.7 for development
  • CSS Modules for styling
  • ESLint for code quality

External Integrations:

  • TripAdvisor API via custom MCP server
  • Google Cloud Platform services
  • Environment-based configuration management

Demo Instructions

Local Setup:

# Backend  
cd agent/  
make install && make playground  
  
# Frontend    
cd frontend/  
npm install && npm run dev  

Key URLs:

  • Frontend: http://localhost:5173
  • Streamlit Demo: http://localhost:8501 (via make playground)

Demo Flow:

  1. Start conversation with destination preference
  2. Agent gathers detailed travel preferences
  3. Lookup agent searches TripAdvisor for real options
  4. Itinerary agent creates structured JSON output
  5. Frontend visualizes interactive itinerary map

Current Status

Features Complete:

  • ✅ Multi-agent conversation flow
  • ✅ Real-time TripAdvisor integration
  • ✅ Structured JSON output
  • ✅ React visualization interface
  • ✅ Docker MCP server deployment

We used a trip advisor mcp server that was open sourced, but the rest was done by us.

Google Google Cloud TripAdvisor

Frontend and Backend code

Summarizing URL...