---

title: Customer Support Chatbot emoji: 🤖 colorFrom: blue colorTo: purple sdk: gradio sdk_version: 4.0.0 app_file: app.py pinned: false license: mit

Customer Support Chatbot

A prototype Customer Support chatbot for a company that sells computer products (monitors, printers, etc.). The chatbot integrates with an MCP (Model Context Protocol) server to provide real-time product information, order management, and customer support.

Features

• 🔐 Customer Authentication: Secure login with email and PIN via MCP server
• 🛍️ Product Search: Search and browse computer products with natural language queries
• 📦 Order Management: View order history and track orders for authenticated customers
• 💬 Natural Language Interface: Powered by Groq’s Llama 3.1 8B Instant model (cost-effective)
• 🔌 MCP Integration: Seamless integration with MCP server via Streamable HTTP (all 8 tools)
• 🛡️ Error Handling: User-friendly error messages with graceful error recovery
• 💾 Session Management: In-memory session state for multi-turn conversations
• 🎨 Modern UI: Clean Gradio interface with intuitive login and chat experience

Setup

Local Development

1. Clone the repository:

git clone 
cd customer-support-chatbot

2. Install dependencies:

pip install -r requirements.txt

3. Create a .env file:

cp .env.example .env

4. Add your API keys to .env:

MCP_SERVER_URL=https://vipfapwm3x.us-east-1.awsapprunner.com/mcp
GROQ_API_KEY=your_groq_api_key_here

5. Run the application:

python app.py

The app will be available at http://localhost:7860

HuggingFace Spaces Deployment

1. Create a new Space on HuggingFace Spaces
2. Upload all project files
3. Add environment variables in Space settings:
   • GROQ_API_KEY: Your Groq API key
   • MCP_SERVER_URL: https://vipfapwm3x.us-east-1.awsapprunner.com/mcp
4. The Space will automatically build and deploy

Test Credentials

Use these test credentials to login:

Usage

1. Login: Enter your email and PIN to authenticate
2. Browse Products: Ask questions like:
   • “Show me available monitors”
   • “Search for printers”
   • “What is the price of MON-0054?”
3. View Orders: After authentication, you can:
   • “Show my orders”
   • “What’s the status of my order?”
   • “Get order details for [order-id]”

Architecture

• Frontend: Gradio (Python-based UI framework) - Fast deployment, perfect for demos
• LLM: Groq API with Llama 3.1 8B Instant (cost-effective flash model)