AI Concierge Chat UI

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/chat/chat-canvas.tsx
• src/components/chat/concierge-chat-input.tsx
• src/components/chat/chat-workflow-context.tsx
• src/app/chat/page.tsx
• src/components/chat/concierge-chat-messages.tsx
• src/components/chat/chat-center-panel.tsx
• src/mastra/agents/concierge.ts
• src/lib/sanitize-assistant-chat-content.ts

The AI Concierge Chat UI is the primary interaction layer for the mdeai platform, providing an "AI-first, chat-first" discovery experience for Medellín. It serves as a sophisticated bridge between the user and various domain-specific agents (rentals, events, restaurants) through a unified conversational interface built on CopilotKit and Mastra.

The system is designed to handle natural language queries—such as searching for 1BR apartments in Laureles or finding salsa events—while maintaining context across turns and rendering rich UI components like map pins and listing cards alongside standard chat bubbles.

Sources: README.md:3-15, src/mastra/agents/concierge.ts:117-120

Architecture and Core Components

The UI is structured as a multi-panel layout, typically featuring a navigation rail, a center chat panel, and a map-focused right panel. The center panel is the orchestration point for the conversational flow.

Primary UI Layout

The ChatCenterPanel organizes the chat experience into a vertical stack containing a query bar, workflow indicators, the main message viewport, and specialized result slots.

Component	Description
ChatQueryBar	Top-level input for initial or quick queries.
WorkflowProgressStrip	Visual indicator of the current agent's reasoning or task progress.
CopilotChat	The core CopilotKit component configured with custom input and message renderers.
FastPathPanels	Domain-specific panels (Rental, Event, Restaurant, Grounded) for rapid interactions.
CenterPanelMapResultsSlot	Renders rich data cards or lists below the chat messages.

Sources: src/components/chat/chat-center-panel.tsx:28-56, e2e/screens/SCREEN-001-home-chrome.spec.ts:21-35

Messaging System

The chat interface distinguishes between standard CopilotKit messages and "local fast-path" bubbles used for immediate clarifications or search results that do not need to persist in the main thread history.

Interaction Logic and Sanitization

Content Sanitization

A critical function of the Chat UI is the removal of "tool leaks"—raw JSON payloads or repetitive boilerplate that the AI model might echo back during grounding or tool execution.

• JSON Stripping: Uses brace-balancing to identify and remove nested JSON objects containing placeId or grounding metadata.
• Boilerplate Removal: Strips repetitive phrases like "Google Maps sources" or rental summary templates that are already represented visually by cards.
• Echo Suppression: Prevents the model from listing venue names in prose if they are already rendered as rich cards.

Sources: src/lib/sanitize-assistant-chat-content.ts:60-120, src/mastra/agents/concierge.ts:211-225

Error Handling and Retries

The ConciergeAgentErrorBridge monitors for run errors such as timeouts or incomplete streams. When an error occurs, the UI renders a ConciergeErrorNotice which allows the user to retry their last message without losing conversation state.

Sources: src/components/chat/concierge-chat-messages.tsx:109-111, src/components/chat/tests/concierge-error-notice.test.tsx:13-25

Responsive Design and Views

The Chat UI adapts its structure based on the device viewport to maintain usability in "map-first" scenarios.

State Management and Working Memory

The UI interactions are driven by the concierge-agent instructions, which utilize a structured working memory to maintain context.

Memory Field	Purpose
lastIntent	Tracks if the user is currently looking for rentals, events, or restaurants.
lastRentalQuery	Persists filters like neighborhood, price, and bedroom count for follow-up refinement.
selectedListingId	Tracks the specific venue or apartment the user is currently inquiring about.
mapUi	Mirrors the map state (viewport, pin counts) to the agent for location-aware responses.

Sources: src/mastra/agents/concierge.ts:21-65, src/mastra/agents/concierge.ts:88-105

Technical Implementation Details

Custom Input and Message Components

The UI overrides default CopilotKit behavior using the following implementations:

• ConciergeChatInput: Handles custom send logic and error catching during the transition to the Mastra runtime.
• ConciergeChatMessages: Uses useSyncExternalStore to subscribe to a global error store for displaying notices and manages the scrolling logic for both Copilot and local messages.

Sources: src/components/chat/concierge-chat-messages.tsx:43-55, src/components/chat/chat-center-panel.tsx:50-51

Summary

The AI Concierge Chat UI provides a sophisticated, multi-layered interface for Medellín discovery. By combining a clean conversational thread with rich visual feedback (maps, cards) and strict content sanitization, it ensures that technical AI artifacts (JSON, tool outputs) are hidden in favor of a polished, user-friendly experience.