Step 01
Web agent scraper
Gemini plans browser actions over a simplified DOM and screenshot loop, then Playwright executes clicks, scrolls, waits, and extraction steps.
GeminiPlaywright
01 Overview
Built as a full system.
Not a prompt wrapper. The project joins data collection, ML scoring, agent planning, and a user-facing app.
AgenTrail solves trip planning as a data and orchestration problem, not just a chat interface.
The product lets a traveler choose a city, budget, family size, interests, schedule, and model preferences. Behind the UI, the backend validates the request, checks whether city data is stale, refreshes data when needed, ranks attractions, and streams the planner's reasoning back to the browser.
We built the system around a pipeline: a Playwright web agent discovers attractions, an enrichment agent normalizes records, ML models score candidates, and a planner agent assembles an itinerary using database search, AutoML scores, and Google Maps travel-time tools.
9
City datasets prepared
2
Ranking models compared
SSE
Live planner log streaming
02 Architecture
Agent pipeline.
Each layer has a narrow job, which keeps the itinerary output explainable and debuggable.
Step 02
Data enrichment
Raw attraction rows are normalized into canonical categories, price tiers, descriptions, coordinates, and structured fields validated by Pydantic models.
PydanticSQLite
Step 03
ML ranking
Feature engineering produces user-attraction pairs for Random Forest and XGBoost style ranking experiments, letting the planner compare primary and alternative itineraries.
scikit-learnOptuna
Step 04
Planner agent
The agent uses tools for database search, model scores, and travel times, then produces a day-by-day itinerary based on budget, tags, family ages, and start time.
ToolsMaps API
Step 05
FastAPI stream
The backend validates strict request fields and streams live log events plus final JSON results through the `/plan/stream` endpoint.
FastAPISSE
Step 06
React interface
A Vite app presents city discovery, trip configuration, generated itineraries, diagnostics, and interactive map context.
ReactVite
03 Product
The user flow.
Actual screens from the working app: city discovery, generated itineraries, map-backed review controls, and diagnostics telemetry.
Step 01 / Explorer
Choose a city from the visual destination grid.
The first screen lets travelers browse supported cities and start with a clear destination choice. Selecting Dubai, Tokyo, London, or another card carries the city into the planner configuration flow.
Step 02 / Itinerary
Review a ranked day plan beside the route map.
The generated Dubai itinerary shows model-ranked stops, prices, ratings, schedule timing, export controls, and a Google map route so the plan is inspectable instead of just text output.
Step 03 / Feedback
Let users accept or reject recommendations.
The Tokyo flow adds preference actions directly to itinerary cards. Travelers can save or reject stops while still seeing the route context, making the planner easier to refine over time.
Step 04 / Diagnostics
Surface system telemetry and execution logs.
The diagnostics page exposes neural load, precision accuracy, active core nodes, token extraction, service status, and runtime logs so long-running agent work is easier to monitor and debug.
04 Technical
Important decisions.
The hard parts were reliability, data quality, and making agent behavior visible.
Fresh data path
- Per-city SQLite databases let the backend check freshness city by city.
- The scraper can be forced from the planning request for stale or missing data.
- Raw data is stored separately from enriched attraction records.
Agent guardrails
- Browser observations use simplified DOM state to reduce token noise.
- A critic pass catches repeated or risky browser actions before execution.
- Pydantic models validate planner requests and enriched attraction payloads.
Planner quality
- AutoML scores help rank attractions against user preferences.
- Primary and alternative model outputs can be compared in one request.
- Maps travel-time tools add practical routing context to itinerary choices.
05 Workflow
From request to plan.
Input
Traveler constraints
City, budget, days, family profile, tags, timing, and model options.
Data
Freshness check
Backend checks whether city data exists or needs refresh before planning.
Rank
Candidate scoring
Attractions are retrieved and scored using trained model artifacts.
Plan
Agent synthesis
Planner agent combines scores, metadata, travel times, and constraints.
Output
Live itinerary
SSE sends logs during execution and a final structured JSON result.
06 Reflection
What this proves.
System thinking
AgenTrail demonstrates the kind of AI application work we deliver: useful interfaces backed by concrete data pipelines, validation layers, model evaluation, and operational visibility. The challenge was making every layer work together without turning the product into a brittle demo.
Next improvements
The next version would add persistent user accounts, saved trips, richer route optimization, stronger evaluation datasets for ranking quality, and admin controls for reviewing scraped attraction records before they reach production planning.