MCP Web Ui

MCP Web用户界面

 

MCP Web UI是一个基于Web的用户界面，在模型上下文协议（MCP）架构中充当主机。它提供了一个强大且用户友好的界面，用于与大型语言模型（LLM）交互，同时管理客户端和服务器之间的上下文聚合和协调。

🌟 概述

MCP Web UI旨在通过提供以下功能简化和增强与AI语言模型的交互：

• 多个LLM提供商的统一接口
• 实时流媒体聊天体验
• 灵活的配置和模型管理
• 使用MCP协议进行稳健的上下文处理

演示视频


🚀 特性

• 🤖 多提供商LLM集成:

- 拟人（克劳德模型） - OpenAI（GPT模型） - Ollama（当地模特） - OpenRouter（多个提供商）

• 💬 直观的聊天界面
• 🔄 实时响应流 通过服务器发送事件（SSE）
• 🔧 动态配置管理
• 📊 高级上下文聚合
• 💾 持续聊天记录 使用BoltDB
• 🎯 灵活的模型选择

📋 先决条件

• 转到1.23+
• Docker（可选）
• 所需LLM提供程序的API密钥

🛠 安装

快速开始

1. 克隆存储库：

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

1. 配置您的环境：

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

1. 设置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：日志详细程度（选项：调试、信息、警告、错误；默认值：信息）
• logMode：日志输出格式（选项：json、text；默认：text）

提示配置

• systemPrompt：AI助手的默认系统提示
• titleGeneratorPrompt：用于生成聊天标题的提示

LLM（语言模型）配置

这 llm 部分支持具有特定于提供者的配置的多个提供者：

常见LLM参数

• provider：从以下选项中选择：olama、anthropic、openai、openrouter
• model：特定型号名称（例如“claude-3-5-connect-20241022”）
• parameters：微调模型行为：

- temperature：反应的随机性（0.0-1.0） - topP：核子取样阈值 - topK：要保留的最高概率令牌的数量 - frequencyPenalty：减少令牌序列的重复 - presencePenalty：鼓励讨论新主题 - maxTokens：最大响应长度 - stop：停止生成的序列 - 以及更多特定于提供商的参数

提供商特定配置

• 没有:

- host：Ollama服务器URL（默认值：http://localhost:11434)

• Anthropic:

- apiKey：Anthropic API密钥（可以使用Anthropic_API_key env变量） - maxTokens：最大令牌限制 - 注意：仅包含空白的停止序列将被忽略，空白将从有效序列中修剪出来，因为Anthropic不支持停止序列中的空白

• OpenAI:

- apiKey：OpenAI API密钥（可以使用OpenAI_API_key env变量） - endpoint：OpenAI API端点（默认值：https://api.openai.com/v1) - 有关使用其他OpenAI兼容API的信息，请参阅 这个讨论线索

• OpenRouter 的:

- apiKey：OpenRouter API密钥（可以使用OpenRouter_API_key env变量）

标题生成器配置

这 genTitleLLM 该部分允许对标题生成进行单独配置，如果未指定，则默认为主LLM。

MCP服务器配置

• mcpSSEServers：配置服务器发送事件（SSE）服务器

- url：SSE服务器URL - maxPayloadSize：最大有效载荷大小

• mcpStdIOServers：配置标准输入/输出服务器

- command：运行服务器的命令 - args：服务器命令的参数

MCP服务器配置示例

SSE服务器示例：

mcpSSEServers:
  filesystem:
    url: https://yoursseserver.com
    maxPayloadSize: 1048576 # 1MB

StdIO服务器示例：

1. 使用 官方文件系统MCP服务器:

mcpStdIOServers:
  filesystem:
    command: npx
    args:
      - -y
      - "@modelcontextprotocol/server-filesystem"
      - "/path/to/your/files"

这个例子可以直接使用，因为官方文件系统mcp服务器是一个可以用npx运行的可执行包。只需更新路径以指向所需的目录。

1. 使用 go mcp文件系统mcp服务器:

mcpStdIOServers:
  filesystem:
    command: go
    args:
      - run
      - github.com/your_username/your_app # Replace with your app
      - -path
      - "/data/mcp/filesystem" # Path to expose to MCP clients

对于这个例子，您需要创建一个新的Go应用程序来导入 github.com/MegaGrindStone/go-mcp/servers/filesystem 包裹。旗帜命名（如 -path 在这个例子中）是完全可定制的，这取决于你如何构建自己的应用程序——它不必被称为“路径”。 这个例子 这只是一个起点，显示了一种可能的实现方式，其中使用标志来指定要公开的目录。您可以根据自己的特定需求自由设计自己的应用程序结构和命令行界面。

配置代码段示例

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

llm:
  provider: anthropic
  model: claude-3-5-sonnet-20241022
  maxTokens: 1000
  parameters:
    temperature: 0.7

genTitleLLM:
  provider: openai
  model: gpt-3.5-turbo

🏗 项目结构

• cmd/：应用程序入口点
• internal/handlers/：Web请求处理程序
• internal/models/：数据模型
• internal/services/：LLM提供者集成
• static/：静态资产（CSS）
• templates/：HTML模板

🤝 贡献

1. 分叉存储库
2. 创建要素分支
3. 提交您的更改
4. 推送并创建拉取请求

📄 许可证

MIT许可证