Ganapati V S (автор библиотеки microcharts) · сообщество
Агент подбирает маленький график под вопрос о данных и рисует его в SVG с готовой подписью для экранных чтецов: линия выручки в строке отчёта, полоска плана в письме
На твоём компьютере·Без ключа·Бесплатно·3 инструмента·проверено 17.10.2026 на версии 0.1.17
Агент подбирает вид графика по вопросу о данных. На вопрос «is it trending?» сервер предложил пять видов, первым линию тренда, а на «progress toward a target» среди прочих вернул термометр для сбора денег и плана.
Готовый график приходит в SVG размером с пару слов, например 80 на 20 точек. Для ряда выручки от 1 250 000 до 2 050 000 с русскими настройками сервер подписал последнюю точку «2 050 000». Два текстовых вида, delta и token-confidence, приходят кусочком HTML без размеров.
К каждому графику приходит фраза для экранных чтецов, её сервер берёт из самой картинки. Слова в ней английские, числа по выбранному языку. Если передать свою фразу по-русски, сервер отдаст её без изменений.
Для сайта на React сервер подсказывает строку импорта, нужные свойства и пример с данными. В каталоге 106 видов графиков: на прогоне мы нарисовали все по примерам сервера, ошибок не было.
Графики считаются на твоём компьютере: установленный пакет за 106 отрисовок не открыл ни одного соединения.
Кто сделал
Ganapati V S (автор библиотеки microcharts), сообщество
Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.
Промпт для агента
Подключи MCP-сервер «Microcharts» версии 0.1.17. Работай по шагам и после каждого коротко говори, что сделал.
Данные сервера (каталог smyslokod.ru, проверено 17.10.2026):
- имя в конфиге: microcharts
- официальный источник: https://github.com/ganapativs/microcharts/tree/main/packages/mcp
- запуск: npx -y @microcharts/mcp@0.1.17
Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.
Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 20 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get microcharts` (в Codex: `codex mcp list`).
3. Подключи сервер:
Claude Code: claude mcp add --scope user --transport stdio microcharts -- npx -y @microcharts/mcp@0.1.17
Codex: codex mcp add microcharts -- npx -y @microcharts/mcp@0.1.17
Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 3 инструмента, перечисли их. Сделай пробный запрос: «Через microcharts нарисуй маленькую линию тренда для чисел 12, 15, 14, 18, 17, 21, 24 и пришли фразу, которую услышит экранный чтец». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove microcharts --scope user` (в Codex: `codex mcp remove microcharts`).
Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://smyslokod.ru/mcp/microcharts#problemy
Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.
Что нужно на компьютере: Node.js 20 или новее.
Ключ: не нужен.
Ключ и регистрация не нужны. Команда подключения: claude mcp add --scope user microcharts -- npx -y @microcharts/mcp@0.1.17. При первом запуске npx скачивает пакет из реестра npm. В песочнице пакет вместе с зависимостями занял на диске около 37 МБ. Нужен Node.js 20 или новее, мы запускали на 22.23.3. Библиотеку графиков пакет подтягивает по диапазону версий, поэтому автор советует закреплять именно версию сервера. Описания инструментов занимают около 1,5 тысячи токенов. Во всех схемах инструментов указан стандарт JSON Schema draft-07: такая же пометка ломает сервер Filesystem в Claude Desktop, поэтому там этот сервер тоже может не заработать. В Claude Desktop мы его не проверяли, в Claude Code он подключился.
Проверь, что работает
Пробный запрос
Через microcharts нарисуй маленькую линию тренда для чисел 12, 15, 14, 18, 17, 21, 24 и пришли фразу, которую услышит экранный чтец
Что должно получиться: Промпт просит агента вызвать render_microchart с видом sparkline. Когда мы вызывали его напрямую через mcp-probe, пришёл SVG 80 на 20 точек и фраза «Trending up 100%. Range 12 to 24. Last value 24.» Как ответит сам агент Claude Code, мы не проверяли. Если вызова microcharts нет, посмотри командой /mcp, подключён ли сервер.
Что можно сделать
3 сценария
Линия выручки рядом с цифрой в отчёте
render_microchart с locale ru-RU и подписью последней точки вернул SVG 80 на 28 точек с подписью «2 050 000» и фразу «Выручка по неделям. Trending up 64%. Range 1 250 000 to 2 050 000. Last value 2 050 000.» за 102 мс. Чтобы файл открылся как картинка, в нём надо экранировать "<number>", об этом в проблемах.
Ряд чисел агент передаёт в data, а подписи и язык чисел задаёт в props.
Слова фразы сервер пишет по-английски, своя фраза передаётся в summary.
Промпт
Через microcharts нарисуй маленькую линию тренда по выручке за шесть недель: 1250000, 1410000, 1380000, 1720000, 1690000, 2050000. Числа подпиши по-русски, название графика «Выручка по неделям», подпиши последнюю точку. Пришли код SVG и фразу для экранных чтецов.
Бесплатно: почта или сразу Телеграм-канал клуба
Совет. Если нужна русская фраза целиком, попроси агента передать её в summary: на прогоне сервер поставил «Продажи растут: с 12 до 24 за семь недель» без изменений.
Полоска плана для письма команде
Пусть агент задаёт серверу вопрос по-английски, например «progress toward a target». На такой вопрос find_microchart предложил шесть видов, среди них thermometer для плана и сбора денег. Отрисовку мы проверили на виде bullet: со значением 72 и целью 80 он дал полоску 80 на 16 точек и фразу «План месяца. 72 of 80 target.» Какой вид выберет агент сам, мы не смотрели.
get_microchart bullet показывает, какие свойства нужны: значение, цель и полосы.
Промпт
Через microcharts покажи, как мы идём к плану месяца: сделано 72 из 80. Подбери подходящий вид графика, нарисуй его с названием «План месяца» и объясни, почему выбрал именно его.
Бесплатно: почта или сразу Телеграм-канал клуба
Подобрать вид графика под вопрос о данных
На вопрос «conversion funnel» сервер вернул два вида. У funnel пояснение «per-campaign funnels in tables», то есть воронка по каждой кампании в таблице, у rate-volume пояснение «a conversion / error rate with its denominator», доля конверсии вместе с числом, от которого она считается. Строку импорта и вид данных для каждого отдаёт get_microchart. Свод для человека составляет агент, и этот шаг мы не запускали.
find_microchart ищет по-английски, при надобности агент переводит вопрос сам.
get_microchart даёт строку импорта, пример кода и образец данных.
Промпт
Через microcharts подбери три вида маленьких графиков для воронки продаж по рекламным кампаниям. Для каждого скажи, какие данные ему нужны и как его подключить на сайт на React.
Бесплатно: почта или сразу Телеграм-канал клуба
Пример работы
редакция, прогон при проверке 17.10.2026
Задача
Линия выручки по неделям для отчёта
Промпт
Через microcharts нарисуй линию выручки за шесть недель с русскими числами и подписью последней точки
Что сделал агент
find_microchart на «is it trending?» первым предложил sparkline с пометкой «inline trend».
get_microchart sparkline вернул строку импорта, свойства и образец данных.
render_microchart с locale ru-RU за 102 мс нарисовал линию 80 на 28 точек с подписью «2 050 000» и фразой для экранных чтецов.
Файл SVG как есть Chromium открыть не смог. После замены "<number>" на "<number>" он показал тонкую линию с подписью.
Результат
Через npx сервер отработал 16 вызовов всех трёх инструментов, три ошибки из них ожидаемые. Наш клиент на SDK из установленного пакета нарисовал все 106 графиков каталога без ошибок и без единого соединения. Инструменты вызывали mcp-probe и наш клиент, агент Claude Code промпт не выполнял.
Инструменты
3 · описания около 1,5 тыс. токенов
Жёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.
Когда не нужен
Если нужен обычный большой график с осями, подписями и легендой для презентации или отчёта, этот сервер не подходит: он рисует только маленькие значки размером со строку текста, без наведения мышью и без картинок PNG. Если сайт на React и библиотека @microcharts/react уже стоит в проекте, агенту хватит её документации, а сервер добавит разве что подбор вида графика.
Частые проблемы
7
Сохранённый файл .svg не открывается, браузер пишет об ошибке разбора, а тег img показывает значок битой картинки
В стилях внутри SVG стоит строка "<number>" с неэкранированными угловыми скобками. Такой файл не проходит разбор как XML: на прогоне его не открыли ни Chromium, ни rsvg-convert. Эта строка была в 108 из 109 полученных нами SVG, нет её только в варианте bare. Попроси агента заменить в ответе все вхождения "<number>" на "<number>". В наших 108 ответах их было по два. После замены на прогоне Chromium показал график и в теге img, и прямо в странице. Для своего сайта на React проще вариант bare и подключённые стили библиотеки, как советует автор.
График, вставленный прямо в код страницы, выглядит залитым чёрным пятном, линии не видно
Та же строка ломает встроенные стили: браузер их отбрасывает и рисует линию с заливкой по умолчанию, так было на прогоне в Chromium со стандартным ответом сервера. Помогает та же замена "<number>" на "<number>": после неё на прогоне линия стала тонкой, а подпись числа осталась на месте.
Подбор графика по вопросу на русском ничего не находит
find_microchart сравнивает вопрос с английскими описаниями видов. На «растут ли продажи» он вернул пустой список, на «is it trending?» нашёл пять видов. Попроси агента задавать серверу вопрос по-английски, а подписи и числа на самом графике при этом оставлять русскими.
Агент не видит инструментов сервера
Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.
«spawn npx ENOENT» при запуске
Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.
«Unsupported engine» или падение при старте
Старая версия Node.js. Нужна 20 или новее, проверить: node --version.
Codex: сервер не успевает запуститься
Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.
Только то, что агент передаёт в вызов: вопрос о данных, вид графика, ряд чисел и подписи. Если туда попадут выручка или данные клиентов, сервер их увидит, но они к этому времени уже есть у модели агента, у Claude Code это Anthropic. Файлы проекта и разговор сервер не читает, свои ответы он собирает из каталога внутри пакета. Сам он ничего никуда не отправляет: установленный пакет за 106 отрисовок не открыл ни одного соединения. При запуске через npx идёт обращение к реестру npm.
Куда уходят данные
Данные остаются на компьютере.
Что может изменить
Сам сервер ничего не меняет: все три инструмента только возвращают текст, SVG или кусочек HTML, файлов на диск он не пишет. После прогонов новых файлов, кроме кэша npm, не появилось. Ещё в пакете есть ресурс с промптом установки. Если агент сам его прочтёт, там написано поставить библиотеку @microcharts/react, при надобности создать приложение на React, дописать правила в AGENTS.md и связать его с CLAUDE.md, «don't stop to ask». Это меняет проект, поэтому такой промпт давай агенту только в проекте, где ты на это согласен.
Наша проверка
Пакет @microcharts/mcp выпускает автор библиотеки microcharts Ganapati V S. Код лежит в папке packages/mcp репозитория ganapativs/microcharts под лицензией MIT, на пакет ссылается сайт библиотеки, в официальном реестре MCP он записан как io.github.ganapativs/microcharts. В npm у пакета один сопровождающий, версию 0.1.17 выложил GitHub Actions с подтверждением происхождения. Установочных скриптов в package.json нет. В коде нет запуска программ, сетевых запросов, записи файлов и отключения проверки TLS. Инструкция сервера только объясняет порядок трёх инструментов, скрытых указаний в ней и в описаниях нет. Автор не пометил инструменты как только читающие, поэтому метку read мы поставили сами, по коду и ответам. В одноразовой песочнице Ubuntu 24.04.5 на Node.js 22.23.3 было 16 вызовов всех трёх инструментов через npx, три ошибки из них ожидаемые, а наш клиент на SDK из установленного пакета прочитал оба ресурса и нарисовал все 106 графиков каталога. OSV по 97 пакетам дерева зависимостей записей не нашёл, npm audit показал ноль уязвимостей. Версия в команде закреплена.
Версия
В командах закреплена версия 0.1.17: ставится ровно то, что мы проверили.
Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.
Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.
