Volt

Plan EV road trips with an AI agent that compares routes, finds better chargers, and updates a shared itinerary while you inspect the map.

Comment

Inspiration

EV route planning is a chain of tradeoffs: vehicle range, starting charge, arrival reserve, charging speed, detour time, price, and whether a stop has the amenities a driver needs. Traditional route planners make people manipulate those constraints one control at a time. Agents can help, but only if they can understand and safely update the same itinerary the driver is reviewing.

Volt explores a more collaborative model. The human stays grounded in a visual map, while an agent works through structured WebMCP tools that expose the route-planning decisions directly.

What it does

Volt is an interactive, charger-aware EV trip planner. Drivers can:

  • Select an EV profile and starting battery level.
  • Set a minimum arrival reserve.
  • Prefer charging stops near coffee, food, and restrooms.
  • Compare fastest, balanced, and comfort-focused route strategies.
  • Inspect charging power, estimated availability, price, amenities, and stop duration.
  • See every route or charging-stop change reflected immediately on the shared map.

The demo uses a Los Angeles to San Francisco corridor with realistic sample station data and four supported EV profiles.

Why WebMCP

Route planning is stateful and visual. The agent needs to know what the traveler currently sees and prefers, while the traveler needs to inspect every recommendation before relying on it. WebMCP lets Volt expose narrow, typed actions from the live page instead of forcing an agent to guess through UI controls.

The site registers seven JavaScript WebMCP tools:

  1. get_trip_context reads the current vehicle, preferences, route, and stops.
  2. list_vehicle_profiles lists supported EV profiles and range data.
  3. find_chargers filters corridor chargers by power and amenity.
  4. compare_route_options returns three complete route strategies.
  5. create_trip_plan creates a route and updates the visible map.
  6. set_trip_preferences changes the vehicle, reserve, or amenity preference.
  7. replace_charging_stop replaces one stop in the visible itinerary.

Read tools return enough structured state to explain a recommendation. Write tools reuse the same React state and planning logic as the human interface, so agent actions and manual actions stay synchronized.

What people and agents can do together

A traveler can ask, “Keep me above 25% at every stop and find chargers with coffee.” The agent can inspect the current vehicle and route, search the charger set, update the reserve preference, compare alternatives, and apply the selected plan. The traveler immediately sees the resulting stops, duration, charging cost, and arrival battery on the map.

Without structured site tools, this would require brittle clicking, scraping labels, and reconstructing hidden application state. Volt gives the agent explicit operations while preserving a clear human review surface.

How it was built

  • React 19 and TypeScript for shared planner state and interactions.
  • Vinext and Vite for the application and Cloudflare-compatible build.
  • OpenAI Sites for public hosting.
  • Shadcn/Base UI components and Lucide icons for accessible controls.
  • WebMCP tools registered through document.modelContext.registerTool on the top-level page.
  • A fully client-side demo dataset, so judges need no credentials or API keys.

Challenges

The main challenge was designing tool boundaries that were substantial without becoming overly broad. Route comparison and charger search are read operations, while applying a plan or replacing a stop changes the shared interface state. Each tool therefore has a narrow schema, a clear description, and a result that makes the action verifiable.

Another challenge was making agent actions visible. Volt includes a live activity card, charger detail cards, route-mode controls, and an itinerary summary so the human can always see what changed.

Accomplishments

  • Seven working WebMCP tools with both read and write workflows.
  • One shared state model for manual interactions and agent actions.
  • Three coherent route strategies and six charger locations.
  • Responsive, accessible map and planner controls.
  • A complete public experience that requires no account or API key.

What we learned

WebMCP is most useful when the interface is already good for people. The tools should not replace the product; they should expose its meaningful operations so the agent and human can collaborate on the same artifact.

We also learned that tool results should include verification data. Returning the applied route, selected stops, and updated preferences lets the agent explain the result and lets the interface confirm it visually.

What's next

  • Connect live charger availability and pricing providers.
  • Add nationwide routing and elevation-aware energy estimates.
  • Support saved vehicle profiles and road-trip collections.
  • Add weather, towing, and seasonal range adjustments.
  • Introduce opt-in live vehicle data adapters while keeping every external action reviewable.

Built With

Share this project:

Updates