AI导哈

UI组件规范生成服务

一个框架无关的UI组件规范生成服务，专注于数据获取和会话支持，为前端开发者提供灵活的渲染自由。

  • by ShaojieJiang
  • Python
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 shaojiejiang/ui-mcp-server

使用说明

UI MCP服务器

该项目始于 欧洲力量黑客马拉松2025.

LLM-OS 演示

所有支持的组件演示

概述

ui-mcp-server 是一个MCP服务器，它为一系列UI组件生成规范，只包含保持框架无关性的基本数据。与现有解决方案不同， ui-mcp-server 以数据为中心，在对话会话期间获取和填充数据，同时将渲染完全留给前端开发人员（目前）。

特性

  • 与框架无关的UI组件规范
  • 以数据为中心的方法，支持对话会话
  • 开发人员完全自由地进行渲染和自定义
  • 与Cursor、Kilo和Claude Desktop等MCP客户端兼容

安装

克劳德桌面

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

    {
  "mcpServers": {
    "UI MCP Server": {
      "command": "full/path/to/uvx",
      "args": ["ui-mcp-server"]
    },
    // Your existing MCP servers...
  }
}

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

千

工作配置如下：

{
  "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组件被定义为工具，每个工具所需的数据是在对话会话期间获取的。数据提取部分由使用此MCP服务器的AI代理负责。查看我们的 Streamlit演示 举个例子。
  • 组件标准化：对前端框架持中立态度， ui-mcp-server 定义了一个标准化的组件库，它基本上是一组用于UI组件的JSON模式，其中一些值是预定义的，其他值则由AI填充。

相关项目

  • 魔术MCP：生成React组件，专注于开发生产力
  • MCP用户界面：概念与此项目类似，但与特定UI实现的耦合更紧密。不能用作独立的MCP服务器。
  • shadcn-ui mcp服务器：与MCP UI类似，它是一个包含电池的解决方案，提供shadcn组件作为源代码。

关键差异

关注点分离: ui-mcp-server 专门处理UI类型和对话数据，为开发人员根据其特定需求和框架定制和呈现组件提供了最大的灵活性。

今后的工作

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

相关 MCP