Generative-UI-MCP

Name: Generative-UI-MCP
Rating: 2.3 (52 reviews)
Author: op7418

by op7418·★ 52·综合分 45

一个按需加载设计指南的 MCP 服务器，用于生成交互式可视化。

ai-llmdeveloper-toolsproductivity

Forks

活跃 Issue

2 个月前

概述

Generative-UI-MCP 是一个基于 TypeScript 的 MCP 服务器，使 AI 模型能够创建交互式可视化，如图表、图表、模型图等。该服务器采用模块化设计，包括交互控件、图表、模型图、艺术和图表模块。它实现了资源高效的方法，使用紧凑的系统提示（约300个token），只在需要时加载详细规范。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

你:在AI应用中生成交互式数据可视化

你:为文档创建UI模型图和图表

你:构建带有结构化组件的AI驱动设计工具

你:这个服务器如何通过按需加载设计指南来节省token？

你:这个MCP服务器支持哪些类型的可视化？

什么时候选它

当您需要AI模型一致地生成交互式可视化，并希望避免用设计规则膨胀系统提示时，选择此服务器。

什么时候不要选它

如果您需要超出支持模块（图表、图表、模型、艺术、交互式UI）的可视化类型，或需要对设计系统进行广泛定制，请不要选择它。

此 server 暴露的工具

从 README 抽取出 1 个工具

load_ui_guidelinesload_ui_guidelines(modules: string[])
Load detailed design guidelines for generating visual widgets

可对比工具

mcp-artifactsvercel-generative-uichartjs-mcp

安装

通过AI自动安装

将以下提示复制到您的AI助手（Claude Code、Cursor等）中自动安装： > 安装 generative-ui-mcp MCP服务器。运行 npx generative-ui-mcp 作为stdio MCP服务器。服务器名称应为"generative-ui"。

Claude Desktop

添加到您的 claude_desktop_config.json：

{
  "mcpServers": {
    "generative-ui": {
      "command": "npx",
      "args": ["generative-ui-mcp"]
    }
  }
}

其他AI工具（Cursor/Windsurf）

添加到您的MCP设置（.cursor/mcp.json或等效文件）：

{
  "mcpServers": {
    "generative-ui": {
      "command": "npx",
      "args": ["generative-ui-mcp"]
    }
  }
}

FAQ

这个服务器如何通过按需加载设计指南来节省token？: 完整的指南约需650+个token，而系统提示仅约300个token。只有在模型需要生成可视化时才会加载详细规范。
这个MCP服务器支持哪些类型的可视化？: 服务器支持五个模块：交互（HTML控件、表单）、图表（Chart.js模式）、模型图（UI布局）、艺术（SVG插图）和图表（流程图、时间线）。

Generative-UI-MCP 对比

Generative-UI-MCP vs ultimate_mcp_server Generative-UI-MCP vs mcp-server-chart Generative-UI-MCP vs everything Generative-UI-MCP vs filesystem Generative-UI-MCP vs time

GitHub →

最后更新于 2026-05-17 · 由 README + GitHub 公开数据自动生成。