mcp-ui

用 MCP 协议快速搭建 AI 原生 UI，省去繁琐集成。

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署开源模型 🍴 复刻 405 🐛 待处理 65 👀 关注 37

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 5259

维护状态维护中

是否开源开源

定价模式 🏷️完全免费开源项目，Apache-2.0 许可证，完全免费，可自行部署使用。

项目预览

项目数据

分类开源模型

开发团队MCP-UI-Org

官网地址https://mcpui.dev

GitHubhttps://github.com/MCP-UI-Org/mcp-ui

定价模式🏷️完全免费

价格说明开源项目，Apache-2.0 许可证，完全免费，可自行部署使用。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议Apache-2.0

主要语言TypeScript

技术栈/模型ai,frontend,llm,mcp,ui,web

GitHub 星标★ 5259

上线时间2025-05-13 00:00:00

代码更新2026-09-16

仓库体积4.7 MB

本站数据更新2026-11-10

维护状态维护中

收录时间2026-08-09

浏览次数7

项目介绍

mcp-ui 是一个基于 Model Context Protocol (MCP) 的 UI 框架，旨在通过协议和 SDK 创建下一代 UI 体验。它解决了传统 UI 开发中前端与 AI 模型交互复杂、集成成本高的问题，提供了一套标准化的方式，让开发者能够快速构建支持 AI 能力的界面。其核心能力包括：提供声明式 UI 组件，简化与 MCP 服务器的通信；内置状态管理和数据流控制，支持实时更新；以及可扩展的插件体系，方便接入不同的 AI 模型和工具。通过 mcp-ui，开发者可以更专注于业务逻辑和用户体验，而无需处理底层协议细节。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 5259

技术标签

ai frontend llm mcp ui

使用教程

⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。

难度：入门约 10 分钟部署方式：库/依赖 5 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

Node.js 与 npm 环境（用于安装 @mcp-ui/server、@mcp-ui/client 两个 npm 包）
可选：Python 环境（用于 pip 安装 mcp-ui-server）
可选：Ruby 环境（用于 gem 安装 mcp_ui_server）
需要能访问 npm / PyPI / RubyGems 等包管理源

安装与启动步骤

1安装服务端 SDK

在项目目录下通过 npm 安装 @mcp-ui/server，用于在 MCP 服务端生成 UI 资源。README 未给出具体安装命令，该命令由包名推断。
```
npm install @mcp-ui/server
```
2安装客户端 SDK

安装 @mcp-ui/client，用于在前端渲染来自 MCP 服务端的 UI。包名来自 README 中的 npm 徽章链接。
```
npm install @mcp-ui/client
```
3可选安装 Python SDK

如果使用 Python 编写 MCP 服务端，可通过 pip 安装 mcp-ui-server（名称来自 README 的 PyPI 徽章）。
```
pip install mcp-ui-server
```
4可选安装 Ruby SDK

如果使用 Ruby 编写 MCP 服务端，可通过 gem 安装 mcp_ui_server（名称来自 README 的 RubyGems 徽章）。
```
gem install mcp_ui_server
```
5查阅文档与示例

README 的 Installation 章节为空，官方建议用 GitMCP 让 IDE 读取最新文档，并参考仓库 Examples 章节的示例代码。