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 syntaxconst visSyntax = `vis linedata  - 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 piedata  - category Sales    value 30  - category Marketing    value 25innerRadius 0.6

Themes:

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

vis linedata  - time 2020    value 100  - time 2021    value 120theme dark

Custom Styles:

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

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

Quoted string values (for values with spaces):

vis piedata  - category "Q1 Sales"    value 30  - category "Q2 Sales"    value 25

Hierarchical data:

vis mindmapdata  - 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 bardata  - category Python    value 28.1  - category JavaScript    value 18.5  - category Java    value 15.6  - category "C/C++"    value 12.3title 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 @gpt-vis/gpt-vis

import { GPTVis } from '@/components/ui/gpt-vis';
<GPTVis  content="vis linedata  - time 2020    value 100  - time 2021    value 120  - time 2022    value 150title 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 @gpt-vis/line

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 @gpt-vis/pienpx shadcn@latest add @gpt-vis/barnpx shadcn@latest add @gpt-vis/mindmap# ...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