MCP Web UI

MCP Web UI is a web-based user interface that serves as a Host within the Model Context Protocol (MCP) architecture. It provides a powerful and user-friendly interface for interacting with Large Language Models (LLMs) while managing context aggregation and coordination between clients and servers.

🌟 Overview

MCP Web UI is designed to simplify and enhance interactions with AI language models by providing:
- A unified interface for multiple LLM providers
- Real-time, streaming chat experiences
- Flexible configuration and model management
- Robust context handling using the MCP protocol

Demo Video

🚀 Features

- 🤖 Multi-Provider LLM Integration:
- Anthropic (Claude models)
- OpenAI (GPT models)
- Ollama (local models)
- OpenRouter (multiple providers)
- 💬 Intuitive Chat Interface
- 🔄 Real-time Response Streaming via Server-Sent Events (SSE)
- 🔧 Dynamic Configuration Management
- 📊 Advanced Context Aggregation
- 💾 Persistent Chat History using BoltDB
- 🎯 Flexible Model Selection

📋 Prerequisites

- Go 1.23+
- Docker (optional)
- API keys for desired LLM providers

🛠 Installation

Quick Start

1. Clone the repository:

   git clone https://github.com/MegaGrindStone/mcp-web-ui.git

   cd mcp-web-ui

   

2. Configure your environment:

   mkdir -p $HOME/.config/mcpwebui

   cp config.example.yaml $HOME/.config/mcpwebui/config.yaml

   

3. Set up API keys:

   export ANTHROPIC_API_KEY=your_anthropic_key

   export OPENAI_API_KEY=your_openai_key

   export OPENROUTER_API_KEY=your_openrouter_key

   

Running the Application

Local Development

go mod download
go run ./cmd/server/main.go

Docker Deployment

docker build -t mcp-web-ui .
docker run -p 8080:8080 \
  -v $HOME/.config/mcpwebui/config.yaml:/app/config.yaml \
  -e ANTHROPIC_API_KEY \
  -e OPENAI_API_KEY \
  -e OPENROUTER_API_KEY \
  mcp-web-ui

🔧 Configuration

The configuration file (config.yaml) provides comprehensive settings for customizing the MCP Web UI. Here's a detailed breakdown:

Server Configuration

- port: The port on which the server will run (default: 8080) - logLevel: Logging verbosity (options: debug, info, warn, error; default: info) - logMode: Log output format (options: json, text; default: text)

Prompt Configuration

- systemPrompt: Default system prompt for the AI assistant - titleGeneratorPrompt: Prompt used to generate chat titles

LLM (Language Model) Configuration

The llm section supports multiple providers with provider-specific configurations:

Common LLM Parameters

- provider: Choose from: ollama, anthropic, openai, openrouter - model: Specific model name (e.g., 'claude-3-5-sonnet-20241022') - parameters: Fine-tune model behavior: - temperature: Randomness of responses (0.0-1.0) - topP: Nucleus sampling threshold - topK: Number of highest probability tokens to keep - frequencyPenalty: Reduce repetition of token sequences - presencePenalty: Encourage discussing new topics - maxTokens: Maximum response length - stop: Sequences to stop generation - And more provider-specific parameters

Provider-Specific Configurations

- Ollama: - host: Ollama server URL (default: http://localhost:11434)

- Anthropic:
- apiKey: Anthropic API key (can use ANTHROPIC_API_KEY env variable)
- maxTokens: Maximum token limit

- OpenAI:
- apiKey: OpenAI API key (can use OPENAI_API_KEY env variable)

- OpenRouter:
- apiKey: OpenRouter API key (can use OPENROUTER_API_KEY env variable)

Title Generator Configuration

The genTitleLLM section allows separate configuration for title generation, defaulting to the main LLM if not specified.

MCP Server Configurations

- mcpSSEServers: Configure Server-Sent Events (SSE) servers - url: SSE server URL - maxPayloadSize: Maximum payload size

- mcpStdIOServers: Configure Standard Input/Output servers
- command: Command to run server
- args: Arguments for the server command

Example Configuration Snippet

port: 8080
logLevel: info
systemPrompt: You are a helpful assistant.
llm:

  provider: anthropic

  model: claude-3-5-sonnet-20241022

  parameters:

    temperature: 0.7

    maxTokens: 1000
genTitleLLM:

  provider: openai

  model: gpt-3.5-turbo

🏗 Project Structure

- cmd/: Application entry point
- internal/handlers/: Web request handlers
- internal/models/: Data models
- internal/services/: LLM provider integrations
- static/: Static assets (CSS)
- templates/: HTML templates

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push and create a Pull Request

📄 License

MIT License