✈️ Trip Tasker - AI-Powered Travel Planning Assistant

Trip Tasker is an AI-powered travel planning application built on Cloudflare's platform. It helps users discover destinations, create detailed itineraries, find local attractions, check weather, and schedule trip-related tasks using natural language conversation.

🎯 Assignment Requirements Compliance

This project meets all Cloudflare AI assignment requirements:

• ✅ LLM: Uses Llama 3.3 70B (@cf/meta/llama-3.3-70b-instruct-fp8-fast) via Cloudflare Workers AI.
• ✅ Workflow/Coordination: Implemented using Durable Objects (TripPlanner agent) and specialized API routing in server.ts.
• ✅ User Input: Modern React chat interface with real-time streaming and a proactive welcome greeting.
• ✅ Memory/State: Persistent state management via Durable Object ctx.storage (KV) for saved trips and Agent state API for session memory.

🚀 Features

• 💬 Interactive Chat Interface: Natural language conversation with the AI travel assistant
• 🌍 Destination Discovery: Search for travel destinations based on keywords and interests
• 📅 Itinerary Planning: Generate day-by-day trip plans for any destination
• 🗺️ Places of Interest: Find must-see attractions and landmarks in specific cities
• 🌤️ Weather Information: Get weather updates for travel destinations (with human confirmation)
• 💾 Persistent Memory: Reliable save/load system for trip plans using Durable Object storage.
• 🌓 Dark/Light Theme: Modern UI with theme switching.
• ⚡ Real-time Streaming: Live response streaming for natural conversation flow.
• 🛠️ Auto-Repair Logic: Defensive client-side logic to ensure legacy trip data never crashes the UI.

🏗️ Architecture

🏗️ Architectural Deep-Dive

This application is built on a distributed Cloudflare architecture, leveraging the "Brain & Routing" pattern to separate AI logic from web interfaces.

Core Components

1. The Brain: LLM (Large Language Model)

• Role: Serves as the primary intelligence engine for itinerary generation and destination discovery.
• What it does: Parses natural language, invokes specialized travel tools, and generates human-like responses in real-time.
• Model: Llama 3.3 70B Instruct (@cf/meta/llama-3.3-70b-instruct-fp8-fast).
• Location: Implementation found in src/agent.ts:L60-L63. It uses the workers-ai-provider to connect directly to Cloudflare's GPU network.

2. The Coordinator: Workflow & Durable Objects

• Role: Manages the state and provides consistent coordination for the AI agent.
• What it does: Acts as a stateful entity that lives on the Cloudflare edge. It maintains the AI's "short-term memory" (conversation history) and handles complex RPC operations like "Save Chat" and "Restore History."
• Location:
  • The coordination logic is in the TripPlanner class in src/agent.ts.
  • The interface and routing logic that connects the web to this coordinator is in src/server.ts.

3. The Interface: User Input (Chat & UI)

• Role: The primary entry point for users to interact with the system.
• What it does: Provides a real-time, responsive chat interface built with React. It handles message streaming, manages the "Saved Trips" sidebar, and processes tool confirmations (e.g., confirming before a weather lookup).
• Location:
  • Main UI logic: src/app.tsx.
  • Reusable components: src/components/.
  • Global styles and design system: src/index.css.

4. The Vault: Memory & State

• Role: Ensures that user data persists across browser sessions and AI restarts.
• What it does:
  • Saved Trips: Persists user itineraries in Durable Object ctx.storage (KV-based).
  • AI Memory: Synchronizes the backend AI brain with the frontend message history using a specialized restoration API.
• Location:
  • Persistence logic: src/agent.ts (methods like saveChatAsTrip and restoreChat).
  • API endpoints for memory sync: Found in src/server.ts under /api/trip-plans/save and /api/trip-plans/restore.

📋 Prerequisites

• Node.js 18+ and npm
• Cloudflare account (free tier works)
• Wrangler CLI (installed via npm)

🛠️ Installation & Setup

1. Clone the Repository

git clone <your-repo-url>
cd cf_ai_triptasker

2. Install Dependencies

npm install

3. Log in to Cloudflare

The project uses Cloudflare Workers AI and Durable Objects. To ensure you have a clean authentication state, please follow these steps:

1. Logout of any existing sessions:

   npx wrangler logout

2. Login to your Cloudflare account:

   npx wrangler login

   Follow the browser prompts to authorize Wrangler.

4. Run Locally

Start the development environment:

npm run dev

IMPORTANT: Once the command is running, click the local link provided in your terminal (typically http://localhost:5173) to open the Trip Tasker interface.

This will concurrently:

1. Start the Vite frontend server.
2. Start the Cloudflare Worker/Durable Object dev server (Miniflare/Wrangler).
3. Handle AI requests via Cloudflare Workers AI.

5. Deploy to Cloudflare

Deploy the worker and the frontend:

npm run deploy

This will:

• Build the frontend (React app)
• Deploy the Worker and Durable Objects
• Publish to Cloudflare Pages

📖 Usage Examples

Discovering Destinations

User: "Find me beach destinations"
Trip Tasker: [Searches and suggests beach destinations like Santorini, Bali, etc.]

Creating Itineraries

User: "Plan a 5-day trip to Tokyo"
Trip Tasker: [Generates day-by-day itinerary with morning, afternoon, and evening activities]

Finding Places of Interest

User: "What are the best places to visit in Paris?"
Trip Tasker: [Lists popular attractions like Eiffel Tower, Louvre Museum, etc.]

Scheduling Tasks

User: "Remind me to book flights in 2 hours"
Trip Tasker: [Schedules a delayed task that will execute in 2 hours]

User: "Schedule a daily reminder to check visa requirements"
Trip Tasker: [Creates a recurring cron task]

🗂️ Project Structure

cf_ai_triptasker/
├── src/
│   ├── app.tsx              # React chat UI component
│   ├── server.ts            # TripPlanner Durable Object agent
│   ├── tools.ts             # AI tool definitions (search, itinerary, etc.)
│   ├── utils.ts             # Helper functions for message processing
│   ├── styles.css           # Global styles and theme
│   └── components/          # Reusable UI components
├── public/                  # Static assets
├── wrangler.jsonc           # Cloudflare Workers configuration
├── package.json             # Dependencies and scripts
├── README.md               # This file
└── PROMPTS.md              # AI prompts used during development

🔧 Key Files Explained

src/server.ts

• Contains the TripPlanner class that extends AIChatAgent
• Handles chat messages, tool execution, and state management
• Implements database operations for trip plans and user preferences
• Uses Llama 3.3 via Workers AI provider

src/tools.ts

• Defines all available AI tools:
  • searchDestinations: Find travel destinations
  • getItinerary: Generate day-by-day plans
  • getPlacesOfInterest: Find attractions
  • getWeatherInformation: Weather lookup (requires confirmation)
  • getLocalTime: Get local time for a location
  • scheduleTask: Schedule reminders and tasks
  • getScheduledTasks: List all scheduled tasks
  • cancelScheduledTask: Cancel a scheduled task

src/app.tsx

• React component for the chat interface
• Connects to the Durable Object agent via useAgent hook
• Handles message rendering, tool confirmations, and user input
• Implements theme switching and UI state management

wrangler.jsonc

• Cloudflare Workers configuration
• Defines Durable Object bindings for TripPlanner
• Configures AI binding for Workers AI
• Sets up SQLite migrations for the agent

🧪 Testing

Run the test suite:

npm test

Run code quality checks:

npm run check

This runs:

• Prettier (code formatting)
• Biome (linting)
• TypeScript (type checking)

📝 AI-Assisted Development

This project was developed with AI assistance. All prompts used during development are documented in PROMPTS.md.

🔗 Additional Resources

• Cloudflare Agents Documentation
• Cloudflare Workers AI
• Cloudflare Durable Objects
• Cloudflare Pages
• AI SDK Documentation

📄 License

MIT

🙏 Acknowledgments

Built using:

• Cloudflare Agents platform
• Cloudflare Workers AI (Llama 3.3)
• React and Vite
• AI SDK by Vercel