┌─────────────────┐     WebSocket      ┌─────────────────┐
│   React Frontend │◄──────────────────►│  Express Server  │
│   (Chat UI)      │                    │  (Node.js)       │
└─────────────────┘                    └────────┬────────┘
                                                │
                                                │ HTTP + Bearer Auth
                                                ▼
                                       ┌─────────────────┐
                                       │  BatchData MCP   │
                                       │  Server          │
                                       │  mcp.batchdata.com│
                                       └─────────────────┘

✅ Address Verified632 W Palmaire Ave
Phoenix, AZ 85021-8767County: Maricopa
Congressional District: 01
Time Zone: Mountain (UTC-7)
Vacant: No📍 Coordinates: 33.541180, -112.081990

Create a real-time chatbot application that demonstrates the BatchData MCP (Model Context Protocol) server for property intelligence. The app should let users query real estate data using natural language.## Tech Stack
- **Frontend**: React, TypeScript, TailwindCSS
- **Backend**: Express.js with WebSocket support
- **MCP Integration**: Vercel AI SDK (@ai-sdk/mcp)
- **Build**: Vite for frontend, esbuild for server bundling## Environment Variables
BATCHDATA_API_KEY=<user's BatchData API key>## Key Dependencies
{
  "dependencies": {
    "@ai-sdk/mcp": "^0.0.12",
    "@modelcontextprotocol/sdk": "^1.25.1",
    "express": "^4.21.2",
    "ws": "^8.18.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}---## SERVER IMPLEMENTATION### MCP Client Integrationimport { experimental_createMCPClient as createMCPClient } from "@ai-sdk/mcp";const MCP_SERVER_URL = "https://mcp.batchdata.com";export async function connectToMCP(serverUrl: string, apiKey: string) {
  const mcpClient = await createMCPClient({
    transport: {
      type: "http",
      url: serverUrl,
      headers: {
        Authorization: `Bearer ${apiKey}`,
      },
    },
  });
  const toolSet = await mcpClient.tools();
  return { mcpClient, toolSet };
}export async function callMCPTool(toolName: string, args: Record<string, any>) {
  const tool = cachedToolSet[toolName];
  return await tool.execute(args, { toolCallId: `call_${Date.now()}` });
}### Available BatchData MCP Tools
- verify_address: Verify and standardize an address
- lookup_property: Get property details
- geocode_address: Convert address to coordinates
- reverse_geocode_address: Convert coordinates to address
- comparable_property_preview: Find comparable properties (use this for "find comps" queries)
- skip_trace_property: Find owner contact info
- verify_phone: Validate phone numbers
- check_dnc_status: Check Do Not Call registry
- check_tcpa_status: Check TCPA complianceIMPORTANT: Do NOT use the deprecated `comparable_property` tool. Use `comparable_property_preview` instead.### Query-to-Tool Mapping
Parse natural language queries and map to BatchData MCP tools:
- "verify address..." → verify_address
- "lookup property..." → lookup_property
- "geocode..." → geocode_address
- "reverse geocode..." → reverse_geocode_address
- "comparable properties..." or "find comps..." → comparable_property_preview
- "skip trace..." → skip_trace_property
- "verify phone..." → verify_phone
- "check dnc..." → check_dnc_status
- "check tcpa..." → check_tcpa_status### Tool Parameter Naming
BatchData MCP uses specific parameter prefixes:
- Property lookups: property_street, property_city, property_state, property_zip
- Comparables: subject_property_street, subject_property_city, subject_property_state, subject_property_zip
- Address verification: street, city, state, zip
- Geocoding: property_address (full address string)
- Phone tools: phone_number (10-digit string, no formatting)---## FRONTEND REQUIREMENTS### Core Functionality
1. Chat interface for natural language queries
2. Real-time WebSocket communication with the server
3. Connection status indicator
4. Example queries users can click to try### Response Display (CRITICAL)
Each response MUST display BOTH:
1. **Formatted Summary** - Human-readable display of key data points from the response
2. **Raw JSON** - Collapsible section showing the complete API response (for debugging/transparency)### API Response Structure
MCP tool responses come wrapped in this structure:
{
  "content": [{ "type": "text", "text": "<stringified JSON>" }],
  "structuredContent": { /* actual data object */ },
  "isError": false
}ALWAYS parse from `structuredContent` - this contains the actual data object.
Do NOT parse from `content[0].text` as that's just a stringified version.### Data Parsing HelpersOwner names in responses can be either strings OR objects with {first, last, full} properties.
Use a helper function to safely display names:    function getDisplayName(name: any): string {
      if (!name) return 'Unknown';
      if (typeof name === 'string') return name;
      if (typeof name === 'object') {
        if (name.full) return name.full;
        if (name.first || name.last) {
          return ((name.first || '') + ' ' + (name.last || '')).trim();
        }
      }
      return 'Unknown';
    }Use this helper for: lookup_property (owner names), skip_trace_property (owner/contact names).Geocode responses may have nested coordinates. Check these paths:
- structuredContent.results[0].latitude/longitude
- structuredContent.result.latitude/longitude
- structuredContent.location.latitude/longitude
- structuredContent.latitude/longitude (direct)### Key Data Points by Tool**verify_address** - structuredContent.address:
- Standardized address (street, city, state, zip, zipPlus4)
- addressValidity field indicates if valid
- County, coordinates, time zone info**lookup_property** - structuredContent.property:
- Address, building info (beds, baths, sqft, year built)
- Valuation (estimatedValue)
- Owner names (use getDisplayName helper)
- Lot size**comparable_property_preview** - structuredContent:
- comparableCount, aggregatedMetrics (averagePrice, pricePerSqFt)
- comparableProperties[] array with address, salePrice, squareFeet, distance**skip_trace_property** - structuredContent:
- Owner/contact names (use getDisplayName helper - names can be objects!)
- Phone numbers with lineType
- Email addresses**geocode_address / reverse_geocode_address**:
- Coordinates (latitude, longitude) - may be nested in results[0] or location
- Formatted address**verify_phone** - structuredContent:
- Valid/invalid status
- Line type, carrier, location**check_dnc_status** - structuredContent:
- Whether phone is on Do Not Call list**check_tcpa_status** - structuredContent:
- Litigator status and compliance info---## BUILD CONFIGURATIONIMPORTANT: Bundle ALL dependencies for reliable deployments. Do NOT mark packages as external.esbuild external setting should be empty or only include Node.js built-ins.
Bundle these packages (required for deployment):
- @ai-sdk/mcp
- @modelcontextprotocol/sdk
- express, ws, and all other dependenciesThis prevents MODULE_NOT_FOUND errors in deployment.### .replit Configuration
modules = ["nodejs-20"]
[deployment]
deploymentTarget = "autoscale"
run = ["npm", "run", "start"]
build = ["npm", "run", "build"]
[[ports]]
localPort = 5000
externalPort = 80---## EXAMPLE QUERIES TO SUPPORTUse this reference address for testing: 632 W Palmaire Ave, Phoenix, AZ 85021
Coordinates: 33.541474, -112.081784- "Verify the address 632 W Palmaire Ave, Phoenix, AZ 85021"
- "Lookup property details for 632 W Palmaire Ave, Phoenix, AZ 85021"
- "Find comparable properties to 632 W Palmaire Ave, Phoenix, AZ 85021"
- "Geocode 632 W Palmaire Ave, Phoenix, AZ 85021"
- "Reverse geocode 33.541474, -112.081784"
- "Skip trace the owner at 632 W Palmaire Ave, Phoenix, AZ 85021"---## DEMO/FALLBACK MODEIf MCP connection fails (e.g., missing API key), show a demo mode that:
- Indicates the app is in demo mode
- Prompts user to add BATCHDATA_API_KEY to secrets
- Explains what each tool would return---Create this application with a clean, modern UI. Focus on making the tool responses easy to read while also providing access to the raw JSON data.