Skip to Content
📖 Guide Documents📊 Related ProjectsAutoView

1. Preface

Playground

AutoView, turning your blueprint into UI components.

@autoview is a generator that produces TypeScript frontend code from schema information. This schema information can be derived from either TypeScript types or Swagger/OpenAPI documents.

Frontend developers can use @autoview to significantly increase productivity. Simply define TypeScript types, and the frontend code will be generated immediately. You can then refine and enhance this code to complete your application.

For backend developers, simply bring your swagger.json file to @autoview. If your API contains 200 functions, it will automatically generate 200 frontend components. If there are 300 API functions, 300 frontend components will be generated automatically.

2. How to Use

2.1. Playground

https://wrtnlabs.io/autoview 

Visit our homepage to directly experience @autoview.

In the code editor tab (powered by StackBlitz ), navigate to the env.ts file and enter your OpenAI key. Run npm run generate in the terminal to see how @autoview generates TypeScript frontend code from example schemas derived from both TypeScript types and OpenAPI documents.

You can replace the provided schemas with your own to generate customized TypeScript frontend code without installing @autoview locally. This playground approach is recommended for its convenience.

2.2. TypeScript Type

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, 
      { reference: true }
    >(),
  },
});
const result: IAutoViewResult = await agent.generate();
 
await fs.promises.writeFile(
  "./src/transformers/transformMember.ts",
  result.transformTsCode,
  "utf8",
);

To generate frontend code from a TypeScript type, utilize the typia.llm.parameters<Schema>() function.

Create an AutoViewAgent instance with typia.llm.parameters<Schema>() specifying the IMember type, then call the AutoViewAgent.generate() function. The TypeScript code will be generated and available in the IAutoViewResult.transformTsCode property.

After code generation, save it to your desired location for future use. This is how @autoview uses AI to generate TypeScript frontend code from a TypeScript type.

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>,
  { 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",
);

Note that the typia.llm.parameters<Schema>() function only supports static object types without dynamic keys. If you need to generate frontend code for non-object types like Array<IMember>, you must use the typia.llm.schema<Schema>() function instead.

When generating a schema with the typia.llm.schema<Schema>() function, it’s crucial to pre-define and assign a $defs variable of type Record<string, ILlmSchema>.

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 = HttpLlm.application({
  document,
  options: {
    reference: true,
  },
});
const func: IHttpLlmFunction | 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",
);

If you have a swagger.json file, you can mass-produce frontend code components.

Convert the Swagger/OpenAPI document to LLM function calling schemas using the HttpLlm.application() function, and provide one of them to the AutoViewAgent class. This allows you to automatically create frontend components for each API function.

Additionally, you can integrate your backend server with @agentica, an Agentic AI framework specialized in LLM function calling. By obtaining parameter values from @agentica and automating return value viewers with @autoview, you can fully automate frontend application development:

  • Input parameter values via chatbot with @agentica
  • Return value viewers with @autoview

2.4. Frontend Rendering

//----
// 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);

You can render the automatically generated code using the @autoview/ui package.

Import the renderComponent() function from @autoview/ui and render it as a React component as shown above.

3. Principles

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 reads user-defined schemas (TypeScript types or Swagger/OpenAPI operation schemas) and guides AI to write TypeScript frontend code based on these schemas. By the way, is AI-generated frontend code is perfect? The answer is no, AI takes a lot of mistakes and errors writing the TypeScript code.

To guide the AI in writing proper frontend code, @autoview employs multiple validation feedback strategies:

4.1. Compiler Feedback

The first strategy involves providing compilation errors to the AI agent.

@autoview runs tsc command to the AI-generated TypeScript code, and if it fails to compile, it provides the AI with detailed information about the compilation errors. The AI agent can then correct the code based on this feedback.

4.2. Validation Feedback

The second strategy is validation feedback.

@autoview generates random values for the given schema type using the typia.random<T>() function and tests whether the AI-generated TypeScript rendering function produces valid output.

If validation fails, @autoview guides the AI agent to correct the function with detailed tracking information.

4.3. Exception Feedback

The final strategy is exception feedback.

Even if the AI-generated TypeScript code compiles without errors, runtime exceptions may still occur. @autoview tests whether the AI-generated TypeScript function throws error or not by using typia.random<T>() function generated random values.

If exception occurs, @autoview guides the AI agent to correct the function using the exception information.

4. Roadmap

4.1. Screenshot Feedback

Learning from rendering results.

The current version of @autoview implements three feedback strategies: “compiler,” “validation,” and “exception.” In the next update, @autoview will add “screenshot feedback.”

When AI creates a new TypeScript transformer function for a user-defined type, @autoview will request an example value for that type, capture a screenshot of the result, and allow the AI agent to review the screenshot.

Since AI agents excel at analyzing and interpreting images, the next version of @autoview will provide an even more exciting experience.

4.2. Human Feedback

Conversation with users about rendering results.

The current version of @autoview is not a chatbot but a frontend code generator that uses only user-defined type schemas.

In the next update, it will support the AutoViewAgent.conversate() function for chatbot development. In this chatbot, users can guide AI in generating frontend code through conversation. While viewing the rendering result, users can request the AI to modify the frontend code with instructions like:

  • Too narrow. Make it wider
  • I want to enhance the title. Make it larger
  • Too much detail. Make it more concise please.

4.3. Theme System

@autoview supports a theme system, allowing you to replace the default renderer @autoview/ui with custom options.

However, this custom theme feature is not yet documented.

In the next update, comprehensive documentation for custom themes will be provided.

Last updated on
Agent OS