Backend Developers, Automate Frontend Development. Much better than Vibe Coding.

1. Preface These days, Vibe Coding is a popular topic. However, whenever I read about Vibe Coding, I often think: Isn't backend-based frontend automation much more practical than Vibe Coding? Looking at what backend developers do, they constantly analyze requirements to design APIs, and they always create documentation with examples and guides to explain and help frontend developers understand the APIs they've designed. What backend developers routinely do isn't much different from the prompting strategies mentioned in Vibe Coding. In fact, with decades of know-how, they've established much more systematic and robust methodologies. So isn't backend-driven frontend development automation much more practical than Vibe Coding? Based on this philosophy, we're creating an open-source framework to realize Agentic AI. Rather than pursuing complete automation like vibe coding, we aim for semi-automation based on backend API specifications. Today, we're ready to share two open-source projects with you. The first is Agentica, a function calling specialized framework that lets you create AI agents just by listing functions. The second is AutoView, which automatically generates frontend code through API specifications and type schemas. Open Source Projects for Agentic AI Agentica: https://github.com/wrtnlabs/agentica AutoView: https://github.com/wrtnlabs/autoview 2. Agentica Github Repository: https://github.com/wrtnlabs/agentica Guide Documents: https://wrtnlabs.io/agentica AI agent by swagger.json file. The simplest way for backend developers to create applications without frontend development is to build an AI chatbot. You don't need any knowledge about AI. Just take your swagger.json file and feed it into Agentica. The AI chatbot will start immediately. AI agents created with Agentica will automatically call appropriate backend API functions and operate appropriately in the domain that the backend server was designed for. In addition to swagger.json, functions can be supplied from other protocols, and Agentica utilizes the following 4 strategies to implement the world's easiest and safest function calling: Protocols for serving functions TypeScript Class Swagger/OpenAPI Document MCP (Model Context Protocol) Server Strategies reaching to Agentic AI Compiler Driven Development: constructs function calling schema automatically by compiler skills without hand-writing JSON Schema Conversion: automatically handles specification differences between LLM vendors, ensuring seamless integration regardless of your chosen AI model. Validation Feedback: detects and corrects AI mistakes in argument composition, dramatically reducing errors and improving reliability Selector Agent: filtering candidate functions to minimize context usage, optimize performance, and reduce token consumption. Agentica automatically transforms swagger.json file specifications to fit the target AI vendor You don't need complicated development like the agent workflows commonly mentioned in typical AI agent development. You don't need difficult and complex prompting strategies either. Just provide your TypeScript classes or swagger.json files. And as backend developers always do, document each function and schema. Your routine API specification definition and documentation are more powerful and safer than any agent workflow or prompting strategy. Below is the code and demo video of a shopping mall agent I created. All I did was bring in the shopping mall's swagger.json, and it works very well. A shopping mall backend with a total of 289 API functions—an enterprise-grade e-commerce agent that no AI expert or big tech company has been able to create—was built in just 5 minutes by simply connecting to the backend server. Backend developers, you can do this too. You are more qualified as AI developers than anyone else. Don't underestimate yourselves. Invest just 5 minutes to talk to your backend server. And reconsider your own value. Shopping mall backend project: https://github.com/samchon/shopping-backend Shopping mall swagger.json file: https://shopping-be.wrtn.ai/editor/swagger.json Shopping mall AI agent demo: https://wrtnlabs.io/agentica/playground/shopping Swagger Playground: https://wrtnlabs.io/agentica/playground/uploader import { Agentica, assertHttpLlmApplication } from "@agentica/core"; import OpenAI from "openai"; import typia from "typia"; import { MobileFileSystem } from "./services/MobileFileSystem"; const agent = new Agentica({ vendor: { api: new OpenAI({ apiKey: "********" }), model: "gpt-4o-mini", }, controllers: [ // functions from TypeScript class { protocol: "http", application: typia.llm.application(), execute: new MobileFileSystem(), }, // functions from Swagger/OpenAPI { protocol: "http", application: assertHttpLlmApplication({ model: "chatgpt", document:

Apr 25, 2025 - 10:40

Backend Developers, Automate Frontend Development. Much better than Vibe Coding.

1. Preface

These days, Vibe Coding is a popular topic. However, whenever I read about Vibe Coding, I often think:

Isn't backend-based frontend automation much more practical than Vibe Coding?

Looking at what backend developers do, they constantly analyze requirements to design APIs, and they always create documentation with examples and guides to explain and help frontend developers understand the APIs they've designed.

What backend developers routinely do isn't much different from the prompting strategies mentioned in Vibe Coding. In fact, with decades of know-how, they've established much more systematic and robust methodologies. So isn't backend-driven frontend development automation much more practical than Vibe Coding?

Based on this philosophy, we're creating an open-source framework to realize Agentic AI. Rather than pursuing complete automation like vibe coding, we aim for semi-automation based on backend API specifications.

Today, we're ready to share two open-source projects with you.

The first is Agentica, a function calling specialized framework that lets you create AI agents just by listing functions. The second is AutoView, which automatically generates frontend code through API specifications and type schemas.

Open Source Projects for Agentic AI

Agentica: https://github.com/wrtnlabs/agentica
AutoView: https://github.com/wrtnlabs/autoview

2. Agentica

Github Repository: https://github.com/wrtnlabs/agentica
Guide Documents: https://wrtnlabs.io/agentica

AI agent by swagger.json file.

The simplest way for backend developers to create applications without frontend development is to build an AI chatbot. You don't need any knowledge about AI. Just take your swagger.json file and feed it into Agentica. The AI chatbot will start immediately.

AI agents created with Agentica will automatically call appropriate backend API functions and operate appropriately in the domain that the backend server was designed for. In addition to swagger.json, functions can be supplied from other protocols, and Agentica utilizes the following 4 strategies to implement the world's easiest and safest function calling:

Protocols for serving functions
Strategies reaching to Agentic AI
- Compiler Driven Development: constructs function calling schema automatically by compiler skills without hand-writing
- JSON Schema Conversion: automatically handles specification differences between LLM vendors, ensuring seamless integration regardless of your chosen AI model.
- Validation Feedback: detects and corrects AI mistakes in argument composition, dramatically reducing errors and improving reliability
- Selector Agent: filtering candidate functions to minimize context usage, optimize performance, and reduce token consumption.

Agentica automatically transforms swagger.json file specifications to fit the target AI vendor

You don't need complicated development like the agent workflows commonly mentioned in typical AI agent development. You don't need difficult and complex prompting strategies either. Just provide your TypeScript classes or swagger.json files. And as backend developers always do, document each function and schema.

Your routine API specification definition and documentation are more powerful and safer than any agent workflow or prompting strategy.

Below is the code and demo video of a shopping mall agent I created. All I did was bring in the shopping mall's swagger.json, and it works very well. A shopping mall backend with a total of 289 API functions—an enterprise-grade e-commerce agent that no AI expert or big tech company has been able to create—was built in just 5 minutes by simply connecting to the backend server.

Backend developers, you can do this too. You are more qualified as AI developers than anyone else. Don't underestimate yourselves. Invest just 5 minutes to talk to your backend server. And reconsider your own value.

Shopping mall backend project: https://github.com/samchon/shopping-backend
Shopping mall swagger.json file: https://shopping-be.wrtn.ai/editor/swagger.json
Shopping mall AI agent demo: https://wrtnlabs.io/agentica/playground/shopping
Swagger Playground: https://wrtnlabs.io/agentica/playground/uploader

import { Agentica, assertHttpLlmApplication } from "@agentica/core";
import OpenAI from "openai";
import typia from "typia";

import { MobileFileSystem } from "./services/MobileFileSystem";

const agent = new Agentica({
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "gpt-4o-mini",
  },
  controllers: [
    // functions from TypeScript class
    {
      protocol: "http",
      application: typia.llm.application<MobileFileSystem, "chatgpt">(),
      execute: new MobileFileSystem(),
    },
    // functions from Swagger/OpenAPI
    {
      protocol: "http",
      application: assertHttpLlmApplication({
        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 ********" },
      },
    },
  ],
});
await agent.conversate("I wanna buy MacBook Pro");

3. AutoView

Github Repository: https://github.com/wrtnlabs/autoview
Guide Documents: https://wrtnlabs.io/autoview

AutoView is an open-source project that creates React frontend code by reading type schema information. You can either use TypeScript types directly to automatically generate frontend code, or read type information from a swagger.json file.

If your backend server has 100 functions? Then it automatically creates 100 UI component codes. You've developed 200 functions on your backend server? Then it will automatically write 200 pieces of code.

If your application cannot be satisfied with an AI chatbot, automatically generate frontend code in bulk based on your swagger.json specification. It's more economical than starting from scratch.

AutoView internally includes a typer that creates TypeScript types from various kinds of schemas including JSON schema, an embedded TypeScript compiler to verify that AI-generated code works properly and to provide feedback to AI, and a theme system for UI customization.

Backend developers, automate the frontend pages for your APIs with AutoView.

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

// 1. Define your own TypeScript interface to display
interface IMember {
  id: string & tags.Format<"uuid">;
  name: string;
  age: number & tags.Minimum<0> & tags.Maximum<100>;
  thumbnail: string & tags.Format<"uri"> & tags.ContentMediaType;
}

// 2. Setup the AutoView agent
const agent = new AutoViewAgent({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: "********" }),
    model: "o3-mini",
    isThinkingEnabled: true,
  },
  input: {
    type: "json-schema",
    unit: typia.json.unit<IMember>(),
  },
  transformFunctionName: "transformMember",
  experimentalAllInOne: true, // recommended for faster and less-error results
});

// 3. Get the result!
const result = await agent.generate(); 
await fs.promises.writeFile(
  "./src/transformers/transformMember.ts",
  result.transformTsCode,
  "utf8",
);