Semiotic

Semiotic

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

Подключить Semiotic

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

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

3

Скопируйте и проверьте

Claude Desktop / Claude Code

Клиент запускает MCP-сервер как локальный процесс.

  1. 1.Откройте настройки MCP в Claude.
  2. 2.Добавьте сервер с указанной командой и переменными окружения.
  3. 3.Перезапустите Claude, если сервер не появился автоматически.
json
{
  "mcpServers": {
    "semiotic": {
      "command": "npx",
      "args": [
        "-y",
        "semiotic"
      ]
    }
  }
}

Сгенерировано из существующей команды запуска. Желательно сверить с README.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Semiotic

Semiotic относится к Разработка игр. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
Apache-2.0
Реализация
TypeScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 2.

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

Общее

  • СтатусСообщество
  • Разработчик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-клиенты

Поделиться