Demo app

frontend/example/ is a small demo web app that pairs AgentChat with an interactive MapLibre map (OpenStreetMap basemap + Nominatim search) against the backend example. It showcases the full experience: live reasoning feed, geometry attachment, frontend tool events on the map, the location picker round-trip, chat history, and the approval modal.

Layout: a two-pane workspace — agent chat (left) and map (right) — with a navbar that switches the theme and the stream/chat mode. Both are developer-facing props of <AgentChat />, driven from outside the chat box exactly as you would in your own app.

Run it

Start the backend first so the UI has an API to talk to:

cd backend
uv run --extra mcp python run_example.py   # http://localhost:8000

Then the demo:

cd frontend/example
npm install
npm run dev        # http://localhost:3000

How the pieces connect

• Agent → map: onFrontendEvent dispatches UI events to the map's imperative handle (flyTo, addGeoJSON, clearOverlays, toast, openPicker).
• Map → agent: when the user confirms a picked location, the demo sends it back to the agent via the AgentChat ref (chatRef.current.send(...)).
• UI → agent: select_location_on_map opens the map picker (Nominatim search / click-to-pin); the agent stops and waits for the user's reply.
• HitL: delete_map_layer is approval-gated — the built-in ApprovalModal asks for approve/reject before it runs.

What to try

The welcome screen ships with these suggested prompts (see frontend/example/src/data/prompts.ts):

Prompt	Shows off
"Find the Eiffel Tower, zoom the map to it and drop a pin there"	geocode_address → zoom_to + draw_geometry + show_toast
"I want to pick a location on the map myself — open the picker"	select_location frontend event → LocationPicker → AgentChat ref send() round-trip
"Find 10 cafes around Central Park and draw them on the map"	POI search + GeoJSON FeatureCollection overlay
"Plan a driving route from Paris to Lyon and draw it on the map"	OSRM routing with GeoJSON LineString geometry
"Create a 500 m buffer around the Louvre and draw it on the map"	generate_buffer_geojson + polygon overlay
"Delete the map layer 'demo_layer' (I'll approve it when asked)"	The HitL approval modal with countdown + rejection reason

Other things to notice: the mic button (voice dictation), the history panel (sessions are saved automatically after each completed run), the read-aloud and PDF export buttons on assistant messages, and the stop button while the agent is running.

Project scripts

Script	Description
npm run dev	Vite dev server (port 3000)
npm run build	Type-check + production bundle
npm run preview	Preview the production bundle locally