Semiotic

Semiotic

nteractApache-2.0
2.7k звёзд137 форков
Semiotic — это MCP-сервер и React-библиотека для визуализации данных. Разработчик описывает диаграмму JSON-схемой — сервер генерирует готовый React-компонент с валидацией и обработкой ошибок. Проект создан для команд, которые хотят поручить AI-ассистентам построение сложных графиков, дашбордов и сетей, не тратя время на ручную настройку d3.js или перебор примеров кода. Semiotic решает проблему, типичную для AI-разработки: ассистент угадывает API библиотеки, допускает ошибки в пропсах и долго не выдает рабочий код. Сервер предоставляет машиночитаемую JSON-схему всех 43 типов графиков. AI не гадает, а использует точную спецификацию. Каждый компонент содержит встроенный error boundary и предупреждения в режиме разработки с подсказками по опечаткам.
Gaming
Открыть на GitHubОфициальный сайт

Установка

npx -y semiotic

Характеристики

Общее

  • СтатусСообщество
  • Разработчикnteract
  • ЛицензияApache-2.0

Технологии

  • Языки
    TypeScript
  • Транспорт
    stdio

Описание

Возможности

  • Генерация React-компонентов 43 типов диаграмм по JSON-схеме
  • Встроенный модуль semiotic/ai с 42 HOC-компонентами (XY, порядковые, сети, реальное время) для AI-генерации
  • Экспорт машиночитаемой JSON-схемы (ai/schema.json) для всех компонентов библиотеки
  • Диагностика конфигураций через CLI: npx semiotic-ai --doctor с подсказками опечаток и обнаружением антипаттернов
  • Программная проверка через функцию diagnoseConfig — 12 проверок и конкретные исправления
  • Создание скоординированных дашбордов с синхронизацией между графиками
  • Поддержка сетевых графов, потоковых данных и географических карт (модуль semiotic/geo)
  • Автоматическая загрузка файлов CLAUDE.md для Claude, Cursor, Copilot, Windsurf и Cline — настройка ассистента под библиотеку
  • Встроенная обработка ошибок и предупреждения в режиме разработки с подсказками по опечаткам в пропсах
  • Доступность: подписи SVG для скринридеров, клавиатурная навигация по легенде, всплывающие подсказки с aria-live

Как подключить

Установка сервера не требуется — он запускается через npx. Добавьте запись в конфигурацию MCP-клиента (например, Claude Desktop):

{ "mcpServers": { "semiotic": { "command": "npx", "args": ["-y", "semiotic"] } } }

После перезапуска клиента AI-ассистент сможет создавать диаграммы через инструменты сервера. Для полноценной работы с библиотекой в проекте выполните npm install semiotic.

Примеры запросов

  • «Построй линейный график продаж по месяцам на основе данных из sales.json. Используй ось X для месяцев, ось Y для выручки»
  • «Создай сетевой граф связей между модулями проекта на основе JSON-описания графа»
  • «Сгенерируй код React-дашборда с тремя синхронизированными панелями: круговая диаграмма категорий, гистограмма по месяцам и таблица с итогами»
  • «Проверь конфигурацию компонента XYFrame через diagnoseConfig и исправь найденные антипаттерны»

Технические детали

  • Язык разработки: TypeScript
  • Транспорт: stdio
  • Лицензия: Apache-2.0
  • Основная библиотека: React версии 16.8+
  • Совместимые клиенты: Claude Desktop, Cursor, Copilot, Windsurf, Cline и любые другие MCP-клиенты

Поделиться