Travel Budget Planner

Project Blueprint: Travel Budget Planner

1. The Business Problem (Why build this?)

Modern travel, while enriching, often introduces significant financial stress and complexity. Travelers frequently face challenges in accurately estimating expenses, tracking spending during a trip, and converting currencies, leading to budget overruns and post-vacation financial anxiety. Existing solutions often range from overly simplistic spreadsheet templates to complex personal finance management tools that are not specifically tailored for the ephemeral and dynamic nature of travel budgeting.

The core pain points addressed by the Travel Budget Planner are:

• Lack of Foresight: Many individuals embark on trips with a vague idea of costs, leading to insufficient savings or unexpected expenses.
• In-trip Overspending: Without real-time tracking, it's easy to lose track of cumulative spending, especially across different categories (food, accommodation, activities) and currencies.
• Currency Conversion Confusion: International travel necessitates constant mental (or manual) conversion, which is error-prone and time-consuming, hindering immediate budget assessment.
• Post-trip Reconciliation Fatigue: Reconciling actual spending against a planned budget after a trip is often an arduous, manual process, diminishing the overall positive memory of the vacation.
• Accessibility & Simplicity: Many tools are either too basic (requiring manual data entry and calculation) or too feature-rich and complex, presenting a steep learning curve for the average traveler who simply needs a straightforward budgeting aid.

This application aims to democratize effective travel budgeting by offering an intuitive, focused, and user-friendly platform that empowers travelers to plan, track, and manage their finances proactively, ensuring peace of mind and a more enjoyable travel experience.

2. Solution Overview

The Travel Budget Planner is a single-page application (SPA) designed to empower users to meticulously plan their travel finances and monitor their spending against a predefined budget. Its primary value proposition lies in its simplicity and focus, providing essential tools without unnecessary clutter.

Users will be able to:

1. Create and manage multiple trips: Each trip acts as a container for its specific budget and expenses.
2. Define a comprehensive budget: Users can allocate funds across various pre-defined or custom expense categories (e.g., Flights, Accommodation, Food, Activities, Transport, Shopping).
3. Track actual expenses: During or after a trip, users can log individual expenses, associating them with categories and the correct currency.
4. Visualize budget vs. actuals: An interactive chart will provide an immediate, clear visual representation of spending performance against the budget for each category and overall.
5. Perform basic currency conversions: A utility will assist in converting foreign currency expenses back to the user's home currency for consistent tracking.
6. Gain insights: By comparing planned versus actual spending, users can identify areas of over or underspending, facilitating better financial decisions for future trips.

The application emphasizes a delightful user experience through a clean, intuitive interface, making the often-daunting task of financial planning approachable and even engaging. Its local-storage-based persistence ensures privacy and offline availability, aligning perfectly with a beginner-level, personal utility application.

3. Architecture & Tech Stack Justification

The chosen architecture prioritizes rapid development, a rich user experience, and a strong foundation for future enhancements, even within a "Beginner" difficulty scope. It leverages modern web technologies for a robust, performant, and maintainable application.

3.1. High-Level Architecture:

The application follows a client-side rendered (CSR) SPA pattern, primarily operating within the user's browser. While Next.js provides server-side rendering (SSR) capabilities, for a beginner-level, local-storage-centric application, most rendering will occur on the client, with Next.js serving as a sophisticated framework for development and build tooling.

+-------------------+
|     User Browser  |
|                   |
|  +----------------+-----------+
|  | Next.js Client Application |
|  |                            |
|  | - React Components         |
|  | - State Management (React Context/Zustand/Jotai) |
|  | - Data Persistence (Local Storage API)           |
|  | - UI Kit (Headless UI)                           |
|  | - Charting Library (e.g., Recharts)              |
|  | - Mapbox Static Image API (for visual flair)     |
|  +----------------------------+
+-------------------+

3.2. Tech Stack Justification:

• Next.js (React Framework):

  • Developer Experience (DX): Next.js offers an exceptional DX with features like Fast Refresh, file-system routing, and built-in CSS support, accelerating development.
  • Performance: Even for a client-side app, Next.js provides optimizations like automatic code splitting and image optimization, leading to a snappier user interface.
  • Scalability Foundation: While currently a client-side app, Next.js provides a straightforward path to adding API routes (e.g., /api/trips) if a backend or cloud persistence were ever introduced, making it future-proof.
  • Static Site Generation (SSG): For a beginner project, building a static Next.js app is straightforward and highly performant for deployment to various hosting providers.

• Local Storage (for Data Persistence):

  • Simplicity: No need for a database, backend server, or complex authentication. Data is stored directly in the user's browser. This aligns perfectly with the "Beginner" difficulty.
  • Offline Capability: Users can access and manage their data even without an internet connection.
  • Privacy: Data never leaves the user's device, which is appealing for personal finance applications.
  • Limitations: Data is tied to a specific browser/device, limited storage capacity (typically 5-10MB), and susceptible to browser cache clearing. These are acceptable trade-offs for a beginner project.

• Headless UI (Component Library):

  • Unstyled Components: Provides accessible, unstyled UI primitives (e.g., Dialog, Transition, Menu) that can be fully customized with Tailwind CSS or custom CSS. This allows for a unique, branded look without fighting opinionated component styles.
  • Accessibility (A11y): Built-in keyboard navigation, focus management, and ARIA attributes ensure the application is usable by everyone.
  • Flexibility: Gives developers complete control over the markup and styling, essential for crafting a precise user experience.

• Mapbox (Static Image API):

  • Visual Engagement: A static map image of the destination adds a nice visual touch to each trip overview without the overhead of a fully interactive map.
  • Simplicity: The Mapbox Static Image API is straightforward to use, requiring only a URL construction based on coordinates and zoom level. No complex client-side map libraries are needed.
  • Branding: Allows for consistent styling of the map images.

• State Management (React Context API or lightweight library like Zustand/Jotai):

  • For a beginner project with local storage, the React Context API is sufficient for global state (e.g., active trip, list of all trips, currency rates).
  • Alternatively, a lightweight state management library like Zustand or Jotai can offer a slightly more performant and less boilerplate-heavy alternative while still being easy to learn.

• Charting Library (e.g., Recharts or Chart.js):

  • Essential for the "Interactive Budget Chart" feature. Libraries like Recharts offer declarative React components, making it easy to render various chart types (Pie, Bar) with minimal code.

4. Core Feature Implementation Guide

This section outlines the data structures, key logic, and UI considerations for the core features.

4.1. Data Structures:

All data will be stored as JSON strings in localStorage.

// types.ts

interface Expense {
  id: string; // UUID
  description: string;
  amount: number;
  currency: string; // ISO 4217 code, e.g., "USD", "EUR"
  categoryId: string; // Link to ExpenseCategory
  date: string; // ISO date string, e.g., "YYYY-MM-DD"
  convertedAmount: number; // Amount converted to base currency (for display)
}

interface ExpenseCategory {
  id: string; // UUID
  name: string; // e.g., "Accommodation", "Food & Drinks"
  icon?: string; // Optional icon for UI
}

interface TripBudget {
  categoryId: string; // Link to ExpenseCategory
  budgetedAmount: number; // Amount in base currency
}

interface Trip {
  id: string; // UUID
  name: string;
  destination: string; // e.g., "Paris, France"
  startDate: string; // ISO date string
  endDate: string; // ISO date string
  baseCurrency: string; // User's primary currency for this trip
  budget: TripBudget[]; // Array of budgeted amounts per category
  expenses: Expense[]; // Array of expenses for this trip
  mapboxStaticImageUrl?: string; // URL for the static map image
}

interface AppState {
  trips: Trip[];
  expenseCategories: ExpenseCategory[]; // Global list of available categories
  currencyRates: Record<string, number>; // e.g., { "EUR": 1.08, "GBP": 1.25 } relative to a base currency (e.g., USD)
  lastCurrencyFetchDate?: string; // To manage rate freshness
}

4.2. Local Storage Management:

A utility class or set of functions to handle data serialization/deserialization.

// utils/localStorage.ts

const LOCAL_STORAGE_KEY = 'travelBudgetPlannerData';

export const loadState = (): AppState | null => {
  try {
    const serializedState = localStorage.getItem(LOCAL_STORAGE_KEY);
    if (serializedState === null) {
      return null;
    }
    return JSON.parse(serializedState);
  } catch (error) {
    console.error("Error loading state from local storage:", error);
    return null;
  }
};

export const saveState = (state: AppState) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem(LOCAL_STORAGE_KEY, serializedState);
  } catch (error) {
    console.error("Error saving state to local storage:", error);
  }
};

// Initial state setup for new users
export const getInitialState = (): AppState => ({
  trips: [],
  expenseCategories: [
    { id: 'cat-flight', name: 'Flights' },
    { id: 'cat-accom', name: 'Accommodation' },
    { id: 'cat-food', name: 'Food & Drinks' },
    { id: 'cat-act', name: 'Activities' },
    { id: 'cat-trans', name: 'Transportation' },
    { id: 'cat-shop', name: 'Shopping' },
    { id: 'cat-misc', name: 'Miscellaneous' },
  ],
  currencyRates: { 'USD': 1.0, 'EUR': 0.92, 'GBP': 0.79, 'JPY': 151.7 }, // Hardcoded for 'Basic'
  lastCurrencyFetchDate: new Date().toISOString().split('T')[0],
});

4.3. Core Feature Implementations:

4.3.1. Trip Management (Create/Edit/Delete Trip)

• UI: A list of existing trips on the homepage. A form (e.g., using a Headless UI Dialog component) for creating/editing trips.
• Form Fields: Trip Name, Destination, Start Date, End Date, Base Currency.
• Logic:
  • createTrip(newTrip: Omit<Trip, 'id' | 'budget' | 'expenses'>): Generate UUID, initialize budget and expenses as empty arrays, generate Mapbox image URL, add to AppState.trips, then saveState().
  • updateTrip(tripId: string, updates: Partial<Trip>): Find trip by ID, merge updates, handle regenerating Mapbox image if destination changes. saveState().
  • deleteTrip(tripId: string): Filter out the trip from AppState.trips. saveState().
• Mapbox Static Image Generation:

  // utils/mapbox.ts
  const MAPBOX_ACCESS_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN; // Store securely
  const MAPBOX_STYLE = 'mapbox/streets-v11'; // Or any other style
  
  export async function getMapboxStaticImageUrl(destination: string): Promise<string | undefined> {
    if (!MAPBOX_ACCESS_TOKEN) {
      console.warn("Mapbox Access Token not set.");
      return undefined;
    }
    try {
      // Use a geocoding API to get coordinates from destination string.
      // For a beginner app, we might simplify or assume some locations.
      // A simple approach: use a placeholder or manual lookup for coordinates.
      // Example: For "Paris, France" -> 2.3522, 48.8566
      const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(destination)}.json?access_token=${MAPBOX_ACCESS_TOKEN}&limit=1`);
      const data = await response.json();
  
      if (data.features && data.features.length > 0) {
        const [longitude, latitude] = data.features[0].center;
        const zoom = 10; // Adjust zoom as needed
        const width = 600;
        const height = 300;
        return `https://api.mapbox.com/styles/v1/${MAPBOX_STYLE}/static/${longitude},${latitude},${zoom}/${width}x${height}?access_token=${MAPBOX_ACCESS_TOKEN}`;
      }
      return undefined;
    } catch (error) {
      console.error("Error generating Mapbox static image URL:", error);
      return undefined;
    }
  }
  

4.3.2. Trip Expense Categories & Budgeting

• UI: A dedicated section within each trip's detail page. Users see a list of categories with input fields for budgeted amounts.
• Logic:
  • When a trip is created, initialize its budget array with entries for all global expenseCategories, setting budgetedAmount to 0.
  • updateCategoryBudget(tripId: string, categoryId: string, amount: number): Find the trip, update the budgetedAmount for the specified categoryId. saveState().
• Adding/Editing Categories: Allow users to add custom categories beyond the initial set, updating AppState.expenseCategories.

4.3.3. Budget vs. Actual Tracking

• UI:
  • Expense Entry Form: Fields for Description, Amount, Currency, Category, Date.
  • Expense List: Display all expenses for the current trip.
  • Summary View: Show total budgeted vs. total actual spending, and per-category breakdown.
• Logic:
  • addExpense(tripId: string, newExpense: Omit<Expense, 'id' | 'convertedAmount'>):
    1. Generate UUID for expense.
    2. Call convertCurrency (see 4.3.4) to calculate convertedAmount to the trip's baseCurrency.
    3. Add newExpense to trip.expenses.
    4. saveState().
  • calculateCategoryActual(trip: Trip, categoryId: string): number: Iterate trip.expenses, filter by categoryId, sum their convertedAmount.
  • calculateTotalActual(trip: Trip): number: Sum all convertedAmount in trip.expenses.
  • calculateTotalBudget(trip: Trip): number: Sum all budgetedAmount in trip.budget.

4.3.4. Basic Currency Converter

• UI: A simple form within the expense entry for selecting currency and showing converted amount. Can also have a standalone converter utility page.
• Logic:
  • Initial AppState.currencyRates contains hardcoded rates (e.g., relative to USD).
  • For a "Basic" converter, assume USD as the internal common base currency for simplicity. If the trip's base currency isn't USD, convert it first to USD, then from USD to the target currency.
  • convertCurrency(amount: number, fromCurrency: string, toCurrency: string, rates: Record<string, number>): number:

    export const convertCurrency = (
      amount: number,
      fromCurrency: string,
      toCurrency: string,
      rates: Record<string, number> // e.g., { "USD": 1, "EUR": 0.92, "GBP": 0.79 } where base is USD
    ): number => {
      if (fromCurrency === toCurrency) {
        return amount;
      }
    
      // Assume 'USD' is the implicit base currency for the provided rates.
      // Convert 'fromCurrency' to 'USD'
      const amountInUSD = amount / (rates[fromCurrency] || 1); // If rate not found, assume 1
    
      // Convert 'USD' to 'toCurrency'
      const convertedAmount = amountInUSD * (rates[toCurrency] || 1);
    
      return parseFloat(convertedAmount.toFixed(2)); // Round to 2 decimal places
    };
    

  • Refinement: For real-world usage beyond "Basic", currency rates would be fetched from a reliable external API (e.g., ExchangeRate-API, Open Exchange Rates) and cached in localStorage with an expiry.

4.3.5. Interactive Budget Chart

• UI: A chart displayed prominently on the trip detail page, visualizing budget vs. actual for each category. A Pie Chart or a Bar Chart (stacked or grouped) would be suitable.
• Data Preparation:

  // components/BudgetChart.tsx (pseudo-code)
  import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'; // Example with Recharts
  
  interface ChartData {
    name: string;      // Category name
    budgeted: number;
    actual: number;
    fill: string;      // Color for chart segment
  }
  
  const getChartData = (trip: Trip, categories: ExpenseCategory[]): ChartData[] => {
    return categories.map(category => {
      const budgeted = trip.budget.find(b => b.categoryId === category.id)?.budgetedAmount || 0;
      const actual = calculateCategoryActual(trip, category.id);
      const ratio = actual / (budgeted || 1); // Avoid division by zero
      let fill = '#8884d8'; // Default color
  
      // Simple color logic based on spending performance
      if (budgeted > 0) {
          if (ratio > 1.0) fill = '#ef4444'; // Red: Over budget
          else if (ratio > 0.8) fill = '#f59e0b'; // Amber: Approaching budget
          else fill = '#22c55e'; // Green: Under budget
      } else if (actual > 0) { // Spent money but no budget defined
          fill = '#f59e0b';
      }
  
      return {
        name: category.name,
        budgeted,
        actual,
        fill,
      };
    });
  };
  
  // Render component
  const BudgetChart = ({ trip, categories }) => {
    const data = getChartData(trip, categories);
    return (
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            dataKey="actual" // Show actual spending
            nameKey="name"
            cx="50%"
            cy="50%"
            outerRadius={80}
            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.fill} />
            ))}
          </Pie>
          <Tooltip formatter={(value, name, props) => [`Actual: ${trip.baseCurrency} ${value.toFixed(2)}`, name]} />
          {/* Add another Pie for budgeted if desired, or use a BarChart for comparison */}
        </PieChart>
      </ResponsiveContainer>
    );
  };
  

5. Gemini Prompting Strategy

While the core application focuses on manual data entry and local persistence, as a Staff AI Engineer at Google, envisioning future enhancements with AI is paramount. Gemini, with its multimodal capabilities and strong reasoning, can significantly elevate the user experience beyond simple data tracking. Here’s a strategy for integrating Gemini, even if only conceptually or for future phases:

5.1. AI-Powered Budget Recommendations:

• Goal: Provide intelligent, context-aware budget suggestions for a new trip.
• User Input for Prompt: Destination, Trip Duration (start/end dates), Travel Style (e.g., "budget-conscious," "mid-range," "luxury"), Number of Travelers.
• Gemini Prompt Structure:

  "You are an expert travel finance advisor. Based on the following trip details, provide a realistic budget breakdown for typical expense categories. Use [BASE_CURRENCY] for all amounts. Assume average costs for a [TRAVEL_STYLE] traveler.
  
  Trip Destination: [DESTINATION] ([COUNTRY_CODE], if available)
  Trip Duration: [NUMBER_OF_DAYS] days (from [START_DATE] to [END_DATE])
  Travel Style: [TRAVEL_STYLE]
  Number of Travelers: [NUMBER_OF_TRAVELERS]
  Base Currency: [BASE_CURRENCY]
  
  Provide a breakdown for the following categories:
  - Accommodation (e.g., hotel, hostel, Airbnb)
  - Flights/Transportation (to/from destination)
  - Local Transportation (e.g., public transport, taxis)
  - Food & Drinks (e.g., restaurants, groceries, cafes)
  - Activities & Sightseeing (e.g., museum tickets, tours)
  - Shopping & Souvenirs
  - Miscellaneous/Contingency
  
  Format your response as a JSON object with category names as keys and recommended budget amounts as values (numbers). If a category is not applicable or cannot be estimated, use 0. Also, include a brief justification for the total budget and any key assumptions made.
  "
  

• Integration:
  1. User fills out basic trip details in the app.
  2. App sends this information to a lightweight backend API (even a serverless function) which then queries Gemini.
  3. Gemini's JSON output is parsed and pre-populates the budget fields in the application. Users can then adjust as needed.

5.2. Intelligent Expense Categorization:

• Goal: Automatically suggest the most appropriate category for a user-entered expense description.
• User Input for Prompt: Expense Description, Destination, Trip Category List.
• Gemini Prompt Structure:

  "You are an expense categorization assistant for a travel budget planner. Given an expense description and a list of available categories for a trip to [DESTINATION], identify the most fitting category.
  
  Expense Description: '[EXPENSE_DESCRIPTION]'
  Available Categories: [COMMA_SEPARATED_LIST_OF_CATEGORIES]
  
  Respond with ONLY the name of the most suitable category from the list. If no category fits well, respond with 'Miscellaneous'."
  

• Integration:
  1. When a user types an expense description (e.g., "Dinner at Eiffel Tower Restaurant"), the app triggers a call to Gemini via a backend.
  2. Gemini suggests "Food & Drinks."
  3. The suggested category is pre-selected in the expense entry form, saving the user clicks. The user can override it.

5.3. Proactive Spending Insights & Alerts:

• Goal: Analyze current spending patterns and provide actionable insights or warnings.
• User Input for Prompt: Current Trip State (Budgeted vs. Actual per category), Remaining Days, Trip Base Currency, Travel Style.
• Gemini Prompt Structure:

  "You are a proactive travel budget assistant. Analyze the current spending for a trip and provide insights and warnings.
  
  Trip: [TRIP_NAME] to [DESTINATION]
  Base Currency: [BASE_CURRENCY]
  Total Trip Duration: [TOTAL_DAYS] days
  Days Remaining: [DAYS_REMAINING]
  Current Date: [CURRENT_DATE]
  
  Budgeted vs. Actual Spending (Category: Budgeted, Actual):
  [LIST_OF_CATEGORY_SPENDING_DATA, e.g., 'Accommodation: 1000, 750', 'Food: 500, 400', ...]
  
  Based on this data, provide:
  1.  An overall assessment of budget adherence.
  2.  Identification of 1-2 categories that are significantly over/under budget or are trending towards overspending, with a brief explanation.
  3.  One actionable recommendation or warning to help the user stay within budget for the remaining trip duration.
  "
  

• Integration:
  1. The app could have a "Get Insights" button or trigger this automatically on the trip detail page.
  2. Gemini's text-based response is displayed to the user as helpful advice.

This strategic integration positions Gemini not as a core transactional component, but as an intelligent overlay that enhances decision-making and automates tedious tasks, making the Travel Budget Planner truly smart.

6. Deployment & Scaling

6.1. Deployment for a Beginner Project:

Given the Next.js and Local Storage tech stack, deployment is straightforward and highly efficient.

• Build Process:

  npm run build
  

  This command compiles the Next.js application into an optimized static site (HTML, CSS, JavaScript assets) within the .next directory. For output: 'export' in next.config.js, it will output to an out directory, which is ideal for static hosting.

• Hosting Options:

  • Vercel (Recommended): As Next.js is developed by Vercel, it offers first-class support. Deployment is as simple as connecting a Git repository (GitHub, GitLab, Bitbucket). Vercel automatically detects a Next.js project, builds it, and deploys it globally on their CDN. It's free for personal projects and handles custom domains.
  • Netlify: Similar to Vercel, Netlify offers excellent support for static sites and Next.js. Connect your Git repo, and Netlify handles the build and deployment. Also offers a generous free tier.
  • GitHub Pages: Publish the out directory directly from a GitHub repository branch. Requires a bit more manual configuration but is entirely free.
  • Google Cloud Storage / Firebase Hosting: For those within the Google ecosystem, compiled static assets can be uploaded to a Google Cloud Storage bucket and served via Firebase Hosting or directly through a load balancer.

• Environment Variables: Ensure NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN is correctly set during the build process in the CI/CD pipeline of the chosen hosting provider. This token is client-side public, so NEXT_PUBLIC_ prefix is crucial.

6.2. Scaling Considerations (Future State):

While the initial scope is beginner-level and relies on local storage, a robust architecture should anticipate future scaling needs.

• Data Persistence (Backend Database):

  • Problem: Local storage has limits (size, device-specific, no sync).
  • Solution: Introduce a backend.
    • Firestore (NoSQL, Google Cloud): Excellent for flexible schema, real-time updates, and easy integration with Google Cloud ecosystem. Good for user-specific document storage.
    • PostgreSQL (SQL): For relational data needs, offering strong consistency and complex querying. Can be hosted on Cloud SQL or managed services.
  • Impact: Requires user authentication (e.g., Firebase Authentication, Auth0, Google Identity Platform) and API routes (using Next.js API routes or a separate backend service like Node.js/Express, Python/Flask, Go). Data synchronization across devices becomes possible.

• Server-Side Logic & API:

  • Problem: All logic currently client-side. AI integration, secure external API calls (e.g., for premium currency rates), and user management require a server.
  • Solution: Develop dedicated API endpoints.
    • Next.js API Routes: Ideal for adding simple serverless functions directly within the Next.js project.
    • Cloud Functions/Cloud Run (Google Cloud): For more complex logic or microservices, providing scalable, pay-as-you-go backend services without managing servers. This is perfect for the Gemini prompting strategy mentioned earlier.
  • Impact: Centralized business logic, enhanced security, and the ability to integrate with third-party services requiring API keys.

• Real-time Features:

  • Problem: Local storage is static.
  • Solution: WebSockets or real-time database listeners.
  • Impact: Collaborative planning, instant updates across devices.

• Performance Scaling:

  • Problem: As user base or data size grows, client-side performance might degrade.
  • Solution:
    • SSR/ISR with Next.js: Leverage Next.js's full capabilities for server-side rendering or Incremental Static Regeneration to improve initial load times and SEO for public-facing content (though less relevant for a personal utility).
    • CDN for Assets: Static assets are already served by CDNs with services like Vercel/Netlify.
    • Client-side Optimizations: Aggressive code splitting, lazy loading, virtualized lists for large data sets.

By starting with a robust framework like Next.js and a clear architectural vision, the "Travel Budget Planner" can gracefully evolve from a simple local storage application to a feature-rich, cloud-powered service, addressing ever-growing user demands and leveraging advanced capabilities like AI.