设计稿自动转 UI 组件的 AI 工具

@autoview 是一个自动化前端构建工具，使用类型信息生成代码。

@autoview 是一个代码生成器，从 Schema 信息生成 TypeScript 前端组件。这个 Schema 信息可以来自 TypeScript 类型或 Swagger/OpenAPI 文档。

前端开发者可以使用 @autoview 显著提高生产效率。只需定义 TypeScript 类型，前端代码就会立即生成。之后你可以细化和增强这些代码来完成应用。

对于后端开发者，只需将你的 swagger.json 文件导入 @autoview。如果你的 API 包含 200 个函数，它会自动生成 200 个前端组件。如果有 300 个 API 函数，就会自动生成 300 个前端组件。

GitHub 仓库：https://github.com/wrtnlabs/autoview

游乐场主页：https://wrtnlabs.io/autoview

访问我们的主页直接体验 @autoview。

在代码编辑器选项卡（由 StackBlitz 提供），进入 env.ts 文件并输入你的 OpenAI 密钥。在终端中运行 npm run generate，查看 @autoview 如何从 TypeScript 类型和 OpenAPI 文档派生的示例 Schema 生成 TypeScript 前端代码。

你可以用自己的 Schema 替换提供的 Schema，在不本地安装 @autoview 的情况下生成定制化的 TypeScript 前端代码。推荐使用这种游乐场方法，因为它更便捷。

import { AutoViewAgent } from "@autoview/agent";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";

interface IMember {
  id: string & tags.Format<"uuid">;
  name: string;
  age: number & tags.Minimum<0> & tags.Maximum<100>;
  thumbnail: string & tags.Format<"uri"> & tags.ContentMediaType;
}

const agent: AutoViewAgent = new AutoViewAgent({
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "o3-mini",
  },
  inputSchema: {
    parameters: typia.llm.parameters<
      IMember, 
      "chatgpt", 
      { reference: true }
    >(),
  },
});
const result: IAutoViewResult = await agent.generate();

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

要从 TypeScript 类型生成前端代码，可以使用 typia.llm.parameters<Schema, Model, Config>() 函数。

使用 typia.llm.parameters<Schema, Model>() 创建 AutoViewAgent 实例，指定 IMember 类型，然后调用 AutoViewAgent.generate() 函数。TypeScript 代码将生成并在 IAutoViewResult.transformTsCode 属性中可用。

代码生成后，将其保存到你想要的位置以供将来使用。这就是 @autoview 使用 AI 从 TypeScript 类型生成 TypeScript 前端代码的方式。

import { AutoViewAgent } from "@autoview/agent";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";

interface IMember {
  id: string & tags.Format<"uuid">;
  name: string;
  age: number & tags.Minimum<0> & tags.Maximum<100>;
  thumbnail: string & tags.Format<"uri"> & tags.ContentMediaType;
}

// LLM SCHEMA GENERATION
const $defs: Record<string, IChatGptSchema> = {};
const schema: IChatGptSchema = typia.llm.schema<
  Array<IMember>,
  "chatgpt",
  { reference: true }
>({ $defs });

// CODE GENERATION
const agent: AutoViewAgent = new AutoViewAgent({
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "o3-mini",
  },
  inputSchema: {
    $defs,
    schema,
  },
  transformFunctionName: "transformMember",
});
const result: IAutoViewResult = await agent.execute();

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

请注意，typia.llm.parameters<Schema, Model, Config>() 函数仅支持没有动态键的静态对象类型。如果需要为 Array<IMember> 这样的非对象类型生成前端代码，必须改用 typia.llm.schema<Schema, Model, Config>() 函数。

使用 typia.llm.schema<Schema, Model, Config>() 函数生成 Schema 时，必须预先定义并分配 Record<string, IChatGptSchema> 类型的 $defs 变量。

2.3. Swagger/OpenAPI 文档

import { AutoViewAgent } from "@autoview/agent";
import { OpenApi } from "@samchon/openapi";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";

const app: IHttpLlmApplication<"chatgpt"> = HttpLlm.application({
  model: "chatgpt",
  document,
  options: {
    reference: true,
  },
});
const func: IHttpLlmFunction<"chatgpt"> | undefined = app.functions.find(
  (func) =>
    func.path === "/shoppings/customers/sales/{id}" && 
    func.method === "get",
);
if (func === undefined) throw new Error("Function not found");
else if (func.output === undefined) throw new Error("No return type");

const agent: AutoViewAgent = new AutoViewAgent({
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "o3-mini",
  },
  inputSchema: {
    $defs: func.parameters.$defs,
    schema: func.output!,
  },
  transformFunctionName: "transformSale",
});
const result: IAutoViewResult = await agent.generate();

await fs.promises.writeFile(
  "./src/transformers/transformSale.ts",
  result.typescript,
  "utf8",
);

如果你有 swagger.json 文件，可以大量生成前端代码组件。

使用 HttpLlm.application() 函数将 Swagger/OpenAPI 文档转换为 LLM 函数调用 Schema，并将其中一个提供给 AutoViewAgent 类。这样可以为每个 API 函数自动创建前端组件。

此外，你还可以将后端服务器与 @agentica 集成，这是一个专门用于 LLM 函数调用的智能 AI 框架。通过从 @agentica 获取参数值并使用 @autoview 自动化返回值查看器，你可以完全自动化前端应用开发：

• 通过 @agentica 的聊天机器人输入参数值
• 通过 @autoview 显示返回值

2.4. 前端渲染

//----
// GENERATED CODE
//----
// src/transformSale.ts
import { IAutoViewComponentProps } from "@autoview/interface";

export function transformSale(sale: IShoppingSale): IAutoViewComponentProps;

//----
// RENDERING CODE
//----
// src/SaleView.tsx
import { IAutoViewComponentProps } from "@autoview/interface";
import { renderComponent } from "@autoview/ui";

import { transformSale } from "./transformSale";

export const SaleView = (props: {
  sale: IShoppingSale
}) => {
  const comp: IAutoViewComponentProps = transformSale(sale);
  return <div>
    {renderComponent(comp)}
  </div>;
};
export default SaleView;

//----
// MAIN APPLICATION
//----
// src/main.tsx
import ReactDOM from "react-dom";

import SaleView from "./SaleView";

const sale: IShoppingSale = { ... };
ReactDOM.render(<SaleView sale={sale} />, document.body);

你可以使用 @autoview/ui 包渲染自动生成的代码。

从 @autoview/ui 导入 renderComponent() 函数，并如上所示将其呈现为 React 组件。

import { FunctionCall } from "pseudo";
import { IValidation } from "typia";

export const correctCompile = <T>(ctx: {
  call: FunctionCall;
  compile: (src: string) => Promise<IValidation<(v: T) => IAutoViewComponentProps>>;
  random: () => T;
  repeat: number;
  retry: (reason: string, errors?: IValidation.IError[]) => Promise<unknown>;
}): Promise<(v: T) => IAutoViewComponentProps>> => {
  // FIND FUNCTION
  if (ctx.call.name !== "render")
    return ctx.retry("Unable to find function. Try it again");

  //----
  // COMPILER FEEDBACK
  //----
  const result: IValidation<(v: T) => IAutoViewComponentProps>> = 
    await ctx.compile(call.arguments.source);
  if (result.success === false)
    return ctx.retry("Correct compilation errors", result.errors);

  //----
  // VALIDATION FEEDBACK
  //----
  for (let i: number = 0; i < ctx.repeat; ++i) {
    const value: T = ctx.random(); // random value generation
    try {
      const props: IAutoViewComponentProps = result.data(value);
      const validation: IValidation<IAutoViewComponentProps> = 
        func.validate(props); //validate AI generated function
      if (validation.success === false)
        return ctx.retry(
          "Type errors are detected. Correct it through validation errors",
          {
            errors: validation.errors,
          },
        );
    } catch (error) {
      //----
      // EXCEPTION FEEDBACK
      //----
      return ctx.retry(
        "Runtime error occurred. Correct by the error message",
        {
          errors: [
            {
              path: "$input",
              name: error.name,
              reason: error.message,
              stack: error.stack,
            }
          ]
        }
      )
    }
  }
  return result.data;
}

@autoview 读取用户定义的 Schema（TypeScript 类型或 Swagger/OpenAPI Schema），并引导 AI 基于这些 Schema 编写 TypeScript 前端代码。

但是，AI 生成的前端代码并不完美。为了指导 AI 编写正确的前端代码，@autoview 采用了多个验证反馈策略：

第一个策略是向 AI agent 提供编译错误。AI 从编译器反馈中学习，在后续尝试中生成正确的 TypeScript 代码。

第二个策略是验证反馈。@autoview 使用 typia.random<T>() 函数为给定的 Schema 类型生成随机值，并测试 AI 生成的 TypeScript 渲染函数是否生成有效的输出。如果验证失败，@autoview 会引导 AI agent 根据详细的跟踪信息纠正该函数。

最后一个策略是异常反馈。即使 AI 生成的 TypeScript 代码编译无错误，仍可能发生运行时异常。在这种情况下，@autoview 会使用异常信息引导 AI agent 纠正该函数。

4.1. 截图反馈

从渲染结果中学习。

当前版本的 @autoview 实现了三个反馈策略："编译器"、"验证" 和 "异常"。在下一次更新中，@autoview 将添加 "截图反馈"。

当 AI 为用户定义的类型创建新的 TypeScript 转换器函数时，@autoview 将请求该类型的示例值，捕获结果的截图，并允许 AI agent 查看截图。

由于 AI agent 擅长分析和解释图像，下一版本的 @autoview 将提供更令人兴奋的体验。

与用户就渲染结果进行对话。

当前版本的 @autoview 不是聊天机器人，而是只使用用户定义类型 Schema 的前端代码生成器。

在下一次更新中，它将支持 AutoViewAgent.conversate() 函数进行聊天机器人开发。在这个聊天机器人中，用户可以通过对话引导 AI 生成前端代码。在查看渲染结果时，用户可以用如下指令请求 AI 修改前端代码：

太窄了。加宽一点

我想增强标题。放大一点

细节太多了。请更加简洁。

@autoview 支持主题系统，允许你用自定义选项替换默认渲染器 @autoview/ui。

但是，这个自定义主题功能还没有被文档化。

在下一次更新中，将提供自定义主题的全面文档。

@agentica 是一个专门用于 LLM 函数调用的智能 AI 框架。

当你向 @agentica 提供 TypeScript 类时，其类函数在 AI 聊天机器人中被正确调用。如果你提供 Swagger/OpenAPI 文档，它就成为与后端 API 函数交互的聊天机器人。

通过结合 @agentica 和 @autoview，你可以体验一个转变的开发工作流。用 @agentica 驱动的 AI 聊天机器人替换参数输入组件，用 @autoview 自动化返回值查看器。这代表了基于 AI 的前端自动化最有前景的方法之一：

• 通过 @agentica 的聊天机器人输入参数值
• 通过 @autoview 显示返回值

以下是一个示例代码片段和演示视频。这些示例说明了智能 AI 在未来的潜力。

import { Agentica } from "@agentica/agent";
import { HttpLlm, OpenApi } from "@samchon/openapi";
import typia from "typia";

const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: "*****" }),
    model: "gpt-4o-mini",
  },
  controllers: [
    {
      protocol: "http",
      name: "shopping",
      application: HttpLlm.application({
        model: "chatgpt",
        document: await fetch(
          "https://shopping-be.wrtn.ai/editor/swagger.json",
        ).then((r) => r.json()),
      }),
      connection: {
        host: "https://shopping-be.wrtn.ai",
        headers: {
          Authorization: "Bearer *****",
        },
      },
    },
    {
      protocol: "class",
      name: "counselor",
      application: typia.llm.application<ShoppingCounselor, "chatgpt">(),
      execute: new ShoppingCounselor(),
    },
    {
      protocol: "class",
      name: "policy",
      application: typia.llm.application<ShoppingPolicy, "chatgpt">(),
      execute: new ShoppingPolicy(),
    },
    {
      protocol: "class",
      name: "rag",
      application: typia.llm.application<ShoppingSearchRag, "chatgpt">(),
      execute: new ShoppingSearchRag(),
    },
  ],
});
await agent.conversate("I want to buy a MacBook Pro");

对于进一步的行动，你可以考虑阻止这个人和/或举报滥用。