🚗 Hyundai Accessories MCP Chatbot System

A comprehensive LLM and MCP (Model Context Protocol) chatbot system for Hyundai accessories that provides both guided flow and direct search capabilities.

🏗️ System Architecture

The system consists of three main components:

1. MCP Server (mcp-server.js) - Handles API calls and tool definitions
2. MCP Client (mcp-client.js) - Web-based chat interface
3. LLM Integration (llm-integration-example.js) - Demonstrates LLM interaction patterns

🎯 Features

Two Interaction Modes:

1. Guided Flow Mode (flow_accessories tool)

• Step-by-step navigation through:
  • Model selection (Creta, i20, Venue, etc.)
  • Accessory type selection (Interior, Exterior, etc.)
  • Subtype selection (Seat Covers, Floor Mats, etc.)
  • Product selection and details

2. Universal Search Mode (universal_accessories tool)

• Direct product search with natural language
• Example: "Show me seat covers for Creta"
• Returns matching products with full details

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

npm install

Running the System

# Start the MCP server
npm start

# Or for development with auto-restart
npm run dev

Access the Web Interface

Open index.html in your browser or serve it with a local server.

📋 API Integration

Hyundai Accessories API

• Endpoint: https://api.hyundaimobisin.com/service/accessories/getByModelIdYear
• Parameters:
  • modelId: Mapped from model names
  • year: Always set to 2018

Model Mappings

{
  'creta': 35,
  'alcazar': 34,
  'creta n line': 31,
  'i20': 27,
  'exter': 26,
  'verna': 23,
  'i10 nios': 25,
  'nios': 25,
  'aura': 24,
  'venue n line': 22,
  'venue nline': 22,
  'new venue': 20,
  'venue': 20,
  'kona': 33
}

🔧 MCP Tools

1. flow_accessories

Purpose: Guided step-by-step accessories selection

Parameters:

• step: Current step in flow ('start', 'select_model', 'select_type', 'select_subtype', 'select_product')
• model_name: Selected Hyundai model
• type_name: Selected accessory type
• subtype_name: Selected accessory subtype
• product_name: Selected product name

Flow Steps:

1. start → Shows available models
2. select_model → Shows accessory types for selected model
3. select_type → Shows subtypes for selected type
4. select_subtype → Shows products for selected subtype
5. select_product → Shows product details

2. universal_accessories

Purpose: Direct product search without guided flow

Parameters:

• model_name: Hyundai model name
• product_query: Product or accessory to search for

🤖 LLM Integration

The llm-integration-example.js demonstrates how an LLM would interact with the MCP server:

Intent Analysis

The LLM analyzes user input to determine whether to use:

• Flow Mode: For browsing and exploration
• Universal Mode: For specific product searches

Example LLM Responses

Flow Request

User: "Show me what accessories you have"
LLM: Calls flow_accessories tool with step='start'
Response: Lists available Hyundai models

Direct Query

User: "Show me seat covers for Creta"
LLM: Calls universal_accessories tool
Response: Returns matching seat cover products

🎨 User Interface

Web Chat Interface

• Modern, responsive design
• Real-time message updates
• Interactive menu buttons
• Product detail cards
• Loading indicators

Key UI Components

• Message Container: Displays conversation history
• Input Bar: Text input for direct queries
• Menu Bars: Interactive buttons for flow navigation
• Product Cards: Detailed product information display

📁 File Structure

chatbotmcppoc/
├── mcp-server.js              # MCP server implementation
├── mcp-client.js              # Web client interface
├── llm-integration-example.js # LLM integration patterns
├── index.html                 # Main web page
├── styles.css                 # UI styling
├── package.json               # Dependencies and scripts
└── README.md                  # This file

🔄 Usage Scenarios

Scenario 1: Guided Flow

1. User clicks "🚗 Accessories Flow"
2. System shows available Hyundai models
3. User selects a model (e.g., "Creta")
4. System shows accessory types
5. User selects type (e.g., "Interior Accessories")
6. System shows subtypes
7. User selects subtype (e.g., "Seat Covers")
8. System shows available products
9. User selects product to see details

Scenario 2: Direct Search

1. User types: "Show me LED lights for i20"
2. LLM calls universal_accessories tool
3. System searches for LED lights in i20
4. Returns matching products with details

🛠️ Development

Adding New Models

Update the MODEL_MAPPINGS object in mcp-server.js:

this.MODEL_MAPPINGS = {
  // ... existing mappings
  'new_model': modelId
};

Extending API Response

The system expects API responses in this format:

{
  types: [
    {
      typeName: "Category Name",
      subtypes: [
        {
          subtypeName: "Subcategory Name",
          products: [
            {
              productName: "Product Name",
              price: "₹Price",
              description: "Product description",
              partNumber: "Part Number"
            }
          ]
        }
      ]
    }
  ]
}

Customizing UI

• Modify styles.css for visual changes
• Update mcp-client.js for behavior changes
• Edit index.html for structure changes

🧪 Testing

Manual Testing

1. Start the MCP server
2. Open index.html in browser
3. Test both flow and direct search modes
4. Verify API responses are handled correctly

Automated Testing

# Run tests (if implemented)
npm test

🔒 Error Handling

The system includes comprehensive error handling for:

• Invalid model names
• API connection failures
• Missing product data
• Invalid user inputs

📈 Performance Considerations

• API calls are cached where possible
• Mock data is used for development
• Responsive UI for mobile devices
• Efficient search algorithms

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

For issues and questions:

1. Check the documentation
2. Review existing issues
3. Create a new issue with detailed information

---

Note: This system is designed for demonstration purposes. In production, ensure proper error handling, security measures, and API rate limiting.