npx tool-agent "integrate the geo map component to display geolocated entities and fleet positions"npx shadcn@latest add @tool-ui/geo-map"Where is it?" is often the first question after a tool response. Geo Map renders one or many latitude/longitude markers directly in the conversation so users can see facilities, fleets, and active routes without leaving chat.
Role: Information. For visualizing location and route data. See Design Guidelines for role definitions.
Run this command from your project root.
npx tool-agent "integrate the geo map component to display geolocated entities and fleet positions"npx shadcn@latest add @tool-ui/geo-mapOpen app/layout.tsx and add the Leaflet import next to your global CSS import.
import "./styles/globals.css";import "leaflet/dist/leaflet.css";Render GeoMap in your UI.
import { GeoMap } from "@/components/tool-ui/geo-map";<GeoMap id="fleet-map" title="Fleet Positions" markers={[ { id: "truck-14", lat: 34.0522, lng: -118.2437, label: "Truck 14", icon: { type: "emoji", value: "🚚" }, }, { id: "truck-22", lat: 36.1699, lng: -115.1398, label: "Truck 22", icon: { type: "dot", color: "#0EA5E9" }, }, ]} routes={[ { id: "route-west-14", points: [ { lat: 33.94, lng: -118.4 }, { lat: 34.0522, lng: -118.2437 }, ], color: "#2563EB", }, ]} clustering={{ enabled: true }} viewport={{ mode: "fit", target: "all", padding: 40, maxZoom: 11 }}/>;Register GeoMap in your runtime provider so tool results render as map UI instead of raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { GeoMap } from "@/components/tool-ui/geo-map";import { safeParseSerializableGeoMap } from "@/components/tool-ui/geo-map/schema";export const toolkit: Toolkit = { showGeoMap: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableGeoMap(result); if (!parsed) { return null; } return <GeoMap {...parsed} />; }, },};Dot, emoji, and image marker icon variants with schema validation
Aggregates dense markers by zoom level with click-to-expand behavior
Static, styled route overlays with tooltip/popup metadata
Fit markers, routes, or both using viewport target controls
title + description.Escape while focused in the map area to close any open popup.GeoMap shell styling is shipped with the component in a colocated CSS module (geo-map-theme.module.css), scoped to [data-slot="geo-map"], and exposed through CSS custom properties. Import Leaflet base CSS once in your root layout, then use these token overrides to customize popup/tooltip/zoom styling.
Theme behavior:
theme is omitted, GeoMap inherits the environment theme (.dark/.light class or data-theme) and falls back to prefers-color-scheme.theme="light" or theme="dark" to force a tile theme.--geo-map-canvas-bg is set by default from the resolved theme (var(--background) in dark mode, var(--muted) in light mode), and can still be overridden via style.<GeoMap id="fleet-map" markers={markers} style={{ "--geo-map-popup-bg": "var(--card)", "--geo-map-popup-fg": "var(--card-foreground)", "--geo-map-popup-border": "var(--border)", "--geo-map-popup-radius": "calc(var(--radius) + 4px)", "--geo-map-tooltip-bg": "var(--primary)", "--geo-map-tooltip-fg": "var(--primary-foreground)", }}/>See geo-map-theme.module.css for all available token keys.
Prop
Type
Prop
Type
GeoMapMarkerIcon supports:
dot — optional color, borderColor, and radius.emoji — required value, optional size, bgColor, borderColor.image — required url (http/https), optional size and border styling.Prop
Type
Prop
Type
viewport supports two modes:
fit — auto-fit points in target (markers, routes, or all). Supports optional padding and maxZoom.center — fixed center + zoom.tooltip: "always" (and hide while the related popup is open)