星战科技xingzhan.cloud
返回市场
MCP网页界面

MCP网页界面

作者：MegaGrindStone88 星标更新：2025-05-05
安装使用来源：spider==github.com

项目介绍

MCP Web UI

CI Go Report Card codecov

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

🌟 概述

MCP Web UI 设计用于简化和增强与人工智能语言模型的交互，通过提供以下功能：

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

演示视频

YouTube

🚀 功能

  • 🤖 多提供商LLM集成：
    • Anthropic（Claude模型）
    • OpenAI（GPT模型）
    • Ollama（本地模型）
    • OpenRouter（多个提供商）
  • 💬 直观的聊天界面
  • 🔄 实时响应流式传输 通过服务端发送事件（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：

  • Anthropic：

    • apiKey: Anthropic API密钥（可以使用ANTHROPIC_API_KEY环境变量）
    • maxTokens: 最大标记限制
    • 注意：仅包含空白字符的停止序列将被忽略，有效序列中的空白将被修剪，因为Anthropic不支持停止序列中的空白字符

  • OpenAI：

  • OpenRouter：

    • apiKey: OpenRouter API密钥（可以使用OPENROUTER_API_KEY环境变量）

标题生成器配置

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 # 替换为您自己的应用
      - -path
      - "/data/mcp/filesystem" # 要暴露给MCP客户端的路径

对于此示例，您需要创建一个新的Go应用程序，该程序导入了github.com/MegaGrindStone/go-mcp/servers/filesystem包。标志命名（如本例中的-path）完全可以根据您自己的应用程序结构进行定制——它不必称为“path”。此示例只是一个起点，展示了可能的一种实现方式，其中使用了一个标志来指定要暴露的目录。您可以根据具体需求自由设计自己的应用程序结构和命令行界面。

示例配置片段

port: 8080
logLevel: info
systemPrompt: 你是一个乐于助人的助手。

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许可证