UI MCP Server

该项目始于 Power of Europe Hackathon 2025。

LLM-OS 演示

所有支持组件的演示

概述

ui-mcp-server 是一个 MCP 服务器，用于生成一系列 UI 组件的规范，仅包含必要的数据以保持框架无关性。与现有解决方案不同，ui-mcp-server 采用数据导向的方法，在对话会话期间获取并填充数据，而完全由前端开发者负责渲染（目前）。

特点

• 框架无关的 UI 组件规范
• 支持对话会话的数据导向方法
• 开发者在渲染和定制方面拥有完全自由
• 兼容如 Cursor、Kilo 和 Claude Desktop 等 MCP 客户端

安装

Claude Desktop

1. 将服务器添加到您的 Claude Desktop 配置文件 (claude_desktop_config.json) 中：

   {
     "mcpServers": {
       "UI MCP Server": {
         "command": "full/path/to/uvx",
         "args": ["ui-mcp-server"]
       },
       // 您现有的 MCP 服务器...
     }
   }
   

2. 重启 Claude Desktop 以加载 MCP 服务器。

Kilo

一个正常工作的配置如下所示：

{
  "mcpServers": {
    "ui-mcp-server":{
      "command": "full/path/to/ui-mcp-server",
      "args": []
    }
  }
}

我们可能遗漏了某些内容，因为下面的预期版本未能工作：

{
  "mcpServers": {
    "ui-mcp-server":{
      "command": "full/path/to/uvx",
      "args": ["ui-mcp-server"]
    }
  }
}

核心概念

• 工具化的 UI：ui-mcp-server 提供可用于生成 UI 组件的工具。为此，常用 UI 组件被定义为工具，并且在对话会话期间获取每个工具所需的数据。AI 代理使用此 MCP 服务器处理数据提取部分。请参阅我们的 Streamlit 演示示例。
• 组件标准化：为了保持前端框架无关性，ui-mcp-server 定义了一个标准化的组件库，基本上是一组 UI 组件的 JSON 模式，其中一些值是预定义的，而其他值则留给 AI 填充。

相关项目

• Magic MCP：生成 React 组件，专注于提高开发效率
• MCP UI：与本项目类似的概念，但与特定 UI 实现紧密耦合。不能作为独立的 MCP 服务器使用。
• shadcn-ui-mcp-server：类似于 MCP UI，提供包含电池的解决方案，提供 shadcn 组件作为源代码。

关键差异

关注点分离：ui-mcp-server 专门处理 UI 类型和对话数据，为开发者根据其具体需求和框架自定义和渲染组件提供了最大的灵活性。

未来工作

• 为主流框架（React、Vue、Svelte 等）定义标准化的组件库
• 创建模板以简化前端开发流程