Geo map

npx shadcn@latest add "@assistant-ui/elements-geo-map"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-geo-map"

GeoMap gives a tool result a real geographic frame. It loads Leaflet only in the browser, keeps the location list available to keyboard and screen reader users, and leaves MapAnswer as the dependency free schematic option when coordinates are not the answer.

GeoMap imports leaflet/dist/leaflet.css itself; a Pages Router app imports that stylesheet in pages/_app instead.

Getting started

"use client";

import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
import {
  GeoMap,
  type GeoMapPlace,
  type GeoMapRoute,
} from "@/components/assistant-ui/elements/geo-map";

type FindPlacesResult = {
  places: GeoMapPlace[];
  routes: GeoMapRoute[];
};

export const FindPlacesToolUI: ToolCallMessagePartComponent<
  { query: string },
  FindPlacesResult
> = ({ result }) => {
  if (!result) return null;
  return <GeoMap places={result.places} routes={result.routes} />;
};

return {
  places: await findPlaces(query),
  routes: await findWalkingRoutes(query),
};

import { GeoMap } from "@/components/assistant-ui/elements/geo-map";

export function Nearby({ places, routes }) {
  return <GeoMap places={places} routes={routes} />;
}

Anatomy

<div data-slot="geo-map">
  <div role="region" aria-label="Map of 3 places" />
  <ol>
    <li><button aria-current="true">Place label, detail, and coordinates</button></li>
  </ol>
</div>

The paper card contains printed map matter, not another bordered panel. Leaflet owns keyboard zoom after the map receives focus. Every place has a matching list button below it, where the current place is announced with aria-current; selecting either the marker or button pans to that place. Route lines and map bounds use every valid coordinate.

Examples

Draw a route

Routes are supplied paths, not directions GeoMap computes. A route with fewer than two valid points does not draw.

<GeoMap
  places={places}
  routes={[
    {
      id: "morning-walk",
      label: "Morning walk",
      points: [
        [40.7412, -73.9896],
        [40.7398, -73.9911],
      ],
    },
  ]}
/>

Use custom tiles

Without tileUrl, the map draws the public OpenStreetMap tiles in the page's ink: grayscale on a light page, inverted on a dark one. tileUrl and attribution point it at your own tile provider instead, and custom tiles are shown exactly as the provider draws them.

<GeoMap
  places={places}
  tileUrl="https://tiles.example.com/{z}/{x}/{y}.png"
  attribution="© Example Maps"
/>

The public OpenStreetMap tile servers are meant for light use under the OpenStreetMap tile usage policy, which rules out an app sending all of its traffic there. For production, set tileUrl to a provider you have an account with, and keep its attribution visible. Both props are application configuration: Leaflet renders attribution as HTML, so never fill either one from tool or model output.

Control the selection

Pass selectedId when another part of the answer needs to choose the current place too.

const [selectedId, setSelectedId] = useState(places[0]?.id);

<GeoMap
  places={places}
  routes={routes}
  selectedId={selectedId}
  onSelect={setSelectedId}
/>

API reference