在大语言模型时代，随之涌现的对话式 Copilot 产品应用如雨后春笋般涌现。然而，很多 AI 助手所提供的反馈大多局限于纯文本形式。为了提升用户体验，希望 Agent 返回的信息能够以更直观的方式展示出来。例如，当用户询问未来一周温度状况时，如果 Agent 以直观的图表形式展示数据，那将极大地提升用户体验。

今天，带来可视化领域的 LUI 解决方案，让你的 Agent 的输出不再局限于文字，而是能够以图表、图像等多种可视化形式呈现，无论是在天气查询、数据分析还是其他需要直观展示的场景中，让 AI 输出的数据以更加生动、直观的方式展现出来，开启人机交互的新篇章。

可视化领域的 LUI

GPT-VIs 为生成式 AI 和 LLM 项目提供组件，但不仅仅是 UI，核心包含以下部分：

组件 + 面向 AI 的卡片协议 + 可视化知识库和图表模型

面向 LLM 的协议

针对 LLM 对话式交互场景，我们为此设计了可视化协议，旨在方便快速地将 AI 应用集成到 LLM 中。

import { GPTVis } from '@antv/gpt-vis';
const content = `
# 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 },
    ...
  ]
}
\`\`\`
`;

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

该协议基于 MD 语法扩展了 AI 卡片输出，以便大模型能够直接输出场景，使模型更易于理解图表配置。我们定义了图表的数据结构，不再使用传统的图形语法，而是采用简单、简洁、易于理解的方式，使数据字段具有语意化特征。此外，协议满足多端的可视化资产的使用。

面向 LLM 可视化组件

基于定制的 AI 卡片协议，实现了面向 LLM 20 + 数据可视化组件，包含统计、关系、地图、NTV。对于定制 UI 需求，提供方便的扩展机制和架构设计。

面向 LLM 的无缝接入

面对简单的场景，我们提供可视化知识库，为 AI Agent 添加可视化知识，通过 RAG 方式接入 Agent flow，不仅让接入成本降低，避免了为此训练模型的繁琐，同时保证了 Agent 输出协议的的准确率保持在了 90% 左右。

针对结构化数据的输入，我们依据过去的经验，升级了图表推荐模型方案。通过收集训练数据集，利用模型基座对大模型进行微调，以训练图表推荐模型，利用可视化图表模型生成适当的图表类型和编码，相较于通用大模型输出，准确率有了显著的提升，根据评测数据集对效果进行衡量，推荐成功率达 90%+。

结语

最后，我们开源这一套面向可视化领域的 LUI 解决方案，包含 20+ 可视化资产，开箱即用。此外，我们还提供了丰富的可视化知识库，包含评测数据集和提示词工程，帮助快速集成这些资产到 AI 应用中。我们还提供了图表推荐模型的训练数据集和评测数据集，以支持评测方法和指标，可以根据自己的业务领域和模型基座对大模型进行微调。我们期待您的反馈和建议，以便我们持续改进和完善。

面对大语言模型时代带来的新交互范式，一起来参与 GPT-Vis 吧！通过丰富多样的视觉元素来增强人机交互过程中的信息传递效率与用户体验，让 AI 输出的数据以更加生动、直观的方式展现出来。

GPT-Vis 更多内容，见 GitHub 开源项目，如果觉得不错，欢迎 Star 鼓励一下！⭐

附录

历史上的 AntV：