Datawrapper MCP

🚀 データラッパーMCPサーバー

このモデルコンテキストプロトコル（MCP）サーバーは、AIアシスタントがDatawrapperのチャートを作成することを可能にします。datawrapper Pythonライブラリを基に構築され、Pydanticによるバリデーションが備わっています。

🚀 クイックスタート

APIトークンの取得

1. https://app.datawrapper.de/account/api-tokens にアクセスします。
2. 新しいAPIトークンを作成します。
3. 上記のようにMCP設定に追加します。

インストール

uvxを使用する場合（推奨）

claude_desktop_config.json で uvx を使ってサーバーを起動するようにMCPクライアントを設定します。

{
  "mcpServers": {
    "datawrapper": {
      "command": "uvx",
      "args": ["datawrapper-mcp"],
      "env": {
        "DATAWRAPPER_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

pipを使用する場合

pip install datawrapper-mcp

その後、MCPクライアントを設定します。

{
  "mcpServers": {
    "datawrapper": {
      "command": "datawrapper-mcp",
      "env": {
        "DATAWRAPPER_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

Kubernetesへのデプロイ

エンタープライズ向けのデプロイでは、このサーバーをHTTPトランスポートを使ってKubernetesにデプロイできます。

Dockerイメージのビルド

docker build -t datawrapper-mcp:latest .

Dockerでの実行

docker run -p 8501:8501 \
  -e DATAWRAPPER_ACCESS_TOKEN=your-token-here \
  -e MCP_SERVER_HOST=0.0.0.0 \
  -e MCP_SERVER_PORT=8501 \
  datawrapper-mcp:latest

環境変数

• DATAWRAPPER_ACCESS_TOKEN: あなたのDatawrapper APIトークン（必須）
• MCP_SERVER_HOST: サーバーのホスト（デフォルト: 0.0.0.0）
• MCP_SERVER_PORT: サーバーのポート（デフォルト: 8501）
• MCP_SERVER_NAME: サーバーの名前（デフォルト: datawrapper-mcp）

ヘルスチェックエンドポイント

HTTPサーバーには、Kubernetesの死活監視と準備完了チェック用の /healthz エンドポイントが含まれています。

curl http://localhost:8501/healthz
# 返り値: {"status": "healthy", "service": "datawrapper-mcp"}

Kubernetes設定例

apiVersion: apps/v1
kind: Deployment
metadata:
  name: datawrapper-mcp
spec:
  replicas: 1
  selector:
    matchLabels:
      app: datawrapper-mcp
  template:
    metadata:
      labels:
        app: datawrapper-mcp
    spec:
      containers:
      - name: datawrapper-mcp
        image: datawrapper-mcp:latest
        ports:
        - containerPort: 8501
        env:
        - name: DATAWRAPPER_ACCESS_TOKEN
          valueFrom:
            secretKeyRef:
              name: datawrapper-secrets
              key: access-token
        livenessProbe:
          httpGet:
            path: /healthz
            port: 8501
          initialDelaySeconds: 5
          periodSeconds: 30
        readinessProbe:
          httpGet:
            path: /healthz
            port: 8501
          initialDelaySeconds: 5
          periodSeconds: 10
---
apiVersion: v1
kind: Service
metadata:
  name: datawrapper-mcp
spec:
  selector:
    app: datawrapper-mcp
  ports:
  - protocol: TCP
    port: 8501
    targetPort: 8501

💻 使用例

以下は、アシスタントとのチャットを通じてチャートを作成、公開、更新、表示する完全な例です。

"Create a datawrapper line chart showing temperature trends with this data:
2020, 15.5
2021, 16.0
2022, 16.5
2023, 17.0"
# アシスタントがチャートを作成し、チャートID（例: "abc123"）を返します。

"Publish it."
# アシスタントがチャートを公開し、公開URLを返します。

"Update chart with new data for 2024: 17.2°C"
# アシスタントが新しいデータポイントでチャートを更新します。

"Make the line color dodger blue."
# アシスタントがチャートの設定を更新し、線の色をダージャーブルーに設定します。

"Show me the editor URL."
# アシスタントがチャートを表示/編集できるDatawrapperエディターのURLを返します。

"Show me the PNG."
# アシスタントがチャートのPNG画像をレスポンスに埋め込みます。

"Suggest five ways to improve the chart."
# 何が起こるか見てみましょう！