MCP Website Chatbot

# 🤖 MCP Website Chatbot - Quick Start Guide Welcome! Your production-grade website chatbot application is ready. Here's how to get started: ## 📋 What's Included Your app has been built with these files: ``` ├── server.js ← Express backend with chat API ├── public/index.html ← Beautiful chat UI ├── mcp-client.js ← MCP tool integration module ├── system_prompt.txt ← AI system prompt ├── package.json ← Dependencies ├── .env.example ← Environment template ├── README.md ← Full documentation ├── Dockerfile ← Docker containerization ├── docker-compose.yml ← Docker Compose setup └── setup.sh ← Auto-setup script ``` ## 🚀 Quick Start (3 Steps) ### Step 1: Install Dependencies ```bash cd /Users/srinivasanramanujam/Documents/AgenticAI/MCPserverForwebsite npm install ``` ### Step 2: Start the Server ```bash npm run dev ``` You should see: ``` 🤖 MCP Chatbot Server running on http://localhost:3000 📱 Frontend: http://localhost:3000 💬 Chat API: POST http://localhost:3000/api/chat ``` ### Step 3: Open in Browser Visit: **http://localhost:3000** ## 💬 Try It Out Test the chatbot with these queries: - "Hello!" – Gets a welcome message - "What is srinivasanramanujam.sbs?" – Learns about the site - "What's the latest news?" – Triggers live data fetching (with MCP) - "Can you check the current status?" – Demonstrates real-time verification ## 🔧 Configuration ### Update API Keys (Production) Edit `.env`: ```bash cp .env.example .env # Add your OpenAI/Claude API key OPENAI_API_KEY=sk-... ``` ### Customize System Prompt Edit `system_prompt.txt` to change chatbot behavior, voice, or knowledge. ### Update Website Info In `server.js`, modify: ```javascript WEBSITE_NAME: 'srinivasanramanujam.sbs' WEBSITE_URL: 'https://srinivasanramanujam.sbs' ``` ## 🌐 Deployment Options ### **Vercel (Easiest – Recommended)** ```bash npm install -g vercel vercel ``` Follow the prompts to deploy instantly. ### **Docker (Any Cloud)** ```bash # Build image docker build -t mcp-chatbot . # Run container docker run -p 3000:3000 mcp-chatbot # Or use Docker Compose docker-compose up ``` ### **Heroku** ```bash heroku create your-app-name git push heroku main ``` ## 🔗 API Endpoints ### Send a Chat Message ```bash curl -X POST http://localhost:3000/api/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hello!"}' ``` ### Check Server Health ```bash curl http://localhost:3000/api/health ``` ### Get System Prompt ```bash curl http://localhost:3000/api/system-prompt ``` ## 📊 Key Features ✅ **Live Data Integration** – MCP tools for real-time retrieval ✅ **Hallucination Prevention** – Strict guardrails against misinformation ✅ **Beautiful UI** – Modern, responsive chat interface ✅ **Production-Ready** – Error handling, health checks, logging ✅ **Easy to Customize** – Change prompts, add APIs, modify UI ✅ **Containerized** – Dockerfile for easy deployment ## 🔐 Security Highlights - ✅ System prompt not exposed to users - ✅ Input validation and sanitization - ✅ No secrets in version control (.gitignore setup) - ✅ Rate limiting ready (add middleware as needed) - ✅ Error messages don't leak internal details ## 🎯 Next Steps 1. **Test locally** – Run `npm run dev` and chat 2. **Integrate real API** – Add OpenAI/Claude API key to `.env` 3. **Connect MCP server** – Point to your actual MCP server in `server.js` 4. **Customize appearance** – Edit CSS in `public/index.html` 5. **Deploy** – Use Vercel, Docker, or your preferred host 6. **Monitor** – Check health endpoint and error logs regularly ## 📚 Documentation - **Full README**: See `README.md` for detailed setup & API docs - **System Prompt**: See `system_prompt.txt` for chatbot behavior rules - **MCP Client**: See `mcp-client.js` for tool integration details ## 🆘 Troubleshooting **Port 3000 already in use?** ```bash npm run dev -- --port 3001 ``` **Dependencies not installing?** ```bash rm -rf node_modules package-lock.json npm install ``` **Module errors?** ```bash npm install npm run dev ``` ## 💡 Pro Tips 1. **Add rate limiting** – Install `express-rate-limit` package 2. **Add CORS** – Use `cors` package for cross-origin requests 3. **Add logging** – Use `winston` for structured logging 4. **Add database** – Store conversations with MongoDB/PostgreSQL 5. **Add authentication** – Protect sensitive endpoints ## 📝 Support & Questions - Check `README.md` for comprehensive documentation - Review system prompt in `system_prompt.txt` - Examine `server.js` for implementation details --- **Happy chatting! 🚀** Your chatbot is ready to serve srinivasanramanujam.sbs with intelligence and accuracy.