Generative UI

Generative UI наделяет модели ИИ способностью создавать интерактивные диаграммы, схемы и макеты UI с загружаемыми по запросу рекомендациями по дизайну. Сокращает использование токенов и обеспечивает согласованные, качественные результаты для ИИ-хостов, таких как Claude и Cursor.

Data Science и ML Инструменты разработчика Дизайн ★ 31 GitHub (31 ★)

Generative UI — это MCP-сервер, предназначенный для обучения ИИ-моделей созданию консистентных, безопасных для потоковой передачи и визуально качественных интерактивных виджетов. Вдохновленный такими концепциями, как Artifacts от Anthropic и Generative UI от Vercel, этот сервер позволяет моделям загружать структурированные гайдлайны по дизайну только по необходимости, значительно сокращая использование токенов в системном промпте. Он предлагает специализированные модули для различных типов визуализации, включая графики, диаграммы, макеты интерфейсов и интерактивные HTML-элементы, гарантируя, что сгенерированные ИИ интерфейсы соответствуют комплексной системе дизайна.

Ключевые особенности

01Интеграция с ИИ-хостами, такими как Claude Code, Cursor и Windsurf, через стандартную настройку MCP

02Загрузка гайдлайнов по дизайну по запросу с помощью модулей (интерактивный, график, макет, искусство, диаграмма)

0331 звезда на GitHub

04Сокращение использования токенов за счет компактного системного промпта для базового вывода виджетов и загрузки детальных спецификаций только при необходимости

05Комплексные спецификации дизайна, включая основную систему дизайна, цветовую палитру и шаблоны компонентов

06Включает инструмент (`load_ui_guidelines`) для загрузки конкретных модулей дизайна и ресурс (`generative-ui://system-prompt`) для основных ограничений

Сценарии использования

01Упрощение создания сложных диаграмм, таких как блок-схемы, временные шкалы и иерархии, с помощью ИИ-команд

02Генерация интерактивных макетов и прототипов интерфейсов непосредственно из ИИ-промптов

03Расширение возможностей ИИ-ассистентов по созданию динамических графиков и интерактивных визуализаций данных в рамках диалогов

Generative UI MCP

An MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.

Inspired by Anthropic's Artifacts and Vercel's Generative UI. This server provides structured design guidelines so AI models produce consistent, streaming-safe, visually polished widgets.

What it does

Instead of stuffing thousands of tokens of design rules into every system prompt, this MCP server lets the model load guidelines on demand — only when it actually needs to generate a visualization.

Module	What it covers
`interactive`	HTML controls, forms, sliders, calculators
`chart`	Chart.js patterns, canvas setup, interactive data controls
`mockup`	UI mockup layouts, component patterns
`art`	SVG illustrations, artistic visualizations
`diagram`	Flowcharts, timelines, hierarchies, cycle diagrams, matrices

The model calls load_ui_guidelines with the modules it needs, and gets back comprehensive design specs including:

Core design system (philosophy, streaming rules, CSS variables)
Color palette (6 ramps with semantic usage rules)
Component patterns and code templates
SVG setup guides with arrow markers and viewBox calculations
8 diagram types with layout rules and code examples

Quick start

Auto-install via AI

Copy and paste the following prompt into your AI assistant (Claude Code, Cursor, etc.) to install automatically:

Install the generative-ui-mcp MCP server. Run npx generative-ui-mcp as a stdio MCP server. The server name should be "generative-ui".

Claude Code

claude mcp add generative-ui -- npx generative-ui-mcp

Claude Desktop

Add to your claude_desktop_config.json:

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

Cursor / Windsurf

Add to your MCP settings (.cursor/mcp.json or equivalent):

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

Tool

`load_ui_guidelines`

Load detailed design guidelines for generating visual widgets.

Parameters:

Name	Type	Description
`modules`	`string[]`	Modules to load: `interactive`, `chart`, `mockup`, `art`, `diagram`

Example call:

{
  "name": "load_ui_guidelines",
  "arguments": {
    "modules": ["chart", "diagram"]
  }
}

Shared sections (like Core Design System and Color Palette) are automatically deduplicated when loading multiple modules.

Resource

`generative-ui://system-prompt`

A compact system prompt snippet (~300 tokens) with all hard constraints needed for valid widget output. Hosts can inject this into their system prompt so the model can generate basic widgets even without calling the tool.

Contains: output format, JSON escaping rules, streaming order, CDN allowlist, SVG setup, size limits, and interaction patterns.

How it works

┌─────────────┐    system prompt     ┌─────────────┐
│   AI Host   │ ◄── injects ──────── │  Resource:   │
│ (Claude,    │     ~300 tokens      │ system-prompt│
│  Cursor,    │                      └─────────────┘
│  etc.)      │
│             │    tool call          ┌─────────────┐
│   Model ────│──► load_ui_          │  Guidelines  │
│             │    guidelines         │  Modules     │
│             │ ◄── returns ──────── │  (on demand) │
│             │    detailed specs     └─────────────┘
└─────────────┘

Token savings: The system prompt is ~300 tokens vs ~650+ tokens for full guidelines. Detailed specs are only loaded when the model actually needs to generate a visualization. Most conversations don't involve widgets, so this saves tokens on every request.

Development

npm install
npm run build
npm start

License

MIT

Generative UI MCP

MCP-сервер для генерации интерактивных визуализаций (диаграмм, чартов, мокапов, SVG-иллюстраций) силами AI-моделей. Вдохновлён Anthropic Artifacts и Generative UI от Vercel.

Зачем это нужно

Обычно, чтобы модель могла сгенерировать красивый виджет, ей в system prompt приходится закладывать тысячи токенов с дизайн-правилами. Generative UI MCP решает эту проблему: модель загружает гайдлайны по требованию (только когда действительно нужно что-то нарисовать).

Модули и их возможности

Модуль	Что покрывает
`interactive`	HTML-элементы управления: формы, слайдеры, калькуляторы
`chart`	Диаграммы на Chart.js, настройка canvas, интерактивные данные
`mockup`	Макеты UI: компоненты, шаблоны экранов
`art`	SVG-иллюстрации, художественные визуализации
`diagram`	Блок-схемы, временные шкалы, иерархии, циклы, матрицы

Модель вызывает load_ui_guidelines с нужными модулями и получает полную спецификацию:

Дизайн-система: философия, правила стриминга, CSS-переменные
Цветовая палитра: 6 градиентов с правилами использования
Шаблоны компонентов и готовые сниппеты кода
Настройка SVG (маркеры стрелок, расчёт viewBox)
8 типов диаграмм с примерами и правилами вёрстки

Быстрый старт

Автоустановка через AI

Скопируйте этот текст и вставьте в ваш AI-ассистент (Claude Code, Cursor и т.д.):

Install the generative-ui-mcp MCP server. Run npx generative-ui-mcp as a stdio MCP server. The server name should be "generative-ui".

Claude Code

claude mcp add generative-ui -- npx generative-ui-mcp

Claude Desktop

Добавьте в claude_desktop_config.json:

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

Cursor / Windsurf

Добавьте в ~/.cursor/mcp.json или аналог:

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

Инструменты

`load_ui_guidelines`

Загружает гайдлайны для выбранных модулей.

Параметры:

Имя	Тип	Описание
`modules`	`string[]`	Массив модулей: `interactive`, `chart`, `mockup`, `art`, `diagram`

Пример вызова:

{
  "name": "load_ui_guidelines",
  "arguments": {
    "modules": ["chart", "diagram"]
  }
}

Общие секции (дизайн-система, палитра) дедуплицируются при загрузке нескольких модулей.

Ресурс

`generative-ui://system-prompt`

Компактный сниппет (~300 токенов) с жёсткими ограничениями для валидного вывода виджетов. Хост может внедрить его в свой system prompt, чтобы модель умела генерировать базовые виджеты даже без вызова инструмента.

Содержит: формат вывода, правила экранирования JSON, порядок стриминга, белый список CDN, настройки SVG, лимиты размеров и паттерны взаимодействия.

Как это работает (схема)

 AI Host          Ресурс: system-prompt (~300 токенов)
(Claude,     ◄── инжектит в system prompt
 Cursor,     
 и т.д.)    
   │               Инструмент: load_ui_guidelines
   │──► вызов      │
   │◄── возвращает │ Гайдлайны модулей (по требованию)
   │  детальные    │
   │  спецификации  │

Экономия токенов: system prompt ~300 токенов вместо ~650+ для полных гайдлайнов. Детальные спецификации загружаются только когда модель действительно собирается генерировать виджет. В большинстве диалогов виджеты не нужны, так что это экономит токены на каждый запрос.

Разработка

npm install
npm run build
npm start

Лицензия

MIT

Что такое Generative UI?

Generative UI — это MCP-сервер, который обучает модели ИИ создавать широкий спектр интерактивных визуализаций, включая диаграммы, графики и макеты UI, предоставляя структурированные рекомендации по дизайну по запросу.

С какими AI-платформами совместим Generative UI?

Generative UI легко интегрируется с популярными AI-хостами, поддерживающими Model Context Protocol (MCP), такими как Anthropic Claude Code, Claude Desktop, Cursor и Windsurf, через стандартную настройку.

Какие типы визуализаций могут создавать модели ИИ с помощью Generative UI?

Модели ИИ могут создавать широкий спектр визуализаций, включая интерактивные HTML-элементы, диаграммы на основе Chart.js, макеты интерфейсов, SVG-иллюстрации и различные схемы, такие как блок-схемы, временные шкалы и иерархии, используя специальные модули дизайна.

Как Generative UI экономит использование AI-токенов?

Он сокращает использование токенов, предлагая компактный системный промпт (~300 токенов) для вывода базовых виджетов. Детальные спецификации дизайна загружаются только по запросу через инструмент load_ui_guidelines, когда модели ИИ действительно нужно создать сложную визуализацию, что экономит токены в большинстве диалогов.

Источник: https://mcpmarket.com/server/generative-ui-1

Ключевые особенности

Сценарии использования

Generative UI MCP

What it does

Quick start

Auto-install via AI

Claude Code

Claude Desktop

Cursor / Windsurf

Tool

load_ui_guidelines

Resource

generative-ui://system-prompt

How it works

Development

License

Generative UI MCP

Зачем это нужно

Модули и их возможности

Быстрый старт

Автоустановка через AI

Claude Code

Claude Desktop

Cursor / Windsurf

Инструменты

load_ui_guidelines

Ресурс

generative-ui://system-prompt

Как это работает (схема)

Разработка

Лицензия

Что такое Generative UI?

С какими AI-платформами совместим Generative UI?

Какие типы визуализаций могут создавать модели ИИ с помощью Generative UI?

Как Generative UI экономит использование AI-токенов?

Комментарии

`load_ui_guidelines`

`generative-ui://system-prompt`

`load_ui_guidelines`

`generative-ui://system-prompt`