Using LLM Proxy

┌─────────────┐
│   Browser   │
│  (Port 8081)│
└──────┬──────┘
       │ 1. Fetch providers/models via /api/llm/v1/*
       │ 2. Send chat via /api/llm/v1/chat/stream
       ▼
┌────────────────┐
│  Web Client    │ (nginx + React)
│   Container    │
└────────┬───────┘
         │ Proxy to MCP server
         ▼
┌────────────────┐     ┌──────────────┐
│  MCP Server    │────▶│ Anthropic    │
│  (Port 8080)   │     │ OpenAI       │
│  - JSON-RPC    │────▶│ Ollama       │
│  - LLM Proxy   │     └──────────────┘
│  - Auth        │
└────────────────┘

GET /api/llm/v1/health HTTP/1.1
Host: localhost:8080
Authorization: Bearer <session-token>

{
  "status": "degraded",
  "providers": {
    "anthropic": {
      "status": "ok"
    },
    "ollama": {
      "status": "down",
      "error": "dial tcp 127.0.0.1:11434: connect: connection refused"
    }
  }
}

GET /api/llm/v1/providers HTTP/1.1
Host: localhost:8080
Authorization: Bearer <session-token>

{
  "providers": [
    {
      "name": "anthropic",
      "display_name": "Anthropic",
      "model": "claude-sonnet-4-5",
      "default": true
    },
    {
      "name": "openai",
      "display_name": "OpenAI"
    },
    {
      "name": "ollama",
      "display_name": "Ollama"
    }
  ],
  "default_provider": "anthropic"
}

GET /api/llm/v1/models?provider=ollama HTTP/1.1
Host: localhost:8080
Authorization: Bearer <session-token>

{
  "models": [
    "llama3",
    "mistral",
    "codellama:13b"
  ]
}

{
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "List the tables in the database"
        }
      ]
    }
  ],
  "tools": [
    {
      "name": "list_tables",
      "description": "Lists all tables in the database",
      "input_schema": {
        "type": "object",
        "properties": {}
      }
    }
  ],
  "provider": "anthropic",
  "model": "claude-sonnet-4-5"
}

{
  "content": [
    {
      "type": "tool_use",
      "tool_use": {
        "id": "toolu_123",
        "name": "list_tables",
        "input": {}
      }
    }
  ],
  "stop_reason": "tool_use",
  "usage": {
    "prompt_tokens": 1284,
    "completion_tokens": 47,
    "total_tokens": 1331
  }
}

POST /api/llm/v1/chat/stream HTTP/1.1
Host: localhost:8080
Authorization: Bearer <session-token>
Content-Type: application/json

data: {"type":"text","text":"The database contains"}

data: {"type":"text","text":" three tables."}

event: done
data: {"type":"done","usage":{"prompt_tokens":1284,"completion_tokens":12,"total_tokens":1296}}

# Configuration file: pgedge-pg-mcp-web.yaml
llm:
    enabled: true
    provider: "anthropic"  # anthropic, openai, gemini, or ollama
    model: "claude-sonnet-4-5"

    # API key configuration (priority: env vars > key files > direct values)
    # Option 1: Environment variables (recommended for development)
    # Option 2: API key files (recommended for production)
    anthropic_api_key_file: "~/.anthropic-api-key"
    openai_api_key_file: "~/.openai-api-key"
    gemini_api_key_file: "~/.gemini-api-key"
    # Option 3: Direct values (not recommended - use env vars or files)
    # anthropic_api_key: "your-key-here"
    # openai_api_key: "your-key-here"
    # gemini_api_key: "your-key-here"

    # Optional: Custom base URLs for API proxies
    # Leave empty to use default provider URLs
    # anthropic_base_url: "https://your-proxy.example.com"
    # openai_base_url: "https://your-proxy.example.com"

    # Ollama configuration
    ollama_url: "http://localhost:11434"

    # Generation parameters
    max_tokens: 4096
    temperature: 0.7

export class MCPClient {
    constructor(baseURL, token) {
        this.baseURL = baseURL;
        this.token = token;
        this.requestID = 0;
    }

    async sendRequest(method, params = null) {
        this.requestID++;

        const request = {
            jsonrpc: '2.0',
            id: this.requestID,
            method: method,
            params: params || {}
        };

        const response = await fetch(this.baseURL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                ...(this.token && { 'Authorization': `Bearer ${this.token}` })
            },
            body: JSON.stringify(request)
        });

        const jsonResp = await response.json();

        if (jsonResp.error) {
            throw new Error(`RPC error ${jsonResp.error.code}: ${jsonResp.error.message}`);
        }

        return jsonResp.result;
    }
}

// web/src/contexts/AuthContext.jsx

const login = async (username, password) => {
    // Call authenticate_user tool via JSON-RPC
    const authResult = await MCPClient.authenticate(MCP_SERVER_URL, username, password);

    // Store session token
    setSessionToken(authResult.sessionToken);
    localStorage.setItem('mcp-session-token', authResult.sessionToken);

    // Fetch user info from server
    const response = await fetch('/api/user/info', {
        headers: { 'Authorization': `Bearer ${authResult.sessionToken}` }
    });

    const userInfo = await response.json();
    setUser({ authenticated: true, username: userInfo.username });
};

const checkAuth = async () => {
    // Validate session by calling MCP server
    const client = new MCPClient(MCP_SERVER_URL, sessionToken);
    await client.initialize();
    await client.listTools();

    // Fetch user details
    const response = await fetch('/api/user/info', {
        headers: { 'Authorization': `Bearer ${sessionToken}` }
    });

    const userInfo = await response.json();
    setUser({ authenticated: true, username: userInfo.username });
};

// web/src/components/ChatInterface.jsx

const processQuery = async (userMessage) => {
    let conversationHistory = [...messages, { role: 'user', content: userMessage }];

    // Agentic loop (max 10 iterations)
    for (let iteration = 0; iteration < 10; iteration++) {
        // Get LLM response via proxy
        const response = await fetch('/api/llm/v1/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${sessionToken}`
            },
            body: JSON.stringify({
                messages: conversationHistory,
                tools: tools,
                provider: selectedProvider,
                model: selectedModel
            })
        });

        const llmResponse = await response.json();

        if (llmResponse.stop_reason === 'tool_use') {
            // Extract tool uses
            const toolUses = llmResponse.content.filter(item => item.type === 'tool_use');

            // Add assistant message with tool uses
            conversationHistory.push({
                role: 'assistant',
                content: llmResponse.content
            });

            // Execute tools via MCP JSON-RPC
            const toolResults = [];
            for (const toolUse of toolUses) {
                const result = await mcpClient.callTool(toolUse.name, toolUse.input);
                toolResults.push({
                    type: 'tool_result',
                    tool_use_id: toolUse.id,
                    content: result.content,
                    is_error: result.isError
                });
            }

            // Add tool results
            conversationHistory.push({
                role: 'user',
                content: toolResults
            });

            // Continue loop
            continue;
        }

        // Got final response - display and exit
        setMessages(conversationHistory);
        break;
    }
};