how to use

[ZhinanCai]

Hi its a great work!
I Would Like To Ask If There Is A Document Or Tutorial Explaining How To Use It 。The Project Displays An Empty Page When It Is Started。

[wzmroot]

Indeed, I am also not sure how this project works with DB-GPT.

[Luooojunnn]

文档写依赖gpt-vis包，我去npm仓库看了，那个包是空包，这个项目的文档是不是有问题？只有一个markdown的运行展示

[lvisei]

• Installation

$ npm i @antv/gpt-vis --save

• Usage

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

const markdownContent = `
# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.

Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis-chart
{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
\`\`\`
`;

export default () => {
  return <GPTVis>{markdownContent}</GPTVis>;
};

• Custom renderer

import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';

const markdownContent = `
\`\`\`my-ui
my data
\`\`\`

\`\`\`vis-chart
{
  "type": "pie",
  "data": [
    { "category": "category 1", "value": 27 },
    { "category": "category 2", "value": 25 },
    { "category": "category 3", "value": 18 },
    { "category": "other", "value": 5 }
  ]
}
\`\`\`
`;

const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
const components = {
  code: withChartCode({
    languageRenderers: customRenderers, // register custom block renderer
    components: { [ChartType.Pie]: Pie }, // register a pie chart
  }),
};

export default () => {
  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
};

• With streamlit

import streamlit as st
from streamlit_gpt_vis import set_gpt_vis

content = '''
Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis-chart
{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
\`\`\`
'''

set_gpt_vis(content)

[millievn]

data -> markdown -> gpt_vis

that's an example of stage2. how to generate vis-chart md part from llm?
i see the Visual Knowledge Base but not sure how to use with qwen.

[lvisei]

i see the Visual Knowledge Base but not sure how to use with qwen.

Provide visual knowledge base, add visual knowledge to AI Agent, access Agent Flow by RAG

More https://www.yuque.com/antv/blog/1122_8_gpt_vis?singleDoc

[Mrxyy]

I think everyone wants to know how to combine the agent and LLM to form a calling chain. I see several prompt words in the prompts, and I try to combine them to let the LLM return a final result that can be directly displayed, but I feel very vague because many of them seem to have the same function.