Multi-LLM Chat Application

This application provides a chat interface for interacting with multiple Large Language Models (LLMs). It supports models from OpenAI, Anthropic, Google (Gemini), xAI (Grok), and custom models via OpenRouter. Key features include text and image input processing, file text extraction, and integration with MCP servers for tool usage.

Note: Built for learning LLM APIs and web app integration, this project focuses on functional implementation rather than production-level architecture. It is intended solely for local, single-user use and lacks multi-user support.

🌟 Features

• Multi-Model Support: Seamlessly switch between different AI models:
  • OpenAI
  • Anthropic
  • Google AI Studio
  • xAI (Grok)
  • OpenRouter (Custom model IDs)
• Real-time Chat: Interactive conversations with streaming responses
• Persona Management: Create and manage custom AI assistant roles
• Message Management: Edit and delete both user and assistant messages at any time
• Conversation Management: Export, import, and manage chat histories
• Image Support:
  • Handle image inputs for multimodal models.
  • Generate images using specific models (e.g., Gemini 2.0 Flash Experimental).
• Reasoning Controls: Choose reasoning effort presets, set Anthropic/OpenAI reasoning budgets, and toggle Gemini 3 Pro Preview thinking levels (LOW/HIGH) directly from the chat header.
• Web Search Integration: Enable web search capabilities for enhanced responses
• File Processing: Upload and extract text from various file formats (PDF, HTML, Markdown, etc.).
• MCP Server Integration: Connects to Model Context Protocol (MCP) compliant servers to leverage local tools and data sources.
  • Server Configuration: Add and manage connections to various MCP servers (Stdio or HTTP).
  • Tool Control: Enable or disable specific tools offered by connected MCP servers globally via settings.

📸 Screenshots

🚀 Tech Stack

Frontend

• Vue 3 with Composition API
• TypeScript
• Pinia for state management
• PrimeVue for UI components
• Vite for build tooling

Backend

• Python 3.11
• FastAPI

⚙️ Setup (Recommended: Docker)

Deploying using Docker Compose is the recommended way to run this application.

1. Clone the repository:

   git clone https://github.com/yourusername/multi-llm-chat-app-vue-python.git
   cd multi-llm-chat
   

2. Create Environment Variables: Create a .env file in the root directory of the project with the following content. Replace the placeholder values with your actual credentials and settings.

   # Optional: Required for web search, browsing, and specific model features
   GEMINI_API_KEY=your_gemini_api_key
   GEMINI_MODEL_NAME=gemini-2.0-flash # Gemini model with support for grounding by Google search
   
   # Required for encryption of API keys and MCP configurations
   # Generate a secure key using: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
   ENCRYPTION_KEY=your_secure_fernet_encryption_key
   
   # Required: PostgreSQL database connection details (used by Docker Compose)
   POSTGRES_DB=appdb
   POSTGRES_USER=user
   POSTGRES_PASSWORD=password
   

   • Note: Ensure the ENCRYPTION_KEY is kept secret and secure. The POSTGRES_* variabl

... View full README on GitHub