A visual geopolitical tension monitoring system for European travel planning Empowering travelers with AI-assisted safety insights through interactive map visualization

EuropeSafe is an innovative hobby project that transforms complex geopolitical data into intuitive, color-coded visual intelligence for travelers. Whether you're planning a European adventure or monitoring regional stability, this interactive platform provides instant clarity on safety conditions across the continent.

• 🗺️ Interactive Map Visualization - Explore Europe with dynamic, color-coded country overlays
• 🤖 AI Travel Assistant - Chat with an intelligent advisor for personalized travel recommendations
• 📊 Real-time Safety Scores - Instantly view tension levels from 0-100 for every European nation
• 🎨 Beautiful UI/UX - Modern glassmorphism design with smooth animations
• 📱 Responsive Design - Seamless experience across desktop, tablet, and mobile devices
• 🔒 Privacy-First - No tracking, no cookies, no data collection

Experience EuropeSafe in action: Launch Application

Navigate through an elegant interface where complex geopolitical situations become instantly comprehensible:

• Color-Coded Safety Levels: From serene greens (peaceful) to critical reds (high risk)
• Interactive Tooltips: Hover over any country for instant safety scores
• Detailed Popups: Click for comprehensive risk assessments and travel advisories
• AI Chat Integration: Ask questions like "Where's the safest place to visit this summer?"

Whether you're a:

• 🧳 Traveler planning your next European adventure
• 📰 Journalist monitoring regional developments
• 🎓 Student researching geopolitical patterns
• 💼 Professional assessing business travel safety

EuropeSafe provides the visual intelligence you need.

EUROPESAFE/
│
├── index.html                 # Main application (single-page app)
├── data/
│   └── europe-tension.json   # Synthetic safety scores & metadata
│
├── README.md                  # This file
└── DEPLOYMENT.md             # Hosting & deployment guide

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (Python, Node.js, or similar)

1️⃣ Clone the Repository

git clone https://github.com/yourusername/europesafe.git
cd europesafe

2️⃣ Start Local Server

Choose your preferred method:

Option A: Python

python -m http.server 8000
# or
python3 -m http.server 8000

Option B: Node.js

npx http-server -p 8000 --cors

Option C: PHP

php -S localhost:8000

3️⃣ Open Browser

Navigate to: http://localhost:8000

Important: This project uses synthetic data for demonstration purposes. The safety scores are generated to illustrate:

• Realistic geopolitical scenarios as of October 2025
• Regional tension patterns (war zones, border disputes, political stability)
• Visual representation capabilities

⚠️ This is NOT official travel advisory data For real travel decisions, consult:

• Official government travel advisories
• Embassy safety notices
• Professional risk assessment services

The chat interface is fully built and waiting for intelligence! The beautiful purple gradient widget in the bottom-right corner is ready to become your personal travel advisor.

The integrated AI chatbot will:

• 💬 Answer safety questions - "Is it safe to visit Poland right now?"
• 🌍 Recommend destinations - "Where's the safest beach vacation in Europe?"
• 📊 Explain risk factors - "Why does Ukraine have a score of 98?"
• 🧳 Provide travel advice - "What precautions should I take in the Balkans?"
• 🔍 Analyze trends - "Which regions are becoming safer?"

Connect directly to any LLM provider:

Supported Providers:

• 🟦 OpenAI GPT-4 - Best general knowledge
• 🟪 Anthropic Claude - Excellent reasoning
• 🔵 Google Gemini - Fast responses
• 🟨 Custom LLM - Your own model

Implementation:

// Add to index.html
const AI_CONFIG = {
  provider: 'openai',
  apiKey: 'your-api-key-here',
  model: 'gpt-4-turbo'
};

Model Context Protocol (MCP) enables the AI to access live data sources, making recommendations based on real-time information instead of synthetic data.

Why MCP?

Traditional API calls give you a chatbot. MCP gives you an intelligent travel advisor with:

✅ Live Data Access - Real-time geopolitical events from GDELT ✅ Multi-Source Intelligence - Aggregate government travel advisories ✅ Tool Integration - Weather, flight prices, accommodation safety ✅ Dynamic Scoring - Update risk scores based on breaking news ✅ Contextual Awareness - AI knows what's on the map you're viewing

MCP Architecture Diagram:

┌─────────────────┐
│  Frontend Chat  │
│   (Browser)     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   MCP Client    │
│  (JavaScript)   │
└────────┬────────┘
         │
         ▼
┌─────────────────────────────────────────┐
│           MCP Server (Node.js)          │
│  ┌────────────────────────────────┐    │
│  │         Tool Registry          │    │
│  ├────────────────────────────────┤    │
│  │ • get_tension_data()           │    │
│  │ • fetch_gdelt_events()         │    │
│  │ • get_travel_advisories()      │    │
│  │ • analyze_geopolitical_risk()  │    │
│  │ • recommend_destinations()     │    │
│  │ • get_weather_safety()         │    │
│  └────────────────────────────────┘    │
└─────────────────┬───────────────────────┘
                  │
         ┌────────┴────────┐
         ▼                 ▼
┌──────────────┐   ┌──────────────┐
│  GDELT API   │   │ Travel.State │
│   (Events)   │   │  .Gov API    │
└──────────────┘   └──────────────┘
         │                 │
         └────────┬────────┘
                  ▼
         ┌──────────────┐
         │  Claude API  │
         │ (Reasoning)  │
         └──────────────┘

MCP Implementation Example:

1. MCP Server (Backend) - mcp-server/index.js

import { MCPServer } from '@modelcontextprotocol/server';

const server = new MCPServer({
  name: 'europesafe-backend',
  version: '1.0.0',
  tools: [
    {
      name: 'get_current_tension_data',
      description: 'Fetch real-time geopolitical tension scores',
      parameters: {
        country_iso3: { type: 'string', required: false }
      },
      handler: async ({ country_iso3 }) => {
        // Aggregate from multiple sources
        const gdeltScore = await fetchGDELTEvents(country_iso3);
        const advisories = await fetchTravelAdvisories(country_iso3);
        const newsAnalysis = await analyzeRecentNews(country_iso3);

        return calculateRiskScore({
          gdeltScore,
          advisories,
          newsAnalysis,
          historicalTrends: getHistoricalData(country_iso3)
        });
      }
    },

    {
      name: 'recommend_safe_destinations',
      description: 'AI-powered destination recommendations',
      parameters: {
        preferences: { type: 'object' },
        max_risk_score: { type: 'number', default: 50 }
      },
      handler: async ({ preferences, max_risk_score }) => {
        const safeCountries = await querySafeCountries(max_risk_score);
        const matched = matchUserPreferences(safeCountries, preferences);
        return rankByScore(matched);
      }
    },

    {
      name: 'explain_risk_factors',
      description: 'Detailed breakdown of why a country has its risk score',
      parameters: {
        country_iso3: { type: 'string', required: true }
      },
      handler: async ({ country_iso3 }) => {
        const factors = await analyzeRiskFactors(country_iso3);
        return {
          primary_risks: factors.primary,
          recent_events: factors.events,
          trend_analysis: factors.trends,
          travel_tips: generateTravelTips(factors)
        };
      }
    }
  ]
});

server.listen(3000);

2. MCP Client (Frontend) - Update index.html

import { MCPClient } from '@modelcontextprotocol/client';

const mcpClient = new MCPClient({
  serverUrl: 'http://localhost:3000',
  llmProvider: {
    name: 'anthropic',
    apiKey: process.env.ANTHROPIC_API_KEY,
    model: 'claude-3-5-sonnet-20241022'
  }
});

async function sendMessage() {
  const userMessage = chatInput.value.trim();
  addMessage(userMessage, 'user');

  // AI can now use MCP tools automatically
  const response = await mcpClient.chat({
    messages: [
      { role: 'system', content: 'You are a travel safety advisor with access to real-time geopolitical data.' },
      { role: 'user', content: userMessage }
    ],
    tools: mcpClient.getAvailableTools() // AI chooses which tools to use
  });

  addMessage(response.content, 'bot');
}

3. Example Conversation with MCP:

User: "Is it safe to visit Poland right now?"

AI: *calls get_current_tension_data({ country_iso3: 'POL' })*
    *calls fetch_gdelt_events({ country_iso3: 'POL' })*
    *calls get_travel_advisories({ country_iso3: 'POL' })*

AI Response: "Poland currently has a tension score of 65 (Elevated).
While major cities like Warsaw and Krakow remain safe for tourists,
the elevated score reflects:

1. **Border Tensions** - Proximity to Ukraine conflict (150km from eastern border)
2. **Infrastructure Risks** - Rail/energy facilities considered strategic targets
3. **Recent Events** - 3 security incidents in past 30 days (GDELT data)

**Travel Advice:**
✅ Western/Southern Poland: Generally safe
⚠️ Eastern border regions: Avoid within 100km of Ukraine
✅ Major cities: Normal precautions apply

Would you like recommendations for safer alternatives nearby?"

Prerequisites:

• Node.js 18+ or Python 3.10+
• API keys for data sources (GDELT, travel advisories)
• LLM API key (OpenAI, Anthropic, etc.)

Quick Start:

# 1. Clone MCP server template
git clone https://github.com/yourusername/europesafe-mcp-server
cd europesafe-mcp-server

# 2. Install dependencies
npm install

# 3. Configure environment
cp .env.example .env
# Add your API keys to .env

# 4. Start MCP server
npm run dev

# 5. Update frontend to use MCP client
# (See implementation example above)

Environment Variables:

ANTHROPIC_API_KEY=your-key-here
GDELT_API_KEY=your-key-here
TRAVEL_GOV_API_KEY=your-key-here
MCP_SERVER_PORT=3000

Phase 1: Simple API (Current)

• Basic chat UI ✅
• Placeholder responses ✅

Phase 2: Direct LLM Integration

• OpenAI/Claude API connection
• Context from europe-tension.json
• Basic Q&A capability

Phase 3: MCP Architecture 🎯 Recommended

• Real-time GDELT data integration
• Government travel advisory aggregation
• Multi-source intelligence fusion
• Tool-enabled AI reasoning
• Dynamic risk score updates

Phase 4: Advanced Features

• Weather safety integration
• Flight price correlation
• Accommodation risk assessment
• Historical trend analysis
• Predictive modeling

Edit data/europe-tension.json:

{
  "version": "3.0",
  "source": "Synthetic Data - Travel Safety Index",
  "scores": [
    {
      "iso3": "AUT",
      "country": "Austria",
      "score": 20,
      "level": "low",
      "risk": "Low",
      "notes": "Generally safe; tourist areas can be crowded."
    }
  ]
}

Modify the getTensionColor() function in index.html:

const colorStops = [
    { value: 0,   color: [26, 152, 80] },   // Your custom RGB
    { value: 100, color: [165, 0, 38] }     // Your custom RGB
];

Advantages:

• ✅ Free hosting forever
• ✅ Global CDN (fast worldwide)
• ✅ HTTPS by default
• ✅ Easy updates via Git push

Setup:

1. Push code to GitHub repository
2. Go to Settings → Pages
3. Select main branch → Save
4. Access at https://yourusername.github.io/europesafe

Advantages:

• ✅ Blazing fast CDN
• ✅ Custom domain support
• ✅ Analytics included

Advantages:

• ✅ One-click deployment
• ✅ Automatic HTTPS
• ✅ Preview deployments

See DEPLOYMENT.md for detailed instructions.

✅ XSS Protection - Input sanitization on all user inputs ✅ No Inline Event Handlers - Modern event listener architecture ✅ CORS-Ready - Secure cross-origin resource sharing ✅ Content Security - textContent usage prevents injection ✅ Input Validation - 500-character limit on chat messages ✅ No External Dependencies - Minimal attack surface

🔒 Zero Tracking - No analytics, no cookies, no fingerprinting 🔒 No User Data - All processing happens client-side 🔒 No Backend - Static site with no server logs 🔒 Open Source - Code is transparent and auditable

"Should I book flights to Eastern Europe this summer?"

• Visualize regional safety at a glance
• Compare destination risks side-by-side
• Get AI recommendations based on your risk tolerance

"Teaching international relations or geography?"

• Interactive visual aid for geopolitical concepts
• Real-time discussion tool for current events
• Customizable data for classroom scenarios

"Learning web mapping and data visualization?"

• Clean, well-documented codebase
• Modern vanilla JavaScript patterns
• Leaflet.js integration examples
• API integration scaffolding

"Analyzing regional stability patterns?"

• Visual correlation analysis tool
• Customizable data input format
• Export-ready map visualizations

• Initial Load: < 2 seconds on 3G
• Bundle Size: ~60KB (HTML + CSS + JS)
• Data Transfer: ~15KB JSON per refresh
• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices)

We welcome contributions! Here's how you can help:

Open an issue with detailed description and reproduction steps.

1. Fork the repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open Pull Request

• 🌍 Additional country data coverage
• 🤖 AI model integrations
• 📱 Mobile UX improvements
• 🌐 Internationalization (i18n)
• 📊 Additional data visualization layers

This project is licensed under the MIT License - see LICENSE file.

MIT License - You are free to:
✅ Use commercially
✅ Modify
✅ Distribute
✅ Private use

• Leaflet.js - Incredible open-source mapping library
• Natural Earth Data - Public domain map data
• Community Contributors - Thank you for your support!

• Issues: GitHub Issues
• Email: [email protected]
• Discussions: GitHub Discussions

If you find EuropeSafe useful, please consider giving it a ⭐ on GitHub!