MCP Web UI

MCP Web UI

MCP Web UI は、Model Context Protocol (MCP) アーキテクチャ内のホストとして機能するウェブベースのユーザーインターフェースです。大規模言語モデル (LLM) との相互作用のための強力でユーザーフレンドリーなインターフェースを提供しながら、クライアントとサーバー間のコンテキスト集約と調整を管理します。

🌟 概要

MCP Web UI は、以下を提供することで AI 言語モデルとの相互作用を簡素化し強化するよう設計されています：

• 複数の LLM プロバイダーの統一インターフェース
• リアルタイムストリーミングチャット体験
• 柔軟な構成とモデル管理
• MCP プロトコルを使用した堅牢なコンテキスト処理

デモビデオ

🚀 機能

• 🤖 マルチプロバイダー LLM 統合：
  • Anthropic (Claude モデル)
  • OpenAI (GPT モデル)
  • Ollama (ローカルモデル)
  • OpenRouter (複数プロバイダー)
• 💬 直感的なチャットインターフェース
• 🔄 Server-Sent Events (SSE) によるリアルタイムレスポンスストリーミング
• 🔧 動的設定管理
• 📊 高度なコンテキスト集約
• 💾 BoltDB を使用した永続的なチャット履歴
• 🎯 柔軟なモデル選択

📋 前提条件

• Go 1.23+
• Docker (オプション)
• 目的の LLM プロバイダーの API キー

🛠 インストール

クイックスタート

1. リポジトリをクローンします：

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

2. 環境を設定します：

   mkdir -p $HOME/.config/mcpwebui
   cp config.example.yaml $HOME/.config/mcpwebui/config.yaml
   

3. API キーをセットアップします：

   export ANTHROPIC_API_KEY=your_anthropic_key
   export OPENAI_API_KEY=your_openai_key
   export OPENROUTER_API_KEY=your_openrouter_key
   

アプリケーションの実行

ローカル開発

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

Docker デプロイ

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

🔧 設定

設定ファイル (config.yaml) は、MCP Web UI をカスタマイズするための包括的な設定を提供します。以下は詳細な説明です：

サーバー設定

• port：サーバーが実行されるポート (デフォルト: 8080)
• logLevel：ログの詳細度 (オプション: debug, info, warn, error; デフォルト: info)
• logMode：ログ出力形式 (オプション: json, text; デフォルト: text)

プロンプト設定

• systemPrompt：AI アシスタントのデフォルトシステムプロンプト
• titleGeneratorPrompt：チャットタイトルを生成するために使用されるプロンプト

LLM (言語モデル) 設定

llm セクションはプロバイダー固有の設定を使用した複数のプロバイダーをサポートしています：

共通 LLM パラメータ

• provider：以下から選択: ollama, anthropic, openai, openrouter
• model：特定のモデル名 (例: 'claude-3-5-sonnet-20241022')
• parameters：モデルの動作を微調整します：
  • temperature：レスポンスのランダム性 (0.0-1.0)
  • topP：ニュークレウスサンプリング閾値
  • topK：保持する最高確率トークンの数
  • frequencyPenalty：トークンシーケンスの繰り返しを削減
  • presencePenalty：新しいトピックについての議論を促進
  • maxTokens：最大レスポンス長
  • stop：生成を停止するシーケンス
  • その他のプロバイダー固有パラメータ

プロバイダー固有の設定

• Ollama：

  • host：Ollama サーバー URL (デフォルト: http://localhost:11434)

• Anthropic：

  • apiKey：Anthropic API キー (ANTHROPIC_API_KEY 環境変数を使用可能)
  • maxTokens：最大トークン制限

• OpenAI：

  • apiKey：OpenAI API キー (OPENAI_API_KEY 環境変数を使用可能)

• OpenRouter：

  • apiKey：OpenRouter API キー (OPENROUTER_API_KEY 環境変数を使用可能)

タイトルジェネレータ設定

genTitleLLM セクションはタイトル生成用の別個の設定を許可し、指定されない場合はメイン LLM にデフォルト設定されます。

MCP サーバー設定

• mcpSSEServers：Server-Sent Events (SSE) サーバーを設定

  • url：SSE サーバー URL
  • maxPayloadSize：最大ペイロードサイズ

• mcpStdIOServers：Standard Input/Output サーバーを設定

  • command：サーバーを実行するコマンド
  • args：サーバーコマンドの引数

設定スニペット例

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

🏗 プロジェクト構造

• cmd/：アプリケーションエントリーポイント
• internal/handlers/：ウェブリクエストハンドラー
• internal/models/：データモデル
• internal/services/：LLM プロバイダー統合
• static/：静的アセット (CSS)
• templates/：HTML テンプレート

🤝 貢献

1. リポジトリをフォークする
2. フィーチャーブランチを作成する
3. 変更をコミットする
4. プッシュしてプルリクエストを作成する

📄 ライセンス

MIT License