English | 简体中文

GPT-Vis

✨ Features

• 🚀 Framework Agnostic — Works with vanilla JavaScript, React, Vue, Angular, or any framework
• ✍️ Markdown-like Syntax — Simple syntax that LLMs can generate directly, easy to learn and use
• 🌊 Streaming Rendering — Native support for AI model streaming output, renders as it generates
• 🛡️ Fault Tolerant — Gracefully handles incomplete or malformed data, adapts to the uncertainty of AI-generated content
• 📊 26 Chart Types — Statistical charts, relationship graphs, and text visualizations covering mainstream scenarios
• 🎨 Theme System — Built-in light, dark, and academy themes with customizable color palettes

🚀 Quick Start

Installation

npm install @antv/gpt-vis

Basic Usage

import { GPTVis } from '@antv/gpt-vis';

const gptVis = new GPTVis({
  container: 'container',
  width: 600,
  height: 400,
});

// Markdown-like visualization syntax
const visSyntax = `
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
`;

gptVis.render(visSyntax);

Streaming Rendering

Charts render as the AI model generates, no need to wait for the full response:

import { GPTVis, isVisSyntax } from '@antv/gpt-vis';

const gptVis = new GPTVis({ container: 'container', width: 600, height: 400 });
let buffer = '';

function onToken(token) {
  buffer += token;
  if (isVisSyntax(buffer)) {
    gptVis.render(buffer);
  }
}

📚 Syntax Guide

render() supports two input formats: vis syntax (ideal for LLM streaming) and JSON objects (ideal for programmatic use).

Vis Syntax

Declarative markdown-like syntax that LLMs can generate without learning complex APIs:

vis [chart-type]
[property] [value]
data
  - [field] [value]

Pie chart:

vis pie
data
  - category Sales
    value 30
  - category Marketing
    value 25
innerRadius 0.6

Themes:

Three built-in themes, switchable via the theme property:

vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
theme dark

Custom Styles:

Use style to set line width, custom palettes, and more:

vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
style
  lineWidth 3
  palette
    - #5B8FF9
    - #5AD8A6

Quoted string values (for values with spaces):

vis pie
data
  - category "Q1 Sales"
    value 30
  - category "Q2 Sales"
    value 25

Hierarchical data:

vis mindmap
data
  - name Project Plan
    children
      - name Phase 1
      - name Phase 2

JSON Objects

Also supports passing JSON objects directly, ideal for programmatic use:

gptVis.render({
  type: 'pie',
  data: [
    { category: 'Android', value: 72 },
    { category: 'iOS', value: 28 },
  ],
});

📊 Chart Types

26 chart types covering statistical analysis, relationship networks, and text visualization.

Statistical Charts (18)

Relationship Charts (6)

Text Visualization (2)

Explore all examples → Examples Gallery

🔧 Framework Integration

import { GPTVis } from '@antv/gpt-vis';

const gptVis = new GPTVis({ container: 'chart', width: 600, height: 400 });
gptVis.render(visSyntaxString);

import { GPTVis } from '@antv/gpt-vis';
import { useEffect, useRef } from 'react';

function ChartComponent({ visSyntax }) {
  const containerRef = useRef();
  const gptVisRef = useRef();

  useEffect(() => {
    gptVisRef.current = new GPTVis({ container: containerRef.current, width: 600, height: 400 });
    return () => gptVisRef.current?.destroy();
  }, []);

  useEffect(() => {
    if (gptVisRef.current && visSyntax) {
      gptVisRef.current.render(visSyntax);
    }
  }, [visSyntax]);

  return <div ref={containerRef} />;
}

<template>
  <div ref="chartRef"></div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue';
import { GPTVis } from '@antv/gpt-vis';

const props = defineProps(['visSyntax']);
const chartRef = ref(null);
let gptVis = null;

watch(
  () => props.visSyntax,
  (syntax) => {
    if (!gptVis) {
      gptVis = new GPTVis({ container: chartRef.value, width: 600, height: 400 });
    }
    gptVis.render(syntax);
  },
  { immediate: true },
);

onUnmounted(() => gptVis?.destroy());
</script>

npm install @antv/gpt-vis marked marked-highlight highlight.js

import { Marked } from 'marked';
import { markedHighlight } from 'marked-highlight';
import hljs from 'highlight.js';
import { GPTVis } from '@antv/gpt-vis';

class GPTVisElement extends HTMLElement {
  connectedCallback() {
    const syntax = decodeURIComponent(this.dataset.syntax);
    this._instance = new GPTVis({ container: this });
    this._instance.render(syntax);
  }
  disconnectedCallback() {
    this._instance?.destroy();
  }
}
if (!customElements.get('gpt-vis')) {
  customElements.define('gpt-vis', GPTVisElement);
}

const marked = new Marked(
  markedHighlight({
    langPrefix: 'hljs language-',
    highlight(code, lang) {
      if (lang?.startsWith('vis')) return code;
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    },
  }),
  {
    renderer: {
      code({ text, lang }) {
        if (lang?.startsWith('vis')) {
          const syntax = encodeURIComponent(lang + '\n' + text);
          return `<gpt-vis data-syntax="${syntax}" style="min-height:300px"></gpt-vis>`;
        }
        return false;
      },
    },
  },
);

const markdown = `# My Report

\`\`\`vis bar
data
  - category Python
    value 28.1
  - category JavaScript
    value 18.5
  - category Java
    value 15.6
  - category "C/C++"
    value 12.3
title 2024 Programming Language Popularity
\`\`\`
`;

document.getElementById('content').innerHTML = marked.parse(markdown);

🧩 Shadcn/ui

Copy GPT-Vis React components directly into your project via shadcn CLI — full source control, fully customizable.

Base Component

The universal GPTVis component accepts vis syntax strings or config objects for all 26 chart types:

npx shadcn@latest add https://gpt-vis.antv.vision/r/gpt-vis.json

import { GPTVis } from '@/components/ui/gpt-vis';

<GPTVis
  content="vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
title Sales Trend"
  theme="academy"
/>;

Typed Chart Components

Each chart type has its own component with a typed config prop — JSON only, chart-specific TypeScript validation:

npx shadcn@latest add https://gpt-vis.antv.vision/r/line.json

import { Line } from '@/components/ui/line';

<Line
  config={{
    data: [
      { time: '2020', value: 100 },
      { time: '2021', value: 120 },
      { time: '2022', value: 150 },
    ],
    title: 'Sales Trend',
    axisXTitle: 'Year',
  }}
  height={400}
/>;

All 26 chart types are available. Install any by name:

npx shadcn@latest add https://gpt-vis.antv.vision/r/pie.json
npx shadcn@latest add https://gpt-vis.antv.vision/r/bar.json
npx shadcn@latest add https://gpt-vis.antv.vision/r/mindmap.json
# ...and more

Each typed component automatically bundles the base GPTVis component as a dependency. Props like width, height, theme, wrapper, locale, className, and containerStyle are the same across all components.

🤖 AI Ecosystem

GPT-Vis provides a complete AI integration solution:

• MCP Server — Enable AI models to directly invoke visualization capabilities via Model Context Protocol
• Chart Skill — Provide AI assistants with chart recommendation and generation capabilities, supporting both syntax mode and code mode output

🤝 Contributing

AI-Generated Code Policy: This project only merges AI-generated code.

1. Submit an Issue describing the problem or feature request
2. Tag @copilot to generate the implementation
3. Submit a PR with AI-generated code

📄 License

MIT © AntV