MCP Web UI：将 Model Context Protocol 装进浏览器的开源实践

想象一个场景： 你在本地跑着 Ollama 跑得很开心，想要一个漂亮的 Web 界面来管理多轮对话，但同时又希望能连接各种外部数据源（数据库、文件系统、API）。传统的做法是找 LangChain 或 LlamaIndex，但它们的学习曲线不低。MCP Web UI 换了一个思路——它是一个开箱即用的 MCP Host，你只需要一条 Docker 命令，就能把整个浏览器变成 LLM 控制台。

背景：Model Context Protocol 是什么

MCP（Model Context Protocol）由 Anthropic 在 2024 年底发布，是一种开放协议，目标是标准化 AI 模型与应用层之间的通信方式。在 MCP 架构中有三种角色：

• Host（主机）：AI 应用的入口，负责管理对话历史、用户认证、UI 渲染，典型如 MCP Web UI
• Client（客户端）：在 Host 内部运行，与 Server 保持长连接，负责任务分发
• Server（服务器）：连接具体数据源或工具（数据库、GitHub、Slack 等），提供工具调用能力

MCP Web UI 的核心定位就是充当 Host，让用户通过浏览器与 LLM 交互，同时享受 MCP 生态的插件扩展能力。这是一个相对垂直的细分赛道——目前市面上大多数 LLM Web UI（如 OpenWebUI、Text Generation Webui）偏向"通用对话界面"，而 MCP Web UI 专注于 MCP 协议本身，对协议感兴趣的开发者更有吸引力。

技术架构：Go 的克制与务实

项目采用 Go 1.23 开发，选择 Go 而非 Python 是一个务实且有主见的选择。MCP 协议本身基于 JSON-RPC over stdio，Go 在并发处理、长连接管理上比 Python 更具性能优势，编译成单一二进制也降低了部署复杂度。

mcp-web-ui/
├── cmd/server/          # 程序入口
│   └── main.go
├── internal/
│   ├── config.go        # 配置加载（YAML）
│   ├── handlers/        # HTTP 路由处理（chat、home）
│   ├── models/          # 数据模型（Chat 对话结构）
│   └── services/        # 核心业务（LLM 调用、BoltDB 持久化）
├── static/              # 前端静态资源（CSS/JS）
├── templates/           # HTML 模板
├── Dockerfile          # 多阶段构建
└── go.mod               # 依赖管理

后端技术栈：

• HTTP 框架：标准库 net/http，无第三方框架依赖
• 模板引擎：Go 内置 html/template + text/template
• LLM 集成：通过各 SDK（ollama/ollama、go-openai）对接多个 Provider
• 持久化：go.etcd.io/bbolt（轻量级嵌入式 KV 数据库），无需额外部署数据库服务
• 语法高亮：yuin/goldmark + chroma 实现 Markdown 代码块高亮
• SSE 流式响应：tmaxmax/go-sse 实现打字机式流式输出

前端技术栈：纯 Vanilla JS + HTML + CSS，无任何前端框架依赖。这意味着体积小、加载快、调试简单——对于一个开发者工具来说，这是合理取舍。CSS 和 JS 放在 static/ 目录下，由 Go 的 embed.FS 内嵌打包进二进制。

核心功能：从配置到对话的完整链路

多 LLM 后端支持

配置文件中可切换 Provider：

llm:
  provider: ollama          # 或 anthropic / openai / openrouter
  model: claude-3-5-sonnet-20241022
  host: http://localhost:11434

目前支持四个 Provider：Ollama（本地）、Anthropic（Claude 系列）、OpenAI（GPT 系列）、OpenRouter（聚合平台）。这是一个典型的"统一抽象层"设计，通过 services/ 下的多个文件分别实现各家 SDK，统一接口供 handlers/chat.go 调用。

MCP 协议集成

通过 github.com/MegaGrindStone/go-mcp 库在 Host 内部运行 MCP Client。启动时，程序会检测已配置的 MCP Server 并建立连接，对话中可动态调用 Server 提供的工具（搜索、数据库查询等）。go-mcp 库封装了 JSON-RPC 协议细节，开发者无需直接处理协议层。

对话持久化

使用 BoltDB（嵌入在进程内）存储聊天历史，支持 Markdown 格式导出。这意味着你的所有对话都留在本地，不需要任何云端服务——隐私友好，是 MCP Web UI 区别于闭源 LLM UI 的重要卖点。

部署体验：真正的"五分钟部署"

docker build -t mcp-web-ui .
docker run -p 8080:8080 \
  -v $(pwd)/config.yaml:$HOME/.config/mcpwebui/config.yaml \
  mcp-web-ui

Dockerfile 采用多阶段构建：编译阶段用 golang:1.23-alpine，运行时阶段仅用 alpine:latest，最终镜像大小控制在 ~15MB 左右。BoltDB 数据存储在容器内的 $HOME/.config/mcpwebui/，生产环境建议映射为宿主机卷以实现数据持久化。

部署的前提是你需要有可用的 LLM 后端——本地 Ollama（最推荐）或 Anthropic/OpenAI API Key。如果只用 Ollama，整体部署可以完全离线运行，隐私性拉满。

不足之处：项目没有提供 docker-compose.yml，如果需要同时运行 Ollama + MCP Server + Web UI，仍需手工编排。对新手来说，这里有一定的配置门槛。

代码质量评估

• 测试覆盖率：仓库配有 codecov.yml，GitHub Actions 中有 CI + codecov 步骤，说明作者有基础的测试意识。但 internal/ 下仅有 handlers/main_test.go，整体测试覆盖范围有限。
• 代码规范：.golangci.yaml 配置了 linter，PR 和 commit 均有 CI 检查，基本规范达标。
• 文档质量：README 包含功能说明和配置示例，但缺少架构设计文档或贡献指南，对想深入了解的开发者不够友好。
• 安全问题：项目允许配置 API Key（Anthropic/OpenAI），若 Docker 容器配置不当可能泄露 Key，建议生产环境使用环境变量注入而非配置文件明文存储。

总结：细分赛道的务实选手

MCP Web UI 不是那种"什么都能做"的万能工具，它的定位很清晰：为 MCP 协议爱好者提供一个轻量的、本地优先的 Web Host。87 颗星（截至分析时）对于一个 2025 年 1 月创建的项目来说，增长速度并不算快，说明 MCP 协议生态本身还在早期渗透阶段。

适合使用的人群：对 MCP 协议感兴趣想本地实验的开发者、需要在离线环境运行 LLM UI 的用户、喜欢轻量级工具而非重型框架的技术人员。

不适合的场景：需要复杂 RAG/Agent 工作流的企业用户（这部分 LangChain/LlamaIndex 生态更成熟）、期望开箱即有丰富 UI 功能的普通用户（MCP Web UI 功能相对基础）。

从开源生态角度看，MCP Web UI 的价值在于它是 MCP 协议的开源 Host 参考实现，对于理解 MCP 架构、设计自己的 MCP 应用都有参考意义。