provchart-mcp

MCP-сервер для ProvChart — агенты генерируют чистые CSS-диаграммы (HTML + CSS) или SVG для README/документации.

Без Chart.js. Для отрисовки не требуется клиентский рантайм диаграмм. Тот же JSON, что использует ваша панель управления.

Что он делает

Агенты вызывают их вместо того, чтобы изобретать сниппеты Chart.js.

Related MCP server: ECharts ChartPage MCP Server

Требования

• Node.js 18+ (встроенный fetch)

• API-ключ ProvChart — бесплатные зарегистрированные аккаунты включают ограниченные ежемесячные тестовые генерации

export PROVCHART_API_KEY=pc_live_xxxxxxxx

Никогда не коммитьте реальные ключи. Предпочитайте env / конфигурацию MCP env.

Установка и запуск

Из исходников (этот репозиторий)

cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.js

Процесс говорит по MCP через stdio (остаётся тихим, пока клиент не подключится).

После публикации

npx -y provchart-mcp

Claude Desktop

Отредактируйте claude_desktop_config.json:

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Или с помощью npx (после публикации):

{
  "mcpServers": {
    "provchart": {
      "command": "npx",
      "args": ["-y", "provchart-mcp"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Перезапустите Claude Desktop после сохранения.

Cursor

mcp.json (проектный или глобальный):

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

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

• Используйте provchart_generate для областной диаграммы в теме midnight: Трафик против регистраций, Пн–Вс.

• Сгенерируйте SVG-линейную диаграмму задержки p50/p95 для GitHub README.

• Объясните, как внедрить HTML/CSS ProvChart без библиотеки диаграмм.

Пример аргументов инструмента (provchart_generate)

{
  "type": "area",
  "theme": "midnight",
  "series": [
    { "name": "Traffic", "color": "#4fd8c4", "points": [30, 45, 40, 60, 55, 70, 65] },
    { "name": "Signups", "color": "#f0a860", "points": [8, 12, 11, 18, 16, 22, 20] }
  ],
  "axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}

Вставьте возвращённый CSS в тег <style>, а HTML — в контейнер. Опционально: provchart-runtime для всплывающих подсказок — не требуется для отрисовки.

Переменные окружения

*Или передайте apiKey в аргументах инструмента (предпочтительно через env).

Ошибки

Структура проекта

provchart-mcp/
  package.json
  README.md
  src/
    index.js    # MCP stdio server
    client.js   # ProvChart HTTP helper
    tools.js    # Tool schemas + handlers

Связанные

• ProvChart — продукт и конструктор

• Живое демо — пакетный вызов API для нескольких диаграмм

• Developer API

• provchart-runtime — опциональные улучшения HTML

• st-core.fscss — открытые чистые CSS-основы