A real estate listing portal

// `view`, `markers` and `selectedId` are all CONTROLLED, so the map never holds
// state the list disagrees with. Selecting in either updates the same value.
const [selectedId, setSelectedId] = useState<string | null>(null);
const [view, setView] = useState({ center: { lat: 40.015, lng: -105.27 }, zoom: 12 });

<Map
  provider={leafletProvider()}          // googleProvider({ apiKey }) in production
  view={view}
  onViewChange={setView}
  markers={listings.map((l) => ({
    id: l.id,
    position: { lat: l.lat, lng: l.lng },
    label: formatPrice(l.price),
  }))}
  selectedId={selectedId}
  onSelect={setSelectedId}
/>

// Inertia hands the filtered set to the page; the map and the grid render from
// the same array, so they cannot drift apart.
public function index(Request $request): Response
{
    $filters = $request->validate([
        'min_price' => ['nullable', 'integer'],
        'beds'      => ['nullable', 'integer', 'min:0'],
        'bounds'    => ['nullable', 'array'],
    ]);

    return Inertia::render('Listings/Index', [
        'filters'  => $filters,
        'listings' => Listing::query()
            ->when($filters['min_price'] ?? null, fn ($q, $v) => $q->where('price', '>=', $v))
            ->when($filters['beds'] ?? null, fn ($q, $v) => $q->where('beds', '>=', $v))
            ->withinBounds($filters['bounds'] ?? null)
            ->limit(200)
            ->get(),
    ]);
}

// The map bridge exposes pan / fit / select as MCP tools, so an assistant works
// the same controlled state a human does -- no DOM scraping, no Playwright.
import { registerMapBridge } from "@particle-academy/agent-integrations";

registerMapBridge(server, {
  adapter: {
    getView: () => view,
    setView,
    listMarkers: () => markers,
    select: (id) => setSelectedId(id),
  },
});