Chart MCP App

Live preview

This is the exact card an MCP host renders when it invokes the show-hello-card tool. It ships as a single self-contained HTML resource.

MCP App

v1.0.0

Hello world

Chart card preview

The show-chart-card tool accepts structured column definitions and row data, rendering a TanStack Table (default) or ECharts visualizations (candlestick, line, bar, pie, histogram, heatmap). Compatible with yf-mcp output schemas.

TanStack TableEChartsCandlestickLine / Bar / PieHistogram / HeatmapFilter expressionsSecondary axis

Sample resources: data://chart-card/sample-aapl-ohlcv, data://chart-card/sample-aapl-info, data://chart-card/sample-option-chain

Connect to an agent host

This app is a remote MCP server over Streamable HTTP. Add the endpoint below to any MCP-Apps-capable host, then try:

show-hello-card — original Hello World demo card
show-chart-card — interactive data card with Table (TanStack) and ECharts (candlestick, line, bar, pie, histogram, heatmap)

MCP endpoint (Streamable HTTP)

https://chart-mcp.lizhao.net/api/mcp/mcp

Claude

Settings → Connectors → Add custom connector, paste the endpoint URL. Or via config file:

mcp config

{
  "mcpServers": {
    "hello-world-card": {
      "type": "http",
      "url": "https://chart-mcp.lizhao.net/api/mcp/mcp"
    }
  }
}

Grok

Settings → Connectors (MCP) → Add server, paste the endpoint URL as a remote HTTP server.

See the README.md in this project for the full development and deployment guide.