Autoview：自动化前端查看器开发

autoview

Autoview 是一个代码生成器，可以将你的 Schema（架构）转换为功能完备的 TypeScript 前端组件。无论你是定义 TypeScript 类型，还是提供 Swagger/OpenAPI 文档，Autoview 都能精准地自动生成相应的 UI 代码。

对于前端开发者而言，这意味着你可以即刻看到设计成型。只需定义好 TypeScript 类型，看着 Autoview 为你生成必要的代码，你便可以对其进行优化并集成到应用中。

后端开发者同样受益——只需提供 swagger.json 文件，剩下的交给 Autoview 即可。无论你的 API 定义了 200 个函数还是 300 个，该工具都能通过生成等量的配套前端组件来轻松扩展，从而简化集成流程并提高工作效率。

核心特性

🤖 自动化查看器生成：利用 LLM Function Calling 自动编排 React 查看器组件。
💻 TypeScript 代码生成：根据你的 Schema 生成可直接编译的 TypeScript 代码，助力快速原型开发。
🔌 Swagger/OpenAPI 集成：使用 Swagger (OpenAPI) 文档，为每一个 API 操作自动生成查看器组件。
✅ LLM Function Calling 与验证：结合 LLM Function Calling 与实时编译器及验证反馈，实现高可靠性。
🚀 提升开发效率：通过直接集成到工作流中的自动化方案，简化繁琐的前端开发任务。

391 392

快速入门

第 1 步：安装

安装 @autoview/agent 及其所需的依赖：

npm install @autoview/agent @autoview/ui openai
npm install -D @samchon/openapi typia
npx typia setup

第 2 步：定义需要展示的 TypeScript 接口

import typia, type { tags } from "typia";

interface IMember {
  id: string & tags.Format;
  name: string;
  age: number & tags.Minimum & tags.Maximum;
  thumbnail: string & tags.Format & tags.ContentMediaType;
}

第 3 步：配置 Autoview Agent

import { AutoViewAgent } from "@autoview/agent";
import fs from "node:fs";
import OpenAI from "openai";

const agent = new AutoViewAgent({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "o3-mini",
    isThinkingEnabled: true,
  },
  input: {
    type: "json-schema",
    unit: typia.json.unit(),
  },
  transformFunctionName: "transformMember",
  experimentalAllInOne: true, // 推荐使用，以获得更快速、更少错误的结果
});

第 4 步：执行生成 🎥

const result = await agent.generate(); // 生成代码

// 保存代码
await fs.promises.writeFile(
  "./src/transformers/transformMember.ts",
  result.transformTsCode,
  "utf8",
);

第 5 步：使用生成的组件

import { renderComponent } from "@autoview/ui";

import { transformMember } from "./transformers/transformMember";

export interface MemberComponentProps {
  member: IMember;
}

export default function MemberComponent(props: MemberComponentProps) {
  return {renderComponent(transformMember(props.member))};
}

常见问题 (FAQ)

问：什么是 AutoView？为什么要创建它？

AutoView 是一个开源库，旨在自动将基于 Schema 的数据转换为 React UI 组件。它的初衷是：在开发 AI Agent 聊天机器人时，如果将结构化的函数调用结果直接以纯文本返回，会导致较差的用户体验。相反，AutoView 会根据数据结构（由 TypeScript 类型或 OpenAPI Schema 定义）动态渲染合适的 UI 组件，从而最小化重复的 UI 开发工作，使 AI 的响应变得更加人性化、友好。

问：AutoView 解决了什么问题？

当 AI 聊天机器人返回结构化的 JSON 数据时，将其显示为纯文本会导致可读性差和用户体验不佳。AutoView 会分析这些数据结构，并自动生成最合适的 React UI 组件。无论是用户个人资料、产品列表还是时间戳，它都能以视觉上更易于消化的格式呈现。即使你有几十个不同的 API 响应，AutoView 也能帮你生成匹配的 UI 组件，而无需一一手动编写，从而极大地提高了开发效率。

问：AutoView 支持哪些类型的 Schema？有什么限制吗？

AutoView 主要支持 TypeScript 接口/类型以及 OpenAPI (Swagger) Schema 作为输入。它使用 typia...

wrtnlabs/autoview