MCP ChatGPT Multi-Server Suite

# 🚀 MCP ChatGPT Apps - Complete Overview You now have **TWO** fully functional MCP ChatGPT Apps in this project! --- ## 📊 App #1: Stock Market Top Movers ### What It Does Displays real-time stock market data for top gainers, losers, and most actively traded stocks. ### Quick Start ```bash ./start.sh # Opens on http://localhost:3000 ``` ### Features - 🚀 Top Gainers table - 📉 Top Losers table - 🔥 Most Actively Traded table - 📊 Adjustable result limits - 🎨 Beautiful dark mode UI - 📱 Responsive design ### MCP Tools - `topMovers(limit)` - Get top stock movers ### API Used - Alpha Vantage API (requires free API key) ### Documentation - **START_HERE.md** - Main overview - **QUICKSTART.md** - 3-step quick start - **README.md** - Full documentation - **ARCHITECTURE.md** - Technical details ### Files - `src/server.ts` - MCP server - `public/index.html` - Frontend - `./start.sh` - Startup script - Port: **3000** --- ## 💱 App #2: Currency Converter ### What It Does Converts between 160+ currencies with real-time exchange rates. ### Quick Start ```bash ./start-currency.sh # Opens on http://localhost:3001 ``` ### Features - 💱 Real-time currency conversion - 🔄 Auto-convert as you type - 📊 Live exchange rates table - ⚡ Popular currency pairs - 🎨 Beautiful dark mode UI - 📱 Responsive design - 🆓 No API key required! ### MCP Tools - `convertCurrency(from, to, amount)` - Convert currencies - `getSupportedCurrencies()` - List all currencies - `getExchangeRates(base)` - Get all rates for base currency ### API Used - exchangerate-api.com (free tier: 1500 req/month, no key needed) ### Documentation - **CURRENCY_README.md** - Full documentation - **CURRENCY_QUICKSTART.md** - Quick start guide ### Files - `src/currency-server.ts` - MCP server - `public-currency/index.html` - Frontend - `./start-currency.sh` - Startup script - Port: **3001** --- ## 🎯 Both Apps Share ### Common Features ✅ **MCP SDK Integration** - Uses `@modelcontextprotocol/sdk` ✅ **Express REST API** - Clean REST endpoints ✅ **ChatGPT Integration** - `window.openai.callTool()` support ✅ **Auto-load** - Data loads automatically on page open ✅ **Dark Mode UI** - DaisyUI + Tailwind CSS ✅ **Smooth Animations** - Anime.js animations ✅ **Responsive Design** - Mobile-friendly ✅ **Error Handling** - Graceful error messages ✅ **TypeScript** - Type-safe code ✅ **Helper Scripts** - Easy startup ✅ **Complete Docs** - Comprehensive documentation ### Common Dependencies - TypeScript - Express.js - @modelcontextprotocol/sdk - Axios - CORS - DaisyUI - Tailwind CSS - Anime.js --- ## 🚀 Quick Start Both Apps ### Start Stock Market App ```bash export ALPHA_VANTAGE_API_KEY=your_key_here ./start.sh # http://localhost:3000 ``` ### Start Currency Converter ```bash ./start-currency.sh # http://localhost:3001 ``` ### Run Both Simultaneously **Terminal 1:** ```bash ./start.sh ``` **Terminal 2:** ```bash ./start-currency.sh ``` Now you have both apps running! - Stock Market: http://localhost:3000 - Currency: http://localhost:3001 --- ## 📁 Project Structure ``` MCPAddIn/ ├── 📄 Documentation │ ├── APPS_OVERVIEW.md ← You are here! │ ├── START_HERE.md ← Stock app overview │ ├── QUICKSTART.md ← Stock app quick start │ ├── README.md ← Stock app full docs │ ├── ARCHITECTURE.md ← Technical architecture │ ├── SETUP_COMPLETE.md ← Setup guide │ ├── CURRENCY_README.md ← Currency app docs │ └── CURRENCY_QUICKSTART.md ← Currency quick start │ ├── 💻 Source Code │ ├── src/ │ │ ├── server.ts ← Stock market MCP server │ │ └── currency-server.ts ← Currency MCP server │ ├── public/ │ │ └── index.html ← Stock market frontend │ └── public-currency/ │ └── index.html ← Currency frontend │ ├── 🛠️ Scripts │ ├── start.sh ← Start stock app │ ├── start-currency.sh ← Start currency app │ ├── ngrok.sh ← Expose stock app │ └── test-setup.sh ← Verify setup │ ├── 🔧 Configuration │ ├── package.json ← Dependencies & scripts │ ├── tsconfig.json ← TypeScript config │ └── env.example ← Environment variables │ └── 📦 Build Output └── dist/ ├── server.js ← Compiled stock server └── currency-server.js ← Compiled currency server ``` --- ## 🌐 Expose with ngrok ### Stock Market App ```bash ngrok http 3000 ``` ### Currency Converter ```bash ngrok http 3001 ``` --- ## 📊 API Endpoints Comparison ### Stock Market App (Port 3000) | Endpoint | Method | Description | |----------|--------|-------------| | / | GET | Stock market UI | | /mcp/tools/list | GET | List tools | | /mcp/tools/call | POST | Call topMovers tool | ### Currency Converter (Port 3001) | Endpoint | Method | Description | |----------|--------|-------------| | / | GET | Currency converter UI | | /mcp/tools/list | GET | List tools | | /mcp/tools/call | POST | Call currency tools | --- ## 🎨 MCP Tools Summary ### Stock Market App **Tool:** `topMovers` ```javascript await window.openai.callTool('topMovers', { limit: 10 }); ``` **Returns:** ```json { "top_gainers": [...], "top_losers": [...], "most_actively_traded": [...] } ``` ### Currency Converter **Tool 1:** `convertCurrency` ```javascript await window.openai.callTool('convertCurrency', { from: 'USD', to: 'EUR', amount: 100 }); ``` **Returns:** ```json { "from": "USD", "to": "EUR", "amount": 100, "result": 92.50, "rate": 0.925 } ``` **Tool 2:** `getSupportedCurrencies` ```javascript await window.openai.callTool('getSupportedCurrencies', {}); ``` **Tool 3:** `getExchangeRates` ```javascript await window.openai.callTool('getExchangeRates', { base: 'USD' }); ``` --- ## 🔑 Environment Variables ### Stock Market App ```bash export ALPHA_VANTAGE_API_KEY=your_key_here # Required export PORT=3000 # Optional ``` ### Currency Converter ```bash export EXCHANGE_RATE_API_KEY=your_key_here # Optional export PORT=3001 # Optional ``` --- ## 🛠️ Development Commands ### Build Both Apps ```bash npm run build ``` ### Development Mode **Stock Market:** ```bash npm run dev ``` **Currency Converter:** ```bash npm run dev-currency ``` ### Production Mode **Stock Market:** ```bash npm start ``` **Currency Converter:** ```bash npm start-currency ``` --- ## 🎯 Use Cases ### Stock Market App - Track market performance - Monitor top gainers/losers - Find trading opportunities - Market research - Financial dashboards ### Currency Converter - Travel planning - International business - E-commerce pricing - Financial calculations - Currency exchange --- ## 🆚 App Comparison | Feature | Stock Market | Currency | |---------|-------------|----------| | **API Key Required** | ✅ Yes | ❌ No (optional) | | **Free Tier** | 5 req/min | 1500 req/month | | **Auto-load** | ✅ Yes | ✅ Yes | | **MCP Tools** | 1 | 3 | | **Port** | 3000 | 3001 | | **Data Type** | Stock prices | Exchange rates | | **Update Frequency** | On demand | Real-time | --- ## 📚 Documentation Navigation ### For Stock Market App 1. **START_HERE.md** - Overview 2. **QUICKSTART.md** - Quick start 3. **README.md** - Full docs 4. **ARCHITECTURE.md** - Technical details ### For Currency Converter 1. **CURRENCY_QUICKSTART.md** - Quick start 2. **CURRENCY_README.md** - Full docs ### For Both Apps 1. **APPS_OVERVIEW.md** - This file! 2. **SETUP_COMPLETE.md** - Setup guide --- ## 🎉 You're All Set! You now have TWO production-ready MCP ChatGPT Apps: 1. **Stock Market Dashboard** - Track market movers 2. **Currency Converter** - Convert 160+ currencies Both apps: - ✅ Use MCP SDK - ✅ Auto-load with `window.openai.callTool()` - ✅ Have beautiful responsive UIs - ✅ Are fully documented - ✅ Are ready to deploy --- ## 🚀 Next Steps 1. **Try the Stock App**: `./start.sh` → http://localhost:3000 2. **Try the Currency App**: `./start-currency.sh` → http://localhost:3001 3. **Run Both**: Start in separate terminals 4. **Expose with ngrok**: Share with the world! 5. **Customize**: Edit HTML/CSS to match your style 6. **Add More Tools**: Extend with additional MCP tools --- **Happy Building! 📊💱**