AI MCP Gateway

# Settings Page - Visual Structure ## Page Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ Settings 🔄 Clear Cache 🔄 Reload │ │ │ │ ┌──────┬──────────┬────────┬───────┬──────────┐ │ │ │System│Providers │ Layers │ Tasks │ Features │ │ │ └──────┴──────────┴────────┴───────┴──────────┘ │ │ │ │ ╔════════════════════════════════════════════════╗ │ │ ║ ACTIVE TAB CONTENT ║ │ │ ║ ║ │ │ ║ [Content varies by selected tab] ║ │ │ ║ ║ │ │ ║ ║ │ │ ╚════════════════════════════════════════════════╝ │ └─────────────────────────────────────────────────────────────┘ ``` ## Tab 1: System Configuration ``` ┌─────────────────────────────────────────────────────────┐ │ System Configuration 💾 Save Changes │ ├─────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ Server Host │ Server Port │ │ │ │ [0.0.0.0________] │ [3000___] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ API Version │ Log Level │ │ │ │ [v1_____________] │ [Info ▼] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ Redis Host │ Redis Port │ │ │ │ [localhost______] │ [6379___] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┐ │ │ │ Cache TTL (seconds) │ │ │ │ [60_____] │ │ │ └──────────────────────┘ │ └─────────────────────────────────────────────────────────┘ ``` ## Tab 2: Providers Configuration ``` ┌─────────────────────────────────────────────────────────┐ │ Provider Configuration ➕ Add Provider │ ├─────────────────────────────────────────────────────────┤ │ │ │ ╔════════════════════════════════════════════════╗ │ │ ║ openrouter [Enabled] ║ │ │ ║ Endpoint: https://openrouter.ai/api/v1 ║ │ │ ║ API Key: sk-or-v1-... 👁️ ║ │ │ ║ [Edit] [Delete] ║ │ │ ╚════════════════════════════════════════════════╝ │ │ │ │ ╔════════════════════════════════════════════════╗ │ │ ║ openai [Disabled] ║ │ │ ║ Endpoint: https://api.openai.com/v1 ║ │ │ ║ API Key: sk-proj-... 👁️ ║ │ │ ║ [Edit] [Delete] ║ │ │ ╚════════════════════════════════════════════════╝ │ │ │ │ ╔════════════════════════════════════════════════╗ │ │ ║ anthropic [Enabled] ║ │ │ ║ Endpoint: https://api.anthropic.com ║ │ │ ║ API Key: sk-ant-... 👁️ ║ │ │ ║ [Edit] [Delete] ║ │ │ ╚════════════════════════════════════════════════╝ │ └─────────────────────────────────────────────────────────┘ ``` ### Edit Mode: ``` ┌─────────────────────────────────────────────────────────┐ │ ╔══════════════════════════════════════════════════╗ │ │ ║ Edit openrouter ║ │ │ ║──────────────────────────────────────────────────║ │ │ ║ Provider Name ║ │ │ ║ [openrouter___________] (disabled) ║ │ │ ║ ║ │ │ ║ API Key ║ │ │ ║ [sk-or-v1-xxxxxxxxxxxx] ║ │ │ ║ ║ │ │ ║ Endpoint URL ║ │ │ ║ [https://openrouter.ai/api/v1] ║ │ │ ║ ║ │ │ ║ ☑ Enabled ║ │ │ ║ ║ │ │ ║ [💾 Save Provider] [Cancel] ║ │ │ ╚══════════════════════════════════════════════════╝ │ └─────────────────────────────────────────────────────────┘ ``` ## Tab 3: Layers Configuration ``` ┌─────────────────────────────────────────────────────────┐ │ Layer Configuration │ ├─────────────────────────────────────────────────────────┤ │ ┌──────────────────────┬──────────────────────┐ │ │ │ L0 [Enabled] │ L1 [Enabled] │ │ │ │ Free Tier │ Fast & Cheap │ │ │ │ Priority: 0 │ Priority: 1 │ │ │ │ │ │ │ │ │ Models: │ Models: │ │ │ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │ │ │ │meta-llama/... │ │ │google/gemini-... │ │ │ │ │ └──────────────────┘ │ └──────────────────┘ │ │ │ │ │ ┌──────────────────┐ │ │ │ │ [Edit] │ │openai/gpt-4o-... │ │ │ │ │ │ └──────────────────┘ │ │ │ │ │ [Edit] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ L2 [Enabled] │ L3 [Disabled] │ │ │ │ Balanced │ Premium │ │ │ │ Priority: 2 │ Priority: 3 │ │ │ │ │ │ │ │ │ Models: │ Models: │ │ │ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │ │ │ │anthropic/... │ │ │openai/o1-preview │ │ │ │ │ └──────────────────┘ │ └──────────────────┘ │ │ │ │ │ │ │ │ │ [Edit] │ [Edit] │ │ │ └──────────────────────┴──────────────────────┘ │ └─────────────────────────────────────────────────────────┘ ``` ### Edit Mode: ``` ┌─────────────────────────────────────────────────────────┐ │ ╔══════════════════════════════════════════════════╗ │ │ ║ Edit L1 ║ │ │ ║──────────────────────────────────────────────────║ │ │ ║ Description ║ │ │ ║ [Fast and cheap models_____________] ║ │ │ ║ ║ │ │ ║ Priority ║ │ │ ║ [1___] ║ │ │ ║ ║ │ │ ║ Models + Add Model ║ │ │ ║ [google/gemini-flash-1.5____] [🗑️] ║ │ │ ║ [openai/gpt-4o-mini_________] [🗑️] ║ │ │ ║ ║ │ │ ║ ☑ Enabled ║ │ │ ║ ║ │ │ ║ [💾 Save Layer] [Cancel] ║ │ │ ╚══════════════════════════════════════════════════╝ │ └─────────────────────────────────────────────────────────┘ ``` ## Tab 4: Tasks Configuration ``` ┌─────────────────────────────────────────────────────────┐ │ Task-Specific Model Configuration │ ├─────────────────────────────────────────────────────────┤ │ ┌──────────────────────┬──────────────────────┐ │ │ │ Chat [Enabled] │ Code [Enabled] │ │ │ │ │ │ │ │ │ Preferred: │ Preferred: │ │ │ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │ │ │ │openai/gpt-4o │ │ │anthropic/claude..│ │ │ │ │ └──────────────────┘ │ └──────────────────┘ │ │ │ │ │ │ │ │ │ Fallbacks: │ Fallbacks: │ │ │ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │ │ │ │google/gemini-... │ │ │openai/gpt-4o │ │ │ │ │ └──────────────────┘ │ └──────────────────┘ │ │ │ │ │ │ │ │ │ [Edit] │ [Edit] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ Analyze [Enabled] │ Create [Enabled] │ │ │ │ │ Project │ │ │ │ Preferred: │ Preferred: │ │ │ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │ │ │ │anthropic/... │ │ │openai/o1-mini │ │ │ │ │ └──────────────────┘ │ └──────────────────┘ │ │ │ │ │ │ │ │ │ [Edit] │ [Edit] │ │ │ └──────────────────────┴──────────────────────┘ │ └─────────────────────────────────────────────────────────┘ ``` ## Tab 5: Feature Flags ``` ┌─────────────────────────────────────────────────────────┐ │ Feature Flags │ ├─────────────────────────────────────────────────────────┤ │ ┌──────────────────────┬──────────────────────┐ │ │ │ ENABLE_ORCHESTRATOR │ ENABLE_COST_TRACKING │ │ │ │ │ │ │ │ │ Enable intelligent │ Track API costs and │ │ │ │ request routing │ usage metrics │ │ │ │ │ │ │ │ │ [ON ●──] │ [●── OFF] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ ENABLE_CACHING │ DEBUG_MODE │ │ │ │ │ │ │ │ │ Cache responses for │ Enable verbose │ │ │ │ better performance │ logging │ │ │ │ │ │ │ │ │ [ON ●──] │ [●── OFF] │ │ │ └──────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────────────┐ │ │ │ EXPERIMENTAL_FEATURE │ │ │ │ │ │ │ │ Test new features │ │ │ │ (unstable) │ │ │ │ │ │ │ │ [●── OFF] │ │ │ └──────────────────────┘ │ └─────────────────────────────────────────────────────────┘ ``` ## Status Indicators ``` Success: ✓ Saved successfully Error: ⚠ Failed to save Loading: ⟳ Loading settings... Empty: No providers configured ``` ## Color Scheme ``` Background: Slate 900 (#0f172a) Cards: Slate 800 (#1e293b) Borders: Slate 700 (#334155) Text Primary: White (#ffffff) Text Secondary: Slate 400 (#94a3b8) Success: Green 400 (#4ade80) Error: Red 400 (#f87171) Accent: Blue 400 (#60a5fa) Enabled Badge: Green 500/20 + Green 400 Disabled Badge: Red 500/20 + Red 400 ``` ## Responsive Breakpoints ``` Mobile (< 768px): 1 column grid, stacked forms Tablet (768-1024): 1-2 column grid, larger inputs Desktop (> 1024): 2 column grid, full features ``` ## Component Hierarchy ``` Settings ├── Header │ ├── Title │ ├── Save Status (success/error) │ ├── Clear Cache Button │ └── Reload Button ├── Tab Navigation │ ├── System Tab │ ├── Providers Tab │ ├── Layers Tab │ ├── Tasks Tab │ └── Features Tab └── Tab Content ├── SystemConfigTab │ ├── Input Fields Grid │ └── Save Button ├── ProvidersTab │ ├── Add Provider Button │ ├── Edit Form (conditional) │ ├── Provider Cards List │ └── Empty State ├── LayersTab │ ├── Edit Form (conditional) │ └── Layer Cards Grid ├── TasksTab │ ├── Edit Form (conditional) │ └── Task Cards Grid └── FeaturesTab └── Feature Cards Grid ``` ## Interaction Flow ``` 1. User clicks tab → Switch active tab 2. User clicks Edit → Show edit form 3. User modifies → Update local state 4. User clicks Save → POST/PUT to API 5. API success → Reload data, show success 6. API error → Show error message 7. Auto-clear → Hide message after 3s ```