microcharts MCP
MCP-сервер @microcharts/mcp: агент подбирает тип из 106 мини-графиков React, берет готовые props и получает SVG с описанием
- 207 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Сервер локально подбирает и рисует графики по библиотеке и ничего не пишет в проект без вашей команды
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/microcharts-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Сервер локально подбирает и рисует графики по библиотеке и ничего не пишет в проект без вашей команды
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
microcharts — библиотека из 106 мини-графиков для React, рассчитанных на то, чтобы стоять внутри интерфейса: в предложении, ячейке таблицы, карточке показателя или потоковом ответе модели. Без зависимостей, чистый SVG, около 2–7 КБ с интерактивом, статичные графики безопасны для серверных компонентов, а каждый график сам описывает себя словами по данным. Пакет `@microcharts/mcp` запускается локально по stdio и дает ассистенту три инструмента: найти тип графика под вопрос, получить его точные свойства и готовый пример и отрисовать график в самодостаточный SVG с сгенерированным альтернативным текстом. Подключение: команда `npx` с аргументами `-y @microcharts/mcp`. У библиотеки есть и документация для ИИ: `llms.txt` и каталог `catalog.json` со всеми графиками.
Для кого. Разработчикам интерфейсов на React, которые просят агента вставить мини-график в таблицу, карточку или ответ чата и хотят доступный текст в комплекте.
Подходит, если
- Агент выбирает по вопросу тип графика, например дельту или спарклайн, и получает проверенные свойства
- В ячейке таблицы нужен спарклайн с динамикой недели и осмысленным описанием для экранного диктора
- Нужен готовый SVG графика с альтернативным текстом, чтобы вставить его в письмо или документ
- Мини-график стримится в ответ модели и должен остаться читаемым и проверяемым человеком
Не подходит, если
- Нужны большие панели с осями, легендами и подписями: библиотека делает слова-размерные графики
- Проект не на React: пакет рассчитан на React как единственную зависимость
- Нужна поддержка нестандартных кастомных визуализаций: у каждого типа один документированный канал кодирования
Пример запроса к агенту
Подбери мини-график для динамики конверсии за неделю, выдай свойства и отрисуй SVG с альтернативным текстом для ячейки таблицыMCP
- Транспорт
- stdio
- Авторизация
- не нужна
Ограничения
Сервер работает по stdio и запускается локально, а сама библиотека рассчитана на React. Авторы пишут, что код проверен и применяется в продакшене, хотя стеки и крайние случаи покрыты не полностью, и просят сообщать о находках в задачи репозитория. Статичные графики безопасны для серверных компонентов React, интерактивная версия подключается отдельным импортом `/interactive` и требует клиентский компонент. Сервер не ходит в сеть для отрисовки и работает по самой библиотеке. Лицензия MIT, документация и каталог на microcharts.dev.
Как отключить. Удалите сервер из клиента и пакет `@microcharts/react` из проекта (`npm uninstall @microcharts/react`).
Частые вопросы
Как подключить microcharts MCP?
Добавьте в конфигурацию клиента сервер с командой `npx` и аргументами `-y @microcharts/mcp`. Он работает по stdio на вашей машине.
Какие инструменты у сервера?
Три: найти тип графика под вопрос, получить его точные свойства и готовый пример, отрисовать график в SVG с альтернативным текстом.
Как поставить библиотеку?
Командой `npm install @microcharts/react` и импортом стилей `@microcharts/react/styles.css` один раз в корне приложения.
Почему графики безопасны для серверных компонентов?
Статичные графики не используют хуки и рендерятся в HTML без клиентского JavaScript. Интерактивность подключается отдельным импортом из `/interactive`.
Какого размера графики?
Около 2–7 КБ в сжатом виде с интерактивом и 1–4 КБ статичные, бюджет проверяется в CI.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыMCP-сервер набора Keyline Icons: агент ищет иконку по имени, берет SVG и готовый импорт React без угадывания названий
MCP-сервер Arc UI: агент ищет React-компоненты с анимацией, читает документацию и свойства, получает команду shadcn.
MCP-сервер Chakra UI: справочник по компонентам, свойствам и токенам темы плюс разбор кода при переходе с версии 2 на 3
MCP-сервер ищет иконку coolicons по смыслу и отдает SVG с готовым импортом: агент не выдумывает имена, сборка не падает
MCP-сервер CodeRocket отдает агенту правила дизайн-системы, компоненты и блоки сохраненной библиотеки только на чтение.
ReactUse MCP — справочник React-хуков
ReactUse MCP
MCP-сервер ReactUse: агент находит нужный React-хук и читает его описание, пример и таблицу API прямо из библиотеки
Коротко о README
Текст представляет библиотеку мини-графиков для React: зачем она сделана, установка, первый график, интерактивность и темизация. Отдельный раздел описывает MCP-сервер, а ссылки ведут к документации для ИИ.