README

GPT-Vis, Visualization for AI Friendly!

AI-Native Visualization Components for the LLM Era. Framework-agnostic visualization library designed for AI-powered applications.

📖 Documentation • 🤖 Chart Skill • 🧠 Knowledge Base • 🎮 Try Demo • 🔌 MCP Server

📢 Version 1.0 Preview: Reimagined architecture optimized for AI. Stable release expected March 21, 2026.

✨ Features

🚀 Framework Agnostic: Works with vanilla JavaScript, React, Vue, Angular, or any framework
✍️ Natural Syntax: Simple, markdown-like syntax that LLMs can generate effortlessly
🌊 Streaming Support: Built-in support for streaming output from AI models
🛡️ Fault Tolerant: Gracefully handles incomplete or malformed data
📊 20+ Chart Types: Statistical, relationship, and advanced visualization charts
🧠 Intelligent Defaults: Automatic data detection, smart color schemes, adaptive layouts

🚀 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,
});

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

gptVis.render(visSyntax);

Streaming Support

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

Basic Structure

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

Examples

Simple chart:

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

With style:

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

Hierarchical data:

vis mind-map
data
  - name Project
    children
      - name Phase 1
      - name Phase 2

🔧 Framework Integration

Vanilla JavaScript

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

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

React

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} />;
}

Vue

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

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

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

onMounted(() => {
  gptVis = new GPTVis({ container: chartRef.value, width: 600, height: 400 });
  gptVis.render(props.visSyntax);
});

watch(
  () => props.visSyntax,
  (newSyntax) => {
    if (gptVis) {
      gptVis.render(newSyntax);
    }
  },
);

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

🧠 Knowledge Base

GPT-Vis includes a comprehensive knowledge base to help LLMs understand when to use each chart type and how to structure data. Evaluated on 200+ scenarios with 90%+ accuracy.