Airbnb-Style Rental Marketplace Backend

mcp-chat-integration • 1/2/2026
Copy Page

MCP Chat Integration for Airbnb Admin Panel

This module provides AI-powered chat functionality for the Airbnb admin panel using the Model Context Protocol (MCP) to communicate with Anthropic Claude.

🚀 Features

  • Intercom-style floating chat widget - Bottom-right corner, collapsible interface
  • Real-time AI conversations - Powered by Anthropic Claude via MCP protocol
  • Full Airbnb API access - AI can perform CRUD operations on all services
  • JWT authentication - Seamlessly integrated with existing auth system
  • Responsive design - Works on desktop and mobile devices
  • Material-UI styling - Consistent with admin panel design

📁 File Structure 

src/
├── lib/
│   └── mcp-client.js                    # MCP protocol client
├── components/
│   └── mcp-chat/
│       ├── mcp-chat-widget.jsx          # Main floating chat widget
│       ├── mcp-message-list.jsx         # Message display components
│       ├── mcp-input.jsx               # Message input component
│       ├── mcp-client-context.jsx       # React context provider
│       └── index.js                     # Component exports
├── hooks/
│   └── use-mcp-chat.js                 # Custom hook for chat logic
└── layouts/
    └── dashboard/
        └── layout.jsx.ejs              # Dashboard layout with chat integration

🔧 Configuration

Environment Variables

Add to your .env files: 

# MCP Server URL - Points to the nodeJs2 service MCP endpoint
VITE_MCP_SERVER_URL=http://localhost:3000/mcp

# For staging:
# VITE_MCP_SERVER_URL=https://your-nodejs2-service.staging.mindbricks.com/mcp

# For production:
# VITE_MCP_SERVER_URL=https://your-nodejs2-service.prod.mindbricks.com/mcp

Backend Configuration

Ensure your backend (nodeJs2 service) has: 

# Anthropic API key (handled on backend)
ANTHROPIC_API_KEY=your_anthropic_api_key_here

🏗️ Architecture

Data Flow 

User Input → MCPInput → MCPClient → MCP Server (/mcp) → Anthropic Claude
                ↓
MCPMessageList ← MCPClientContext ← MCP Response ← MCP Tools → Airbnb APIs

Component Hierarchy 

DashboardLayout
├── MCPChatProvider (Context)
│   ├── LayoutSection (Main content)
│   └── MCPChatWidget (Floating chat)
│       ├── MCPMessageList
│       └── MCPInput

🔌 Integration

The chat widget is automatically integrated into the dashboard layout and appears on all dashboard pages. It:

  1. Initializes automatically when a user is authenticated
  2. Connects to MCP server using JWT token authentication
  3. Provides AI assistance for all Airbnb service operations
  4. Maintains conversation state during the session

🎨 UI Components

MCPChatWidget

  • Floating chat button (bottom-right corner)
  • Collapsible chat panel
  • Responsive design for mobile/desktop

MCPMessageList

  • Displays conversation history
  • User and assistant message bubbles
  • Loading indicators and timestamps

MCPInput

  • Text input with send button
  • Enter to send, Shift+Enter for new line
  • Loading states and error handling

🔐 Security

  • JWT Authentication - All MCP requests include user's access token
  • Backend API Key Handling - Anthropic API key never exposed to frontend
  • Session Management - MCP sessions are properly managed and cleaned up
  • Error Handling - Graceful fallbacks for connection issues

🚀 Usage

The chat widget is automatically available to all authenticated users. Simply:

  1. Click the chat button in the bottom-right corner
  2. Type your message and press Enter
  3. Get AI assistance for Airbnb service operations
  4. Use natural language to manage your data

🛠️ Development

Adding New Features

  1. Extend MCPClient - Add new methods for additional MCP operations
  2. Update Context - Modify MCPChatProvider for new state management
  3. Enhance UI - Add new components following Material-UI patterns
  4. Test Integration - Verify MCP server communication

Debugging

  • Check browser console for MCP connection logs
  • Verify JWT token is properly passed to MCP server
  • Ensure backend MCP server is running and accessible
  • Check Anthropic API key configuration on backend

📝 Service Integration

The MCP chat has access to all Airbnb services:

Messaging Service

  • Service Name: messaging

  • Service URL: VITE_MESSAGING_SERVICE_URL

  • Data Objects: 3 objects

    • MessageThread, MessageReport, Message

PropertyCatalog Service

  • Service Name: propertyCatalog

  • Service URL: VITE_PROPERTYCATALOG_SERVICE_URL

  • Data Objects: 4 objects

    • ListingCalendar, ListingAmenity, Listing, ListingLocaleText

AdminPanel Service

  • Service Name: adminPanel

  • Service URL: VITE_ADMINPANEL_SERVICE_URL

  • Data Objects: 6 objects

    • LocalizationSetting, AdminDisputeAction, ApiKey, FinancialReport, AuditLog, GdprAction

BookingManagement Service

  • Service Name: bookingManagement

  • Service URL: VITE_BOOKINGMANAGEMENT_SERVICE_URL

  • Data Objects: 6 objects

    • Reservation, PaymentRecord, Dispute, Sys_reservationPayment, Sys_paymentCustomer, Sys_paymentMethod

ReviewSystem Service

  • Service Name: reviewSystem

  • Service URL: VITE_REVIEWSYSTEM_SERVICE_URL

  • Data Objects: 2 objects

    • ReviewAggregate, Review

Auth Service

  • Service Name: auth

  • Service URL: VITE_AUTH_SERVICE_URL

  • Data Objects: 3 objects

    • User, UserGroup, UserGroupMember

🔄 Root Generation Integration

The MCP chat components are fully integrated into the Genesis project's generation system: 

Root Generation Flow:
├── src/root-gen.js (Main generator)
│   ├── ComponentsRootGenerator
│   │   └── MCPChatRootGenerator
│   ├── LibRootGenerator
│   │   └── mcp-client.js.ejs
│   └── HooksRootGenerator
│       └── use-mcp-chat.js.ejs

Generation Process

When the Airbnb project is built, the root generation system will:

  1. Generate MCP Client - Creates src/lib/mcp-client.js from template
  2. Generate MCP Components - Creates all chat components in src/components/mcp-chat/
  3. Generate Custom Hook - Creates src/hooks/use-mcp-chat.js from template
  4. Integrate with Dashboard - Chat widget automatically appears in dashboard layout

📋 EJS Template Structure

All components follow the same EJS template pattern as other Airbnb components: 

src/components/mcp-chat/
├── root-gen.js              # Root generator
├── mcp-chat-widget.jsx.ejs  # Main widget template
├── mcp-message-list.jsx.ejs # Message components template
├── mcp-input.jsx.ejs        # Input component template
├── mcp-client-context.jsx.ejs # Context provider template
└── index.js.ejs             # Exports template

🎯 Benefits of EJS Integration

  • ✅ Consistent with project patterns - Follows exact same structure as other components
  • ✅ Automatic generation - Components generated during build process
  • ✅ Template-based - Easy to modify and customize
  • ✅ Root generation system - Integrated with Airbnb build pipeline
  • ✅ No manual file management - All files generated automatically

🚀 Ready for Build

The MCP chat integration is now fully integrated into the Airbnb project's build system. When you run the project generation, all MCP chat components will be automatically created from the EJS templates, following the same patterns as all other components in the project.

The implementation is now complete and follows the exact same patterns as the rest of the Airbnb project! 🚀

📞 Support

For questions or support regarding the MCP chat integration, please contact: