@antv/gpt-vis v0.0.5

GPT-Vis

为各种 LLM Agent 提供卡片服务的可视化资产和协议。

⏬ 安装

$ npm install @antv/gpt-vis@0.x --save

🌰 示例

📦 组件中使用

import React from 'react';
import { Pie } from '@antv/gpt-vis';

const data = [
  { name: '分类一', value: 27 },
  { name: '分类二', value: 25 },
  { name: '分类三', value: 18 },
  { name: '分类四', value: 15 },
  { name: '分类五', value: 10 },
  { name: '其他', value: 5 },
];

export default () => {
  return <Pie data={data} />;
};

📝 Markdown 中使用

方式一：使用 GPTVis 组件

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

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

\`\`\`vis-chart
{
  "type": "pie",
  "data": [
    { "name": "分类一", "value": 27 },
    { "name": "分类二", "value": 25 },
    { "name": "分类三", "value": 18 },
    { "name": "分类四", "value": 15 },
    { "name": "分类五", "value": 10 },
    { "name": "其他", "value": 5 }
  ]
}
\`\`\`
`;

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

方式二：扩展 react-markdown 使用

import React from 'react';
import Markdown from 'react-markdown';
import { withDefaultChartCode } from '@antv/gpt-vis';

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

\`\`\`vis-chart
{
  "type": "pie",
  "data": [
    { "name": "分类一", "value": 27 },
    { "name": "分类二", "value": 25 },
    { "name": "分类三", "value": 18 },
    { "name": "分类四", "value": 15 },
    { "name": "分类五", "value": 10 },
    { "name": "其他", "value": 5 }
  ]
}
\`\`\`
`;

const CodeBlock = withDefaultChartCode();

export default () => {
  return (
    <Markdown components={{ code: CodeBlock }}>{markdownContent}</Markdown>
  );
};