🎨 MCP UI GENERATOR

---

Интерактивный TypeScript SDK для Model Context Protocol веб-компонентов

📖 English Documentation | 🎯 Demo & Live Examples

🎯 Что такое MCP UI SDK?

MCP UI SDK — это TypeScript-библиотека для АВТОМАТИЧЕСКОЙ генерации ИНТЕРАКТИВНЫХ ВЕБ-КОМПОНЕНТОВ в рамках Model Context Protocol (MCP).

🚧 ЭКСПЕРИМЕНТАЛЬНЫЙ ПРОЕКТ В РАЗРАБОТКЕ

---

✨ Основные возможности

🔧 Серверная часть (@mcp-ui/server) Утилиты для создания HtmlResourceBlock объектов Безопасная генерация HTML-ресурсов Поддержка различных UI схем (ui://, ui-app://) Встроенная валидация и типизация

🎨 Клиентская часть (@mcp-ui/client) React-компоненты для рендеринга HTML-ресурсов Безопасная обработка iframe с DOMPurify Система событий для взаимодействия с UI Responsive дизайн и современные анимации

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

# Установка зависимостей
pnpm install

# Запуск демо-версии
./start-demo.sh

# Разработка
pnpm dev

# Тестирование
pnpm test

🎭 Демонстрационные компоненты

Проект включает в себя 6 готовых UI-компонентов для демонстрации возможностей:

🖼️ Галерея	📊 Аналитика	📝 Формы
Интерактивная галерея изображений	Дашборд с Chart.js	Динамические формы

📅 Календарь	💬 Чат	📁 Файл-менеджер
События и планирование	Интерфейс сообщений	Управление файлами

🛠️ Архитектура проекта

mcp-ui/
├── packages/
│   ├── client/          # React компоненты
│   ├── server/          # Серверные утилиты
│   └── shared/          # Общие типы и утилиты
├── examples/
│   └── server/          # Пример MCP сервера
├── docs/                # Документация
├── demo.html           # Интерактивное демо
└── start-demo.sh       # Скрипт автозапуска

🎯 Использование

Серверная часть

import { createHtmlResource } from '@mcp-ui/server';

// Создание интерактивного компонента
const dashboard = createHtmlResource({
  uri: 'ui://dashboard/analytics',
  content: `
    <div class="dashboard">
      <h2>Аналитика продаж</h2>
      <canvas id="chart"></canvas>
    </div>
  `,
  css: './styles/dashboard.css',
  js: './scripts/chart-setup.js'
});

Клиентская часть

import { HtmlResource } from '@mcp-ui/client';

function App() {
  return (
    <HtmlResource
      resource={{
        uri: 'ui://dashboard/analytics',
        mimeType: 'text/html',
        text: htmlContent
      }}
      onEvent={(event) => console.log('UI Event:', event)}
    />
  );
}

🌐 Схемы URI

• ui:// — Самостоятельный HTML контент (iframe с srcDoc)
• ui-app:// — Внешние приложения (iframe с src)

🤖 Автоматическая генерация UI (экспериментально)

Набор пакетов @auto-ui/* позволяет анализировать данные и строить базовую UI-схему автоматически.

• @auto-ui/core — типы и упрощенный SimpleUISchemaGenerator
• @auto-ui/analyzer — rule-based анализатор данных
• @auto-ui/components — React компоненты (AutoTable, AutoForm и другие)
• @auto-ui/server — AutoUIServer для серверной интеграции

Функциональность активно развивается, API может меняться.

🧪 Тестирование

# Запуск тестов
pnpm test

# Тесты в режиме наблюдения
pnpm test:watch

# Покрытие кода
pnpm coverage

📚 Документация

• 📖 Полная документация (English)
• 🎯 Руководство по компонентам
• 🚀 Демо и примеры
• 🔧 API справочник

🤝 Вклад в развитие

Мы приветствуем вклад в развитие проекта! Пожалуйста, ознакомьтесь с руководством по участию.

📄 Лицензия

Этот проект распространяется под лицензией Apache 2.0.

---

FORKED FROM @IDOSAL/MCP-UI

DEVELOPED BY

HOW2AI AGENCY