feat: Connect generated map to Mapbox MCP workflow

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Bun
+.bun/
+
 # dependencies
 /node_modules
 /.pnp

app/actions.tsx

@@ -32,7 +32,7 @@ type RelatedQueries = {
 };
 
 // Removed mcp parameter from submit, as geospatialTool now handles its client.
-async function submit(formData?: FormData, skip?: boolean) {
+async function submit(formData?: FormData, mapLocation?: object, skip?: boolean) {
 'use server';
 
   // TODO: Update agent function signatures in lib/agents/researcher.tsx and lib/agents/writer.tsx
@@ -149,8 +149,8 @@ async function submit(formData?: FormData, skip?: boolean) {
         uiStream,
         streamText,
         messages,
-        // mcp, // mcp instance is no longer passed down
-        useSpecificAPI
+        useSpecificAPI,
+        mapLocation,
       );
       answer = fullResponse;
       toolOutputs = toolResponses;

components/chat-panel.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import type { AI, UIState } from '@/app/actions'
 import { useUIState, useActions } from 'ai/rsc'
-// Removed import of useGeospatialToolMcp as it's no longer used/available
+import { useMCPMapClient } from '@/mapbox_mcp/hooks'
 import { cn } from '@/lib/utils'
 import { UserMessage } from './user-message'
 import { Button } from './ui/button'
@@ -21,7 +21,7 @@ interface ChatPanelProps {
 export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
   const [, setMessages] = useUIState<typeof AI>()
   const { submit } = useActions()
-  // Removed mcp instance as it's no longer passed to submit
+  const { processLocationQuery } = useMCPMapClient()
   const [isButtonPressed, setIsButtonPressed] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
   const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -57,9 +57,11 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
         component: <UserMessage message={input} />
       }
     ])
+
+    const { mapLocation } = await processLocationQuery(input)
+
     const formData = new FormData(e.currentTarget)
-    // Removed mcp argument from submit call
-    const responseMessage = await submit(formData)
+    const responseMessage = await submit(formData, mapLocation)
     setMessages(currentMessages => [...currentMessages, responseMessage as any])
   }
 

components/map/generated-map.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import mapboxgl from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string
+
+export const GeneratedMap: React.FC<{
+  position: { latitude: number; longitude: number }
+}> = ({ position }) => {
+  const mapContainer = useRef<HTMLDivElement>(null)
+  const map = useRef<mapboxgl.Map | null>(null)
+
+export const GeneratedMap: React.FC<{
+  position: { latitude: number; longitude: number; zoom?: number }
+}> = ({ position }) => {
+  const mapContainer = useRef<HTMLDivElement>(null)
+  const map = useRef<mapboxgl.Map | null>(null)
+  const markerRef = useRef<mapboxgl.Marker | null>(null)
+
+  // Initialize map and marker once, and clean up on unmount
+  useEffect(() => {
+    if (!mapContainer.current || map.current) return
+    if (!mapboxgl.accessToken) {
+      console.warn('GeneratedMap: NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN is not set.')
+      return
+    }
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: [position.longitude, position.latitude],
+      zoom: position.zoom ?? 12
+    })
+    markerRef.current = new mapboxgl.Marker()
+      .setLngLat([position.longitude, position.latitude])
+      .addTo(map.current)
+
+    return () => {
+      markerRef.current?.remove()
+      markerRef.current = null
+      map.current?.remove()
+      map.current = null
+    }
+  }, [])
+
+  // Update map center/zoom and marker when position changes
+  useEffect(() => {
+    if (!map.current) return
+    const lngLat: [number, number] = [position.longitude, position.latitude]
+    map.current.flyTo({
+      center: lngLat,
+      zoom: position.zoom ?? map.current.getZoom(),
+      essential: true
+    })
+    if (markerRef.current) {
+      markerRef.current.setLngLat(lngLat)
+    } else {
+      markerRef.current = new mapboxgl.Marker()
+        .setLngLat(lngLat)
+        .addTo(map.current)
+    }
+  }, [position])
+  return <div ref={mapContainer} className="h-full w-full" />
+}

components/search-section.tsx

@@ -3,6 +3,7 @@
 import { SearchResults } from './search-results'
 import { SearchSkeleton } from './search-skeleton'
 import { SearchResultsImageSection } from './search-results-image'
+import { GeneratedMap } from './map/generated-map'
 import { Section } from './section'
 import { ToolBadge } from './tool-badge'
 import type { SearchResults as TypeSearchResults } from '@/lib/types'
@@ -24,10 +25,19 @@ export function SearchSection({ result }: SearchSectionProps) {
           </Section>
           {searchResults.images && searchResults.images.length > 0 && (
             <Section title="Images">
-              <SearchResultsImageSection
-                images={searchResults.images}
-                query={searchResults.query}
-              />
+              <div className="flex space-x-4">
+                <div className="w-1/2">
+                  <SearchResultsImageSection
+                    images={searchResults.images}
+                    query={searchResults.query}
+                  />
+                </div>
+                {searchResults.position && (
+                  <div className="w-1/2 h-64">
+                    <GeneratedMap position={searchResults.position} />
+                  </div>
+                )}
+              </div>
             </Section>
           )}
           <Section title="Sources">

lib/agents/researcher.tsx

@@ -16,8 +16,8 @@ export async function researcher(
   uiStream: ReturnType<typeof createStreamableUI>,
   streamText: ReturnType<typeof createStreamableValue<string>>,
   messages: CoreMessage[],
-  // mcp: any, // Removed mcp parameter
-  useSpecificModel?: boolean
+  useSpecificModel?: boolean,
+  mapLocation?: object
 ) {
   let fullResponse = ''
   let hasError = false
@@ -56,7 +56,7 @@ Match the language of your response to the user's language.`;
        tools: getTools({
       uiStream,
       fullResponse,
-      // mcp // mcp parameter is no longer passed to getTools
+      mapLocation
     })
   })
 

lib/agents/tools/index.tsx

@@ -7,15 +7,16 @@ import { geospatialTool } from './geospatial' // Removed useGeospatialToolMcp im
 export interface ToolProps {
   uiStream: ReturnType<typeof createStreamableUI>
   fullResponse: string
-  // mcp?: any; // Removed mcp property as it's no longer passed down for geospatialTool
+  mapLocation?: object
 }
 
 // Removed mcp from parameters
-export const getTools = ({ uiStream, fullResponse }: ToolProps) => {
+export const getTools = ({ uiStream, fullResponse, mapLocation }: ToolProps) => {
   const tools: any = {
     search: searchTool({
       uiStream,
-      fullResponse
+      fullResponse,
+      mapLocation
     }),
     retrieve: retrieveTool({
       uiStream,

lib/agents/tools/search.tsx

@@ -5,7 +5,7 @@ import { Card } from '@/components/ui/card'
 import { SearchSection } from '@/components/search-section'
 import { ToolProps } from '.'
 
-export const searchTool = ({ uiStream, fullResponse }: ToolProps) => ({
+export const searchTool = ({ uiStream, fullResponse, mapLocation }: ToolProps) => ({
   description: 'Search the web for information',
   parameters: searchSchema,
   execute: async ({
@@ -47,6 +47,10 @@ export const searchTool = ({ uiStream, fullResponse }: ToolProps) => ({
       return searchResult
     }
 
+    if (mapLocation) {
+      searchResult.position = mapLocation
+    }
+
     streamResults.done(JSON.stringify(searchResult))
 
     return searchResult

lib/types/index.ts

@@ -2,6 +2,10 @@ export type SearchResults = {
   images: string[]
   results: SearchResultItem[]
   query: string
+  position?: {
+    latitude: number
+    longitude: number
+  }
 }
 
 export type ExaSearchResults = {

mapbox_mcp/hooks.ts

@@ -123,8 +123,8 @@ Focus on extracting and presenting factual data from the tools.`,
       const coordMatch = response.text.match(coordPattern);
       if (coordMatch) {
         mapLocation = {
-          lat: parseFloat(coordMatch[1]),
-          lng: parseFloat(coordMatch[2]),
+          latitude: parseFloat(coordMatch[1]),
+          longitude: parseFloat(coordMatch[2]),
           zoom: 12,
         };
         shouldShowMap = true;