DEV Community: Kyungsu Kang

AI Development Made Simple for Web Developers!

Kyungsu Kang — Sat, 29 Mar 2025 07:54:36 +0000

Prerequsite

If you don't know anything about AI SDK, you might want to read this as well.

https://dev.to/kakasoo/summary-of-llm-function-calling-44o1

Introduction

Hello there. Lately, I've been sharing a lot about AI, but I understand that AI can sometimes sound like it's from another world. Words like AI, artificial intelligence, singularity, agent, and MCP all carry such weight that when you dig into them, you might feel overwhelmed in just an instant. It might seem that these topics are far removed from the daily work of most developers—whether frontend or backend. Of course, when you hear discussions about the job market and such, you might think that everyone should at least learn the basics of AI to stay competitive. With that in mind, I want to introduce a recently released library. Interestingly, this library was developed by a Korean startup and is called Agentica.

https://github.com/wrtnlabs/agentica

“Interest, questions, feedback, and stars on a library serve as a tremendous source of motivation for open-source developers.”

What is Agentica?

https://github.com/wrtnlabs/agentica

The Agentica library, as shown above, converts TypeScript classes and Swagger documents into LLM Function Calling, providing assistance to those developing multi-agent orchestration and agentic AI. That may sound a bit complicated, but here’s the key takeaway:

Anyone who knows TypeScript can develop AI. → Frontend developers can now create AI!
Anyone who can create Swagger can develop AI → Backend developers can now create AI!

Could it really be that simple? Isn’t AI filled with daunting concepts like machine learning, regression analysis, and other hard-to-master terminologies? If you think so, consider this: how did frontend development work before React or even jQuery? And how did backend development happen before Spring, NestJS, or Django existed? Those were challenging times—probably even more challenging than what we imagine today.

“The reason AI development is challenging right now is that there aren’t yet enough libraries and frameworks to assist with it.”

My conclusion is that AI development is no different from past challenges. The AI ecosystem is still in its infancy, and surprisingly, development is lagging behind theoretical advances. That’s why a variety of libraries are starting to emerge. Personally, I find Agentica very interesting, and before diving into a detailed explanation, let me show you how you can use it.

Function Calling with TypeScript Classes in Agentica

There’s no need to think of “Function Calling” as something complicated. Function Calling simply means that an LLM can call functions during a conversation. In simpler terms, it’s not just a chatbot that talks—it can take action when needed. For example, it could order food, transfer money, or perform other actions that truly help the user.

Function calling provides a powerful and flexible way for OpenAI models to interface with your code or external services. This guide will explain how to connect the models to your own custom code to fetch data or take action.

Let’s look at a simple code example demonstrating how to use Function Calling.

Example: Creating an AI Agent That Can Use Gmail Code

You can find a detailed explanation at this tutorial.

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

import { GmailService } from "@wrtnlabs/connector-gmail";

dotenv.config();

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY! }), // Insert your OpenAI API key
    model: "gpt-4o-mini", // Model configuration
  },
  controllers: [
    {
      name: "Gmail Connector", // A descriptive name for the class to help the LLM select functions
      protocol: "class",
      application: typia.llm.application<GmailService, "chatgpt">(), // Pass the class
      execute: new GmailService({ ... }), // Pass an instance of the class
    },
  ],
});

const main = async () => {
  console.log(await agent.conversate("What can you do?")); // Now conversation is enabled!
};

main();

Not too long, right? If you look closely, the definition of the agent includes:

The model property, which determines the provider—in this case, chatgpt.
The vendor property, where you choose the service providing the LLM—in this case, OpenAI.
- If you need an API key, visit this link to generate one and top up with around $5.
Finally, you define a Controller. By providing a class as shown, you enable function calls through the methods defined in that class.

More on Controllers

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY! }), // Insert your OpenAI API key
    model: "gpt-4o-mini", // Model configuration
  },
  controllers: [],
});

In Agentica, a controller represents a set of functions that the LLM can call. When you pass a class, the LLM reads the class information as interpreted by the TypeScript compiler, understanding its public member functions. Since the actual function calls are made via an instance, you must provide one.

Install the Gmail connector package with:

npm install @wrtnlabs/connector-gmail

Then define the agent as:

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY! }), // Insert your OpenAI API key
    model: "gpt-4o-mini", // Model configuration
  },
  controllers: [
    {
      name: "Gmail Connector", // A descriptive name to help the LLM choose the function
      protocol: "class",
      application: typia.llm.application<GmailService, "chatgpt">(), // Pass the class
      execute: new GmailService({ ... }), // Pass an instance of the class
    },
  ],
});

With this setup, you can use the GmailService code as shown here. GmailService defines public methods such as:

Sending emails
Drafting emails
Listing and viewing email details

Thus, through conversation, the LLM can now call these functions.

(async function () {
  await agent.conversate("Can you forward an email to my contact?");
  await agent.conversate("My contact's email is ABC@gmail.com."); // You can continue the conversation!
})()

If needed, you can even create an agent that directly manages your computer’s files by redefining the fs module as a class. See this tutorial.
Similarly, frontend developers can define and control browser functions as classes.

There are many pre-built controllers available, so it's worth checking them out:

Function Calling with Swagger in Agentica

npm install @samchon/openapi

import { Agentica } from "@agentica/core";
import { HttpLlm, OpenApi } from "@samchon/openapi";
import dotenv from "dotenv";
import OpenAI from "openai";

dotenv.config();

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export const SwaggerAgent = async () =>
  new Agentica({
    model: "chatgpt",
    vendor: {
      api: openai,
      model: "gpt-4o-mini",
    },
    controllers: [
      {
        name: "PetStore", // Name of the connector (any descriptive name works)
        protocol: "http", // Indicates an HTTP-based connector
        application: HttpLlm.application({
          // Convert the Swagger JSON document to an OpenAPI model for Agentica.
          document: OpenApi.convert(
            await fetch("https://petstore.swagger.io/v2/swagger.json").then(
              (r) => r.json()
            )
          ),
          model: "chatgpt",
        }),
        connection: {
          // This is the actual API host where API requests will be sent.
          host: "https://petstore.swagger.io/v2",
        },
      },
    ],
  });

Next up is Swagger. Backend developers can now create an agent simply by using the Swagger you built. Whether you load the Swagger via fetch or from a file, once you read it as JSON, you just do:

{
    ...
    application: HttpLlm.application({
        document: OpenApi.convert(swagger),
    })
    ...
}

Instead of providing a class, you provide the Swagger document. This allows the LLM to call the API without needing a dedicated class definition!

How Agentica Works

AI’s Biggest Strength and Weakness, and How to Address It

AI’s greatest strength is that it always returns different results. If it were always the same, AI wouldn’t have taken off the way it has. However, its biggest weakness is that it always returns different results. Returning different results makes it difficult to understand using traditional frontend or backend development paradigms. Even when you write tests for defense, the only way to guarantee stability is through probabilistic methods over multiple calls. This style of development means that achieving 80% completeness in a product may take only 20% of the effort, but the remaining 20% might require 80% of the effort. That’s why truly polished AI products are still rare.

Agentica tackles this problem by:

Using the TypeScript compiler (TSC) to provide a reliably compiled document that teaches the AI about functions.
Also using the TypeScript compiler to correct the AI’s mistakes with remarkable precision.

For example, you can instruct it like:

“The type of the element ‘e’ inside the array located at a.b.c.d is incorrect. Fix it.”

And internally, Agentica corrects the errors like so:

{
    success: false, // It failed,
    errors: [{ // And it provides hints on how to fix it.
        path: "$input.a.b.c.d[0].e", 
        expected: "number", 
        value: "abc"
      }], 
    data: { // This represents the value received by the AI.
      a: {
        b: {
          c: {
            d: [{
                e: "abc"
              }]
          }
        }
      }
    }
}

Every time the AI calls a function, it can realize:

“The type for 'a.b.c.d[0].e' should be a number, but I passed in “abc”!”

Isn’t it amazing that AI, a field that seems so distant, can suddenly rely on compilation to fix its mistakes?

Implications of Agentica

This concludes our brief introduction to Agentica. Even beyond Agentica, many open-source projects will emerge, and we can start discussing what frontend and backend developers need to prepare for. In my view, here are four key points:

As open-source projects grow, AI development will become easier and will trickle down to regular service development.
Code that cannot be explained to the AI will eventually be unselectable by it, making code readability and documentation essential.
Similarly, to provide explanations, you must be proficient not only at the code level but also in business and domain knowledge.
Just as with compilers, learning AI development will require a strong foundation in computer science—it will only become more important.

Agentica is not exclusively targeted at TypeScript. It is a library for web developers in general—especially frontend developers who make up a large portion of the developer community. In the coming era, as interest in AI-powered services continues to grow, I believe frontend developers should familiarize themselves with libraries like this and prepare for the AI age. It will benefit your career.

We can never predict which library will emerge next. Agentica may be just a fleeting project, or it might fail to catch on. However, wasn’t the code surprisingly simple? In the future, various features to boost development productivity may be added, or a new library might emerge to further accelerate AI development.

Conclusion

If you enjoyed reading this, why not take your own project to the next level with Agentica? Whether you already have a frontend page or a server, even creating a chatbot by generating classes or Swagger documentation can give your project a more dynamic composition. Thank you for reading.

Appendix

I made slack agent without langchain

https://dev.to/kakasoo/i-made-slack-agent-without-langchain-3dac

TypeScript Essentials: Crafting Simple Types

Kyungsu Kang — Sat, 29 Mar 2025 07:32:31 +0000

Implementation of Simple Types

About TypeScript

TypeScript is a highly expressive language that allows you to write algorithms using types alone.

However, it is impossible to express every type.

For example, in TypeScript, the maximum length of a tuple that can be represented by types is 999.

Depending on the version of TypeScript, some restrictions may be relaxed or new features may be added.

In this process, types that were previously impossible to express might become possible, but there are still types that cannot be represented.

In most cases, this is not a matter of the language's expressiveness but rather a restriction to prevent using too many computations.

Type Level

From now on, we must strictly distinguish between JavaScript and TypeScript.

Node.js developers now handle TypeScript for types and JavaScript for values.

If a developer cannot create custom types, then the developer's code is not much different from plain JavaScript.

Even if types are strictly defined in the code, you cannot say that TypeScript is being used to its full extent.

What features are there in TypeScript that are specifically for TypeScript?

Let’s discuss what distinguishes JavaScript from TypeScript.

TypeScript vs. JavaScript

const example1: number = 1;
const example2: string = '2';
const example3: (...param: any[]) => any = () => {};

This is how you annotate identifiers with types in TypeScript.

A colon is used to specify the type, and aside from that, it’s the same as JavaScript.

The same applies to functions; however, the function must be annotated with a function-like type.

At that time, the function can also specify parameter and return types.

Here, we express that any remaining parameters are represented by the rest operator as an any[] and the return type is also any.

Now, what types can be assigned to identifiers?

Primitive Types and any

TypeScript has the types string, number, and boolean.

If you understand up to this point, you have essentially learned all the types in JavaScript.

Most strongly typed languages begin programming by predefining these primitive types to variables.

In TypeScript, if no type is specified, it defaults to any, so up to this point everything is the same.

Therefore, since no type is specified in JavaScript, you can think of every type as any in TypeScript.

Wrapper Objects and Primitive Types

In JavaScript, wrapper objects such as Number, Boolean, and String exist.

So you can create objects of primitive types like Number(3).

However, these wrapper objects are generally discouraged in TypeScript.

The typeof operator, which we use frequently, does not refer to these wrapper objects at either the value level or the type level.

Literal Types

Unlike most other languages, TypeScript can express types that are more specific than the primitive types.

These are called literal types; for example, there can be a type of 'hello world'.

While 'hello world' is a string, a string is not necessarily 'hello world'.

Likewise, the number 10 is of type number, but number is not equivalent to the literal 10.

type Example = 'helloWorld';
const e: Example = 'helloWorld'; // Assigning any value other than 'helloWorld' will result in an error.

This declaration of literal types is one of the main reasons TypeScript can express so many different types.

Nullable Types

JavaScript has both undefined and null.

TypeScript also has undefined and null types, and these two are strictly distinct types.

If undefined or null are used as property types in an object, they are entirely separate from properties that were not specified at all.

In other words, a property not specified (which evaluates to undefined in JavaScript) is different from a property explicitly set to undefined.

If your IDE does not distinguish between these, be sure to check your tsconfig.json file.

If you’re not familiar with tsconfig.json yet, you can ignore this.

// tsconfig.json
"strictNullChecks": true

never Type

Next, there is the never type.

In JavaScript, every type is any.

Therefore, in TypeScript, you could say that every type is a subset of any.

So what do you call a type that contains nothing?

TypeScript calls this type never, representing the empty set in type theory.

never and extends in Conditional Types

When a condition is applied to never, the condition never actually executes.

This is similar to how methods on Array.prototype never iterate if the array is empty.

Since never represents an empty set that contains nothing, there is never any type to check against the condition.

type Example<T> = T extends any ? true : false;

type e = Example<never>; // It is inferred as never, not true or false.

Checking for never

type IsNever<T> = any

type e = IsNever<never>;

However, you must know how to check whether a type is never or not.

One way to check for never in TypeScript is by using the following pattern:

type IsNever<T> = [T] extends [never] ? true : false;

Union Types

A union type is interpreted as “or” and is denoted by the pipe symbol.

Below, we define a type that means either a number or a string.

Since the type is defined as number or string, both 1 and '1' are acceptable values.

type Example = number | string;

const e1: Example = 1;
const e2: Example = '1';

Type Inference

If you explicitly specify a type as true | false, it is inferred as boolean since true or false is a boolean.

TypeScript refers to this phenomenon as the Best Common Type.

If there exists an expression that best represents the intended type, it will be used as a substitute.

This process of determining the most appropriate type is called type inference.

This is especially useful with union types.

type Example1 = 1 | 2 | 3 | number; // Inferred as number.
type Example2 = 'a' | 'b' | 'c' | string; // Inferred as string.
type Example3 = true | false; // Inferred as boolean.

Intersection Types

If there is an "or", then there must also be an "and".

In set theory, “or” corresponds to union and “and” corresponds to intersection.

In TypeScript, an intersection type (translated as intersection) is denoted by the ampersand (&).

That is, it represents the intersection of the defined elements.

Below, we define the intersection of a type that represents numbers 1 through 3 and a type that only allows 2.

Therefore, the type of e1 is 2, and assigning any value other than 2 will result in an error.

type Element1 = 1 | 2 | 3;
type Element2 = 2;
type Example = Element1 & Element2;

const e1: Example = 2;

Intersection in Interface Types

interface Person {
  name: string;
  age: number;
}

interface Address {
  address: string;
}

type PersonWithAddress = Person & Address; // { name: string; age: number; address: string }

In union types, an intersection picks only the common parts of the unions.

However, with interfaces, using an intersection type results in a merged type of both interfaces.

Although it may seem counterintuitive, you can understand the intersection as “the most appropriate type that satisfies both” interfaces.

For two different union types to allow both, they must share the common part of the union.

But for interfaces, the most appropriate type that satisfies both is the merged form of the two interfaces.

Array Types

There is also the Array type with a variable length and the tuple type with a fixed length, which is a bit more complex.

Tuples will be explained later.

An array represents a collection of multiple types and does not impose restrictions on the number of elements.

type Example = number[];

const e1: Example = [1,2,3,4,5];

Generic Types and Type Parameters

Functions have parameters.

Similarly, when writing types, you can define types with parameters, which allows you to write more complex types succinctly.

Types with type parameters are called generic types.

For instance, the number array type shown above can be written generically as follows:

type Example1 = number[];
type Example2 = Array<number>;

const e2: Example2 = [1,2,3,4,5];

Generic Types and Function Definitions

const example = <T extends number>(param: T): T => {
    return param;
};

The above code simply takes a parameter and returns it without any particular meaning.

However, this code helps you understand how to use generic types with functions.

The generic type is specified in angle brackets to the left of the parentheses where the parameters are passed.

Thus, T is at least a number, and the parameter param and the return type are both of type T.

Conditional Types

Types can also have conditions.

They are represented using a syntax similar to the ternary operator, with a question mark and a colon, using the extends keyword.

If you have a syntax like ‘A extends B ? C : D’, it should be interpreted as “if A extends B, then C; otherwise, D.”

type Example = 1 extends number ? true : false;

const e: Example = true; // Error if false is assigned.

Using Generics with Conditional Types

If you use a condition, naturally, you need parameters for the condition.

As in the code above, conditions like 1 extends number are usually already known.

Therefore, having a type that branches based on parameters allows for richer type expressions.

We have the type parameter T available.

type Example<T> = T extends string ? true : false;

const e: Example<'abc'> = true; // Error if false is assigned.

The above code defines a type parameter T so that the developer can provide any type, and it will be true only if T is a string.

Constraints on Generic Types

Among conditions, there are those that are used exclusively in generic types, called constraints.

A constraint should be understood more as “at least this” rather than “if ~ then”.

If you put a constraint on a generic parameter, an error will occur if the provided type does not meet the condition.

type Example<T extends string> = true;

const e1: Example<string> = true; // No problem.
const e2: Example<number> = true; // Compilation error on the generic parameter.

Conditional Types and the infer Keyword

type Example<T> = T extends (...param: any[]) => infer R ? R : never;

const add = (a: number, b: number): number => a + b;

const e1: Example<typeof add> = 3; // number

In the type above, Example will infer the return type R if T is a function type.

The infer keyword is used here (R is just an identifier with no special meaning).

If, for instance, the return type of add changes to string, then e1 must be of type string.

One thing to note is that the infer keyword infers the most minimal type that satisfies the condition.

Let’s look at another example for a more detailed explanation.

infer Keyword in String Literal Types

type Example<T extends string> = T extends `${infer F}${string}` ? F : string;

const e1: Example<"abcde"> = 'a';

In the code above, if any value other than 'a' is assigned, an error will occur.

This is because infer F is inferred as the literal type 'a'. One might wonder why it is 'a' and not 'abc'.

The answer is that TypeScript’s type inference infers the best common type, which in this case is the minimal type.

infer Keyword in Arrays

type Example<T> = T extends [infer F, ...infer Rest] ? F : never;

const e: Example<[1, 3]> = 1; // Only 1 can be assigned.

If T is a tuple consisting of F and the rest of the types (Rest), then F is inferred as the first element type.

The remaining elements are inferred as a tuple type using …infer Rest.

Thus, in the example, Example<[1, 3]> is inferred as 1.

Rest, like the identifier R in previous examples, is arbitrarily chosen and holds no special meaning.

infer Keyword with Type Parameters

type Example<T> = T extends Array<infer R> ? R : never;

const e: Example<number[]> = 3; // Since R is inferred as number, 3 can be assigned.

In conditions that are not constraints, the infer keyword can be used to express conditions.

The infer keyword is created to represent a virtual type that has not yet been determined.

While the infer keyword can work on its own, it is mostly used together with generic parameters to allow richer type expressions.

type IsNever<T> = [T] extends [never] ? true : false;

Since never cannot be checked normally, we use the tuple trick as in the IsNever type above.

as Keyword

The as keyword is used to explicitly tell the compiler the type, but if used incorrectly it can cause improper type inference.

However, there are cases where using as is unavoidable to solve a particular type problem.

const add = <T extends number>(
    a: T,
    b: number
): T extends number ? number : "error" => {
    if (typeof a !== "number") {
        return "error"; // Error: Type 'string' is not assignable to type 'T extends number ? number : "error"'.
    }
    return a + b; // Error: Type 'number' is not assignable to type 'T extends number ? number : "error"'.
};

In the above code, the add function generates errors at each return statement.

The function is intended to return number if type T is number, and the literal "error" otherwise.

Although we can understand that the internal code meets the return type requirements, the compiler does not understand the branch conditions in the if statements.

The TypeScript compiler compiles types, not the code itself.

const add = <T extends number>(
    a: T,
    b: number
): T extends number ? number : "error" => {
    if (typeof a !== "number") {
        return "error" as T extends number ? number : "error";
    }
    return (a + b) as T extends number ? number : "error";
};

Thus, we must modify the types using as.

As mentioned earlier, while the use of as should be minimized, sometimes it is necessary to explicitly specify the type.

Abbreviating When as Must Be Used

const add = <T extends number, P extends T extends number ? number : "error">(
    a: T,
    b: number
): T extends number ? number : "error" => {
    if (typeof a !== "number") {
        return "error" as P;
    }
    return (a + b) as P;
};

Here, an additional type parameter P is introduced to predefine the complex type.

Then, you only need to use as P for the repeated type annotations.

While this cleans up redundant as type assertions, it can cause issues if the developer attempts to specify P directly inside the angle brackets.

Usually, if left untouched, there is no problem.

keyof Keyword

type Example = {
  id: number;
  name: string;
};
type Keys = keyof Example; // 'id' | 'name'

The keyof keyword produces a type consisting of only the keys of the given type, inferred as a union type.

Mapped Types

type EnumType = 'a' | 'b' | 'c' | 'd';
type Example = {
  [K in EnumType]: number;
};

If you want to convert a union type back into an object type, you can use a Mapped type.

In the example above, each member of EnumType — 'a', 'b', 'c', and 'd' — is used as a key.

Thus, the inferred type is as follows:

type Example = {
  a: number;
  b: number;
  c: number;
  d: number;
};

Arrays and Mapped Types

In JavaScript, arrays are objects. How about in types?

type NumberArray = [1, 2, 3, 4, 5];
type NumberToString<T extends number> = `${T}`;

type NumberArrayToStringArray<T extends number[]> = {
    [key in keyof T]: `${T[key]}`
}

type Answer = NumberArrayToStringArray<NumberArray>; // ["1", "2", "3", "4", "5"]

Even at the type level, arrays are objects, and thus Mapped types can be applied to them.

Summary of LLM Function Calling

Kyungsu Kang — Tue, 25 Mar 2025 07:54:36 +0000

What I’m discussing here is how Wrtn Technologies is building open source software.

I’ll explain in several parts how our team is preparing for the AI era.

If you’re not a developer, you can safely skip over the code details without missing the main ideas.

If you’re curious about our technology, please check out our open source repository at https://github.com/wrtnlabs/agentica.

Introduction

‘AI’ is the hottest keyword right now.

We often hear stories of liberation from labor through AI, which can be both hopeful and daunting,

while others express a strong desire not to return to a time without AI.

However, discussions about AI tend to be so entangled with complex metrics that it becomes difficult to understand what is really being said.

So, from a pure backend developer’s perspective, let’s talk about how AI is transforming our lives, particularly the field of development.

I’ve tried to write this as simply as possible so that even those with no development background can grasp some of the insights.

The Past of Backend Development, and Function Calling

Backend development is essentially server development, and server development is all about designing contracts.

A server is a collection of promises like “if you give me A, I will give you B”, which is why I often liken it to a vending machine.

Imagine a vending machine built from a series of promises about how much money to insert, which button to press, and what drink will come out.

However, with the advent of AI, one element has changed: the entity responsible for calling APIs.

Until now, API calls were triggered by the pages developed by frontend developers or user actions.

A user would click a button, and just like pressing a button on a vending machine to get a drink, the process was straightforward.

But the emergence of AI has introduced a scenario where the function can be “called” without any user clicking a button or scrolling.

We call this concept “Function Calling”.

Defining Function Calling

Enable models to fetch data and take actions.

**Function calling* provides a powerful and flexible way for OpenAI models to interface with your code or external services, and has two primary use cases:*

Fetching Data

Taking Action

According to OpenAI’s definition of “function calling,” it enables models to fetch data or perform actions.

After all, fetching data in web development is essentially an HTTP GET method, so you could say that the action is essentially the same.

This definition means that at the moment when needed, the model will make a GET or POST request, effectively “firing” an API call.

So, how exactly does the model autonomously “fire” an API call?

OpenAI SDK and the Principle of Function Calling

To explain this, let’s first discuss how we interact with APIs through LLMs.

Calling an API via an LLM gives the impression of having a “conversation.”

But for those who understand the underlying structure, it’s really just asking “What would you say in this situation?” at every moment.

Consider this pseudo-code:

The function’s name is “What would you say in this situation?”
The function’s argument is the entire conversation history:
- This includes what the user said, what the AI said, and any additional contextual information.

That’s it.

Thus, a conversation through an LLM simply accumulates the conversation history as parameters,

and the impression of dialogue is merely the result of continuously appending previous messages.

It might sound trivial, but this very mechanism allows us to talk about function calling.

Since you can manipulate the conversation history by asking “What would you say in this situation?”,

isn’t it possible for the API call result to simply be inserted into the conversation as if the AI had made the call?

For example:

User: “What should I eat today?”
LLM: “I received the result *** from your request.”*
LLM: “Based on a search through a mapping app, the best restaurant around Gangnam Station is A!”

Function Calling at the Code Level

import { OpenAI } from "openai";

const openai = new OpenAI();

const tools = [{
  "type": "function",
  "function": {
    "name": "get_weather",
    "description": "Get current temperature for a given location.",
    "parameters": {
      "type": "object",
      "properties": {
        "location": {
          "type": "string",
          "description": "City and country e.g. Bogotá, Colombia"
        }
      },
      "required": [
        "location"
      ],
      "additionalProperties": false
    },
    "strict": true
  }
}];

const completion = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [{ role: "user", content: "What is the weather like in Paris today?" }],
  tools, // When you pass tools along with the prompt, GPT can choose from these tools!
  store: true,
});

The LLM itself isn’t executing the API call.

So, while it may seem like the API is being fired, in reality, the LLM is simply choosing a tool and filling in the parameters for an API request.

Please pay close attention to the commented part in the code!

💡 When you provide tools while prompting GPT, it may select one of those tools!

The essence of GPT’s Function Calling is that the AI, based solely on the conversation, can only fill in the arguments for the chosen tool—it does not actually call the function itself.

So what remains is: if GPT’s output appears to be a conversational response, it is shown directly to the user;

if GPT’s output is the selection of a tool with the filled-in parameters, then that tool should be called instead,

and the LLM is made to appear as though it has performed the call.

Below is the complete pseudo-code written in TypeScript.

TypeScript Pseudo-code for Function Calling

const histories = [{ role: "user", content: "What is the weather like in Paris today?" }];

// 1. Provide the conversation history to the LLM and ask for a response.
const completion = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: histories, // Provide context to the GPT by including the conversation history.
  tools, // Pass tools to GPT so that it might choose one!
  store: true,
});

// 2-1. If the output indicates that a tool was selected:
if (isTool(completion)) { 
    // Extract the parameters,
    const { params, query, body } = getPrameters(completion); 

    // Call the function on behalf of the LLM,
    const called = await functionCall(url, params, query, body);

    // Add the result of the function call to the conversation history.
    histories.push(getContents(called));

    const completion = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: histories, // Provide GPT with the updated conversation including the API call result.
    store: true,        
    })

    histories.push(getContents(completion));
} else {
    // 2-2. If a tool wasn’t chosen, simply show the conversational response to the user and continue the dialogue.
    histories.push(getContents(completion));
}

In summary, function calling hinges on having a client or server make the function call on behalf of the LLM.

The Future Paradigm of Backend Development

Until now, backend developers designed servers, wrote documentation, and then passed it to frontend developers.

Frontend developers would interpret that documentation, coordinate with designers, and connect the functionality to the UI.

But now that we can let an LLM make API calls using just a set of tools, much can be accomplished through simple chat.

Imagine being able to say:

“Send an email to kakasoo!”

and having the email sent without navigating through a separate email service.

Similarly, in commerce or advertising, if a user lacks domain knowledge, they can perform tasks with assistance.

A single chat interface can provide the necessary UI to achieve the desired results.

This leads to a question: what will the role of backend developers be?

I believe that it’s unlikely for backend developers to simply document “tools” to hand off to others.

// Creating tools that match the API is such a tedious task...
// Isn’t there a way to improve this?
const tools = [{
  "type": "function",
  "function": {
    "name": "get_weather",
    "description": "Get current temperature for a given location.",
    "parameters": {
      "type": "object",
      "properties": {
        "location": {
          "type": "string",
          "description": "City and country e.g. Bogotá, Colombia"
        }
      },
      "required": [
        "location"
      ],
      "additionalProperties": false
    },
    "strict": true
  }
}];

Manually creating these tools is impractical, and any changes would be a nightmare to manage.

This led us to think: what if we could automate even this process?

Then, wouldn’t it be possible to automatically integrate the API every time it’s created?

At Wrtn Technologies, our team has researched and developed this automation, and we’ve released it as an open source project.

We call this library Agentica, which provides tools to automate agent development.

import { Agentica, createHttpLlmApplication } from "@agentica/core";
import { OpenApi } from "@samchon/openapi";

const document: OpenApi.IDocument; // This represents a JSON-formatted Swagger document.
const tools = createHttpLlmApplication({ model: "chatgpt", document });
const agent: Agentica = new Agentica({
  controllers: [
    {
      name: "shopping",
      application: tools, // Convert Swagger documentation to tools!
      connection: { host: "http://localhost:3000" },
    },
  ],
  ...
});
await agent.conversate("I wanna buy MacBook Pro");

We’ve made the code so simple that any TypeScript developer can understand and use it,

resulting in an interface that connects LLMs immediately with your API through Swagger!

Conclusion

From working on this open source project, I’ve drawn several key insights:

People who think in terms of domain knowledge and service-centric design are more likely to thrive.
The ability to design systems that align with business needs may become more important than merely writing efficient code.
Unlike frontend developers, LLMs don’t tolerate errors in documentation—they will produce errors if the documentation is inaccurate, so documentation is crucial.

For example, an advertising developer might need to delve into a marketing textbook and then translate that into a workable design.

So what will become of frontend developers?

And what happens if the Swagger documentation is incorrect?

I have some thoughts on these questions as well, which I plan to share next time if you found this post interesting!

Easy and simple AI development for web developers!

Kyungsu Kang — Tue, 25 Mar 2025 02:08:07 +0000

Introduction

Hello, recently I’ve been sharing a lot about AI, but these days it might sound like it’s something from another world. Terms like AI, artificial intelligence, singularity, agent, MCP—each one carries so much weight that if you dive deep into them, an entire day can vanish in an instant. Such discussions may seem far removed from what most developers—especially frontend and backend developers—usually work on. Of course, when you hear about job market challenges and other concerns, you might think that at least the basics of AI should be learned to stay competitive. For those people, I’d like to introduce a newly released library. Interestingly, this library was developed by a Korean startup and is called Agentica.

https://github.com/wrtnlabs/agentica

"Interest, questions, feedback, and stars for the library serve as strong motivation for open-source developers."

What is Agentica?

https://github.com/wrtnlabs/agentica

Agentica is a library that, as shown above, converts TypeScript classes and Swagger into LLM Function Calling. It helps those developing multi-agent orchestration and agentic AI. That might sound overly complicated, but here are the key points to focus on:

Anyone who knows TypeScript can develop AI. → Now even frontend developers can build AI!
Anyone who can create Swagger can develop AI. → Now even backend developers can build AI!

Is it really possible to develop AI with just these two ingredients? Aren’t fields like AI, with their complex terms such as machine learning or regression analysis, intimidating enough that one must memorize and master them all? If you think so, consider this: How did frontend development work in the days before React or jQuery? And how was development done before frameworks like Spring, NestJS, or Django existed? Development back then was incredibly challenging—more so than we can imagine today.

"The reason AI development is difficult now is because there aren’t yet enough libraries and frameworks to assist with it."

My conclusion is that AI is no different. The AI ecosystem is still in its infancy, and surprisingly, practical development is lagging behind theoretical advancements. This is why various new libraries are emerging. Personally, I find Agentica extremely intriguing, and before diving into further details, let me first share how you can use it.

Function Calling Through TypeScript Classes in Agentica

There’s no need to think of the term Function Calling as something difficult. Function Calling means that the LLM can invoke functions during a conversation. In simpler terms, it’s not just a chatbot that converses; it can perform actions when needed—like ordering food or transferring money—taking appropriate actions at the right moment for the user.

Function calling provides a powerful and flexible way for OpenAI models to interface with your code or external services. This guide will explain how to connect the models to your own custom code to fetch data or take action.*

Now, let’s look at a simple code example that demonstrates how to use Function Calling.

Example: Creating an AI Agent Using Gmail Code

You can read more about this on this tutorial page.

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

import { GmailService } from "@wrtnlabs/connector-gmail";

dotenv.config();

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }), // Insert your OpenAI key
    model: "gpt-4o-mini", // Set the model
  },
  controllers: [
    {
      name: "Gmail Connector", // A descriptive name to help the LLM choose the function
      protocol: "class",
      application: typia.llm.application<GmailService, "chatgpt">(), // Provide the class
      execute: new GmailService({ ... }), // Pass an instance of the class
    },
  ],
});

const main = async () => {
  console.log(await agent.conversate("What can you do?")); // Now conversation is possible!
};

main();

How is that? The code is much shorter than you might expect.

Looking at the code, here’s what’s happening:

Model: You decide on a provider—in this case, we’re using chatgpt.
Vendor: You choose the service that provides the LLM—here we use OpenAI.
- If you’d like to get a key, you can go to this link and, after obtaining one, charge about 5 dollars.
Controller: Now, you need to define a controller. By including a class (as shown in the comments), you can freely access its functions.

Additional Explanation About the Controller

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }), // Insert your OpenAI key
    model: "gpt-4o-mini", // Set the model
  },
  controllers: [],
});

In Agentica, a controller represents a collection of functions that the LLM can call. When you supply a class, the LLM reads the class information—as interpreted by the TypeScript compiler—and understands its public member functions. Moreover, since the actual calls are made by an instance, you must provide an instance.

npm install @wrtnlabs/connector-gmail

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }), // Insert your OpenAI key
    model: "gpt-4o-mini", // Set the model
  },
  controllers: [
    {
      name: "Gmail Connector", // A descriptive name to help the LLM choose the function
      protocol: "class",
      application: typia.llm.application<GmailService, "chatgpt">(), // Provide the class
      execute: new GmailService({ ... }), // Pass an instance of the class
    },
  ],
});

Thus, you can define and use the GmailService as shown here. In GmailService, public methods are defined for actions such as:

Sending emails
Drafting emails
Retrieving email lists and details

This means that you can now call these functions through conversation.

(async function () {
    await agent.conversate("Can you forward an email to my acquaintance?");
    await agent.conversate("Their email is ABC@gmail.com."); // The conversation continues!
})()

If needed, you can also create an agent that directly manages computer files by redefining the fs module as a class. See this tutorial.
Likewise, frontend developers can now define and manipulate browser functions as classes.

There are many pre-built controllers available, so it might be worthwhile to take a look.

Function Calling Through Swagger in Agentica

npm install @samchon/openapi

import { Agentica } from "@agentica/core";
import { HttpLlm, OpenApi } from "@samchon/openapi";
import dotenv from "dotenv";
import OpenAI from "openai";

dotenv.config();

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export const SwaggerAgent = async () =>
  new Agentica({
    model: "chatgpt",
    vendor: {
      api: openai,
      model: "gpt-4o-mini",
    },
    controllers: [
      {
        name: "PetStore", // Name of the connector (can be any descriptive name)
        protocol: "http", // Indicates an HTTP-based connector
        application: HttpLlm.application({
          // Convert the Swagger JSON document to an OpenAPI model for Agentica.
          document: OpenApi.convert(
            await fetch("https://petstore.swagger.io/v2/swagger.json").then(
              (r) => r.json()
            )
          ),
          model: "chatgpt",
        }),
        connection: {
          // This is the actual API host where the API requests will be sent.
          host: "https://petstore.swagger.io/v2",
        },
      },
    ],
  });

Next up is Swagger. Now, backend developers can create an agent simply with the Swagger documentation they built. Whether you load Swagger via fetch or as a file, once you read it in as JSON, you just need to substitute it for the application field as shown below:

{
    ...
    application: HttpLlm.application({
        document: OpenApi.convert(swagger),
    })
    ...
}

Then, the LLM will be able to call the API based solely on the Swagger document—without the need for class definitions for Function Calling!

How Agentica Works

The Greatest Strength and Weakness of AI—and the Solution

The greatest strength of AI is that it always returns different results. If it always returned the same result, AI wouldn’t be as popular as it is. However, its greatest weakness is also that it always returns different results. This unpredictability is something that traditional frontend or backend development can hardly comprehend. Even if you try to guard against it with test code, the only method is to invoke it multiple times to probabilistically ensure stability. In this kind of development, achieving 80% completeness might take just 20% effort, but raising that remaining 20% to perfection requires 80% of the effort. This is why there are still so few fully polished AI products.

Agentica tackles these issues by:

Using TSC (the TypeScript compiler) to provide compile-time stable documentation that teaches the AI about functions.
Similarly, using the TypeScript compiler to correct the AI’s mistakes with remarkable precision.

For example, you can instruct:

“The type of the element e in the array d, nested inside c inside b inside a is incorrect. Fix it.”

Inside Agentica, errors are corrected in a similar fashion:

// Inside Agentica, errors are corrected as follows.
{
    success: false, // The operation failed,
    errors: [{ // and hints on how to fix it are provided at every step.
        path: "$input.a.b.c.d[0].e", 
        expected: "number", 
        value: "abc"
      }], 
    data: { // This represents the value that the AI received.
      a: {
        b: {
          c: {
            d: [{
                e: "abc"
              }]
          }
        }
      }
    }
}

Every time the AI calls a function, it can determine that:

"The type of a.b.c.d[0].e is number, but I provided "abc"!"

It’s amazing how a field like AI—seemingly so distant—suddenly incorporates compilation!

Implications of Agentica

This concludes a brief introduction to Agentica. Even beyond Agentica, many open-source projects are emerging, and this discussion highlights what frontend and backend developers should be preparing for. In my view, there are four key points:

As open-source projects increase, AI development will become easier and evolve to the level of service development.
Code that cannot be explained to AI will eventually become unusable by AI, so code readability and documentation are essential.
Similarly, to explain your work, you need to be proficient not only at the code level but also in business and domain knowledge.
Just like with compilers, learning AI development requires a strong foundation in computer science—it will only become more important.

Agentica is not just a library for TypeScript. It should be seen as a tool for web developers—especially frontend developers—who make up more than half of all developers. As interest in AI-driven services continues to grow, I believe that frontend developers should familiarize themselves with libraries like this and prepare for the AI era. This will undoubtedly be advantageous for their careers.

Conclusion

If you enjoyed reading this, why not consider enhancing your project with Agentica? Whether by adding classes to your existing frontend or by generating Swagger for your existing server to create a chatbot, your project can become even more impressive. Thank you for reading.

I made slack agent without langchain

Kyungsu Kang — Mon, 24 Mar 2025 08:29:06 +0000

📌 Building a Slack Agent with Agentica & OpenAI

1. Introduction

Github Repository Link: https://github.com/wrtnlabs/agentica.slack.bot

The advancement of AI technology has brought significant innovation across various industries and tasks. In particular, integrating AI into workplace tools plays a crucial role in automating everyday tasks efficiently and enhancing human work capabilities. One of the key areas of this transformation is integrating AI into communication tools like Slack to create smarter and more productive work environments.

Agentica is an AI service based on TypeScript that simplifies the process of building and operating conversational bots within platforms like Slack. Leveraging LLMs (Large Language Models), it enables seamless, context-aware interactions based on Slack messages, providing users with a more efficient and natural experience. Notably, Agentica manages conversation history automatically through Slack threads without relying on external databases, allowing the AI bot to maintain continuous and contextually relevant conversations.

This document explores how to build Slack bots using Agentica, offering insights into how AI can be leveraged in the workplace. Additionally, it highlights why AI integration is important for service developers and explores potential future developments.

1.1. What is Agentica?

Agentica is an open-source TypeScript library that simplifies AI development by enabling easy function calling with LLMs (Large Language Models). It allows developers to define AI agents using TypeScript classes or Swagger (OpenAPI) definitions, making AI integration accessible for both frontend and backend developers. By leveraging the TypeScript compiler, Agentica enhances reliability by automatically validating and correcting AI-generated responses. With Agentica, developers can build AI-powered applications that not only generate text but also execute real-world actions, such as sending emails, managing files, and interacting with APIs.

1.1.1. Learn More About Agentica

For a more detailed understanding of Agentica, visit the official tutorial: Agentica Tutorial.

The tutorial provides practical examples, including how to integrate Agentica with file systems and popular services. You don’t need to understand complex AI concepts or write intricate code.

Frontend Developers: If you know TypeScript and can work with classes, you’re good to go.
Backend Developers: Simply insert your Swagger definition into the provided code snippets, and Agentica will handle the rest.

1.2. Why Use Agentica for Slack Agents?

1.2.1. Simplified Development of Slack Agents

Using Agentica greatly simplifies the process of developing Slack agents. You can easily see its simplicity in the example code. To integrate with a complex system like Slack, all you need to do is define a TypeScript class. Then, you simply pass the class as a generic in the application section, and in the execute section, provide an instance of that class. It’s that simple.

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

import { SlackService } from "@wrtnlabs/connector-slack";

dotenv.config();

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({
      apiKey: process.env.OPENAI_API_KEY!,
    }),
    model: "gpt-4o-mini",
  },
  controllers: [
    {
      name: "Slack Connector",
      protocol: "class",
      application: typia.llm.application<SlackService, "chatgpt">(),
      execute: new SlackService(),
    },
  ],
});

const main = async () => {
  console.log(await agent.conversate("What can you do?"));
};

main();

This structure is simple and avoids unnecessary configurations or complexity, providing much more convenience for developers. Especially when dealing with systems like Slack, which require multiple API integrations, Agentica makes it easy to combine different APIs. This is made possible with TypeScript's powerful type inference, which allows you to handle this complexity easily.

Additionally, Agentica has built-in history management, so developers don't need to manually manage the history of requests and responses. It automatically tracks this for you, and you can modify or manage the history flexibly, which makes the process smoother.

Thus, Agentica is not only useful for developing Slack agents but also for combining various tools to efficiently manage complex systems. Developers can eliminate unnecessary complexity and focus on core logic, greatly improving productivity.

1.3. Expected Benefits and Key Features

The key benefits of using Agentica to develop Slack agents are as follows:

1.3.1. Simplified Development Process

With Agentica, you don't need to deal directly with the Slack API. By leveraging TypeScript classes and clear type definitions, you can easily integrate Slack services. This significantly speeds up development as you don't need to manually parse complex responses or handle raw API requests.

1.3.2. Strong Type System and Inference with TypeScript

TypeScript’s type system is a major advantage when using Agentica. With powerful type inference, you can confidently handle complex integrations like Slack. Using typia for type validation, you can ensure that your code works as expected without worrying about errors or inconsistencies.

1.3.3. Seamless API Integration

Slack requires multiple APIs to handle different tasks. Agentica allows for smooth integration of multiple APIs, abstracting the complexity of managing various requests and responses. Developers can focus on building the logic of the agent without worrying about how systems interact with each other.

1.3.4. Developer-Friendly Documentation and Tutorials

Agentica provides easy-to-follow documentation and tutorials. With clear examples and step-by-step guides, even developers with limited AI integration experience can build powerful Slack agents without going through a steep learning curve.

2. Understanding the Tech Stack

2.1. How Agentica Simplifies LLM Function Calls

Agentica significantly simplifies making LLM function calls. Traditionally, interacting with an LLM API involves complex authentication, payload handling, and response parsing, but Agentica abstracts all of this complexity. By using Agentica, developers can focus on writing simple TypeScript classes, while the tool handles the backend complexities. With the integration of tools like typia, developers can ensure that function arguments and responses are validated with strong typing, reducing errors and improving code stability during function calls.

2.2. Overview of Slack API & Event Subscriptions

The Slack API is a powerful tool for integrating external services with Slack, enabling users to send messages, manage channels, and automate workflows within Slack. It allows developers to build custom applications, bots, and workflows that interact with Slack channels, users, and messages. The API provides a range of endpoints for tasks like posting messages, managing channels, sending files, and handling user interactions.

One key feature of the Slack API is Event Subscriptions. Event subscriptions allow developers to listen for specific events happening in Slack, such as messages being posted in a channel or a user joining a workspace. This real-time event-driven model enables applications to react instantly to changes in Slack, making it ideal for building interactive and responsive bots and integrations.

When subscribing to events, developers need to specify the types of events they want to listen to, such as message events, user events, or channel events. These events are then sent to a specified Request URL where the application can process the events and take appropriate actions, such as sending a response back to Slack or triggering other workflows. Event Subscriptions can greatly enhance the functionality and interactivity of Slack integrations by providing real-time data.

3. Setting Up the Slack Bot

3.1. Creating and Configuring a Slack App

To integrate your agent as a Slack bot, the first step is to create a Slack app. Follow these steps:

Create a Slack App:
- Visit the Slack API website and click on "Create New App."
- Choose "From scratch" and enter a name for your app and the workspace where it will be installed.
- Once the app is created, you’ll be directed to your app’s settings page.
Configure Bot Permissions:

Under "OAuth & Permissions," set the necessary scopes for your bot to interact with Slack. For example, to listen to messages and respond, the app_mentions:read and chat:write permissions are required.

Additionally, I recommend including the following scopes to ensure your bot has comprehensive access to various Slack features:

- `channels:read`: To view basic information about channels.
- `channels:history`: To read messages in channels.
- `users.profile:read`: To read users' profile information.
- `im:read`: To read direct messages.
- `groups:read`: To read information about private groups.
- `chat:write`: To send messages.
- `users:read`: To read user information.
- `usergroups:read`: To access user group information.
- `files:read`: To access files in Slack.
- `team:read`: To read team-level information.

These scopes will provide your bot with the necessary permissions to interact seamlessly within your Slack workspace.

Set Up Bot Profile:
- In the "App Home" section, you can customize the bot’s display name and avatar. This helps personalize the bot’s presence in Slack channels.
Note your app’s credentials:
- Make sure to record the Bot User OAuth Token from the "OAuth & Permissions" page, as this will be needed for authenticating API requests from your bot.

3.2. Enabling Event Subscriptions

Event Subscriptions in Slack allow your bot to react to events such as mentions, messages, or channel activity. To set up event subscriptions for your Slack bot, follow these steps:

Enable Event Subscriptions:
- In your Slack app’s settings, navigate to the "Event Subscriptions" section.
- Toggle the switch to enable event subscriptions. This will allow your bot to listen for specific events happening in your Slack workspace.
Provide Request URL:
- You will need to enter a Request URL. This URL is the endpoint where Slack will send event data. It’s the location where your server listens for events.
- If you are testing locally, you can use a service like ngrok to expose your local server to the internet.
- Ensure that your server can respond to Slack’s verification requests by returning the challenge parameter sent by Slack to confirm your endpoint.
Subscribe to Events:
- Under "Subscribe to Bot Events," select events that are relevant to your agent. For instance, you can subscribe to the app_mention event, which triggers when your bot is mentioned in a Slack channel.
- This ensures that your bot can receive messages whenever it is mentioned in Slack.

By completing these steps, your bot will be able to listen for Slack events and respond to them in real-time, allowing you to create a fully interactive experience for users.

4. Building AI-Powered Slack Features

4.1. Setting Up Agentica in a TypeScript Project

There are multiple ways to set up Agentica in a TypeScript project, depending on your preferences and requirements. Here are two common approaches:

Using the Agentica CLI:
Quickly set up a fully functional Slack Agent by running the following command:
```
npx agentica start slack-agent
```
The CLI will guide you through the setup process, including installing required packages, choosing your package manager, selecting the SLACK controller, and entering your OPENAI_API_KEY. Once done, Agentica automatically generates the necessary code, creates a .env file, and installs all dependencies.
Using a Pre-built Repository:
Alternatively, you can clone the wrtnlabs/agentica.slack.bot repository, configure the environment variables, and get started with a pre-made solution.

4.2. Defining AI Agent Functions with Type Annotations

You can define your AI agent’s functionality by creating TypeScript classes and specifying the input/output types. Here’s a simplified example of defining a file system agent class:

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

dotenv.config();

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

class FsClass {
  async __dirname(): Promise<string> {
    return __dirname;
  }

  async readdirSync(input: { path: string }): Promise<string[]> {
    return fs.readdirSync(input.path);
  }

  async readFileSync(input: { path: string }): Promise<string> {
    return fs.readFileSync(input.path, { encoding: "utf-8" }) as string;
  }

  async writeFileSync(input: { file: string; data: string }): Promise<void> {
    return fs.writeFileSync(input.file, input.data);
  }
}

export const FileSystemAgent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: openai,
    model: "gpt-4o-mini",
  },
  controllers: [
    {
      name: "File Connector",
      protocol: "class",
      application: typia.llm.application<FsClass, "chatgpt">(),
      execute: new FsClass(),
    },
  ],
});

For more detailed examples, including working with the file system module, check out this tutorial.

If you prefer to use a pre-built solution, you can use the Slack Connector provided by the wrtnlabs team.

4.3. Handling Slack Events with AI Responses

Entire Code → https://github.com/wrtnlabs/agentica.slack.bot/blob/main/src/app.controller.ts

The code you provided demonstrates how to integrate Agentica with Slack to handle events and generate AI-powered responses using OpenAI's GPT model. The process involves receiving Slack events, particularly when the bot is mentioned, and responding with intelligent replies powered by AI. Here’s a breakdown of how this integration works:

4.3.1. Handling Slack Interactivity Events

The handleInteractivity method is designed to handle incoming interactivity requests from Slack. This method:

Verifies the URL: If the event type is url_verification, it returns the challenge parameter to complete the Slack app verification process.
Handles app_mention Events: The bot only processes events where it’s mentioned (app_mention). It checks if the event is a mention and if the bot hasn’t already responded to avoid duplicate processing.
Checks for Duplicated Events: The method uses the cacheManager to store the event and prevent overlapping responses.

4.3.2. Ensuring the Bot Responds Only to Relevant Mentions

Bot Mention Validation: The bot checks if it’s being explicitly mentioned by verifying if the event’s text contains the bot’s user ID (<@bot_id>).
Preventing Self-Responses: The bot avoids responding to its own messages by checking if the event’s user matches its own user ID.
Thread Locking: To prevent multiple responses in the same thread simultaneously, a lock mechanism is used (threadLock map) to ensure that only one request is processed at a time for each thread.

4.3.3. Processing Thread Replies and Building History

Retrieve Thread Replies: The bot fetches the conversation history (replies in the thread) using the slackService.getReplies method.
Excluding Bot’s Own Replies: If the last reply was sent by the bot, it avoids sending another response.
Building Conversation History: The bot constructs a conversation history (histories array) from the thread’s replies. This history will be used to maintain context when generating a response using Agentica.

4.3.4. Generating AI Response

Creating the Agentica Instance: The bot initializes an Agentica instance, passing in the OpenAI API, the conversation history, and any necessary controllers (like the GitHub and KakaoMap connectors). The systemPrompt is defined to guide the AI’s behavior during the conversation.
Generating and Sending the Response: The AI generates a response based on the latest message in the thread. The response is filtered to extract text and sent back to Slack as a reply.

4.3.5. Response Handling and Final Steps

Sending the Final Answer: The bot checks for a valid response (lastAnswer) and sends it back to the Slack thread using slackService.sendReply.
Releasing the Thread Lock: After processing, the lock is released, allowing the bot to process future events.

This code implements a Slack bot that listens for mentions, collects conversation history from thread replies, and uses AI (via Agentica) to generate responses. The response is then sent back to Slack, enhancing the interaction with intelligent, context-aware messages.

This structure ensures the bot responds only when appropriate, prevents overlapping responses, and uses AI to provide meaningful answers based on the context of the conversation. It’s an efficient way to integrate AI into Slack workflows while avoiding redundant or conflicting replies.

5. Processing Slack Messages with LLMs

5.1. Managing Slack Conversation History with Agentica

Agentica leverages Slack threads to manage conversation history when handling Slack message events. Instead of storing data separately in a database, Agentica retrieves and uses the content of the thread associated with the event. Each Slack thread serves as a container for the conversation history, and the LLM references this history to generate responses.

When a user interacts with the Slack bot, Agentica fetches the replies within the thread to build the conversation history, which guides the LLM in generating a response. By automatically managing the conversation history in this way, the bot can provide contextually relevant responses without needing an external storage system.

5.2. Generating Context-Aware Responses

By utilizing the conversation history within the Slack thread, Agentica ensures that responses reflect the context of the entire conversation. This approach prevents repetitive or contextually irrelevant answers, keeping the dialogue natural and relevant.

Since threads act like a database, users can continue interacting within the same thread, maintaining the flow of the conversation. Additionally, users can call the agent in the middle of a conversation, and the agent will seamlessly generate responses without interrupting the flow. Even when the agent is invoked during a conversation, the context is preserved, allowing for smooth interaction and maintaining the conversation without any issues.

5.3. Generating Context-Aware Responses

Agentica uses Slack threads as a sort of database to manage the context of conversations. Each Slack thread plays a key role in maintaining the flow of a discussion. When an event is received, Agentica fetches the content of the thread and understands how the conversation has progressed. This allows the conversation to continue naturally, with all interactions in Slack being part of a single cohesive flow.

What's interesting is that users can call the agent at any point, even while having a conversation with another person in Slack. For instance, if a user is chatting with a colleague and then calls the agent, the agent can pick up on the conversation’s context and generate an appropriate response. During this process, there is no need to manually store or manage previous conversations or messages—the Slack thread itself takes care of this. This means that calling the agent in the middle of a conversation doesn't cause any issues.

6. Conclusion & Future Directions

6.1. Lessons Learned from Using Agentica for Slack Bots

By integrating AI with a popular business tool like Slack, the service has become much more user-friendly and useful. AI is often said to augment human capabilities, but it does more than that—it also enhances existing services, making them more attractive and integrated. This approach not only improves user experience but also drives customer satisfaction, making products more loved by their users. This is why service developers, not just AI specialists, need to pay more attention to integrating AI into their products. It's not just the domain of AI developers; it’s a broader opportunity that can add tremendous value to any service, making it more compelling and efficient.

6.2. Potential Improvements and New Features

Through the use of Agentica, we’ve learned that relying on Slack messages alone may sometimes limit the ability of LLMs to recall deeper parts of the conversation. When an LLM processes multiple thought steps before delivering a response, but only one message is sent to Slack, the context from those intermediate steps can be lost. This can result in the LLM lacking context in future responses. To address this, we need to enhance memory management by storing and referencing the LLM’s deeper thought processes separately, ensuring that the context remains intact over time.

Additionally, expanding Agentica’s integration with other applications and improving API support will be important for allowing users to create more versatile and feature-rich bots. This can include handling conversations across different channels and providing more seamless interactions.

6.3. Open-Source Contributions and Next Steps

As an open-source project, Agentica thrives through contributions from the community. Moving forward, we aim to collaborate with users and developers to add more features, improve documentation, and provide examples that help others integrate AI-powered solutions into their own projects. By further refining the response generation logic and supporting integrations with more platforms, Agentica will empower service developers to create more intelligent, context-aware bots. Additionally, by offering real-time feedback and advanced configurations, we will help users create highly customized AI assistants tailored to their specific needs.

Understanding Snapshot Structures

Kyungsu Kang — Mon, 24 Mar 2025 03:55:06 +0000

Problem Situation 1

While running a post service, a user reported a post at some point.

By the time it was checked, the post had already been deleted, leaving no way to verify whether the user's claim was true.

Fortunately, modern developers use a technique called soft-delete to solve this problem.

Instead of actually deleting data, they record the deletion date and make the post invisible if the date exists.

By checking the list of deleted data, the reported post was found, and the issue was resolved.

However...

Problem Situation 2

One day, a user reported a post again.

Once again, the post had already been deleted, so an attempt was made to check the deleted content, but surprisingly, the post was empty.

Did the user lie? Checking the last modified time of the post, it appeared that something had been edited before deletion.

It turns out that the post author was a developer (!!!).

Before deleting the post, they edited the content, replacing it with spaces.

Since a database is just a table with rows and columns like an Excel sheet, once modified, the previous content is lost.

So how can this issue be solved?

Implementing a Snapshot Structure

Article ERD

To solve this issue, there is a concept called snapshots.

Developers often associate snapshots with replication, but what I mean here is not history.

Rather than thinking of it as a past record, consider it as existing data that varies based on time.

When watching a streaming video on YouTube, is the footage from one second ago a past video while the current frame is the present video?

The data exists according to the chosen point in time—it is not a past artifact.

To understand this concept, let's create a snapshot table.

Suppose we have an Article table with the following seven columns:

id
writerId
title
content
createdAt
updatedAt
deletedAt

Among these, the mutable columns are the title and content.

To create a snapshot structure, we extract these mutable columns into a separate table.

We now have an ArticleSnapshot table that stores these mutable columns.

The snapshots are stored separately, making Article hold a 1:N relationship with snapshots.

Instead of updating posts, we now create new snapshots—eliminating the need for DB update queries.
The latest snapshot represents the currently visible version of the post.

Lastly, we remove unnecessary columns.

Since updates no longer exist, updatedAt is unnecessary in Article.
Similarly, updatedAt and deletedAt are unnecessary in ArticleSnapshot.

If a post is modified, a new snapshot is created; if deleted, deletedAt is recorded in Article.

With this structure, we can track changes and even restore previous versions when needed.

Both images above represent the same concept.

The latest snapshot is the currently visible version of the post.

Now, since a snapshot is created for every modification, the problems we previously encountered can be resolved!

Another Use Case: Products & Shopping Carts

Snapshots can also be applied to products.

Whenever a product's name changes, a new snapshot is created.

If green-colored users represent those who added a product to their cart, we can gain interesting insights.

For example, how does the number of people adding a product to their cart change based on name modifications?

While users will always see the latest name, administrators may not need to.

This helps analyze whether name changes affect sales, which could be useful for vendors in a marketplace.

That's why snapshots are not past data but actively used data!

Benefits of Using Snapshots

Whenever a post is modified, a new snapshot is created, and the latest snapshot represents the current state.

But as mentioned earlier, previous snapshots are still useful:

To verify reported posts by checking their original content before deletion.
To track post contents at the time comments were made.
To allow users to restore a post to a previous version.
To analyze whether post modifications impact SEO positively or negatively.

In real-world scenarios, data rarely exists as a single node without historical tracking.

For example, if someone comments on a post and the author later modifies it, the comment might seem out of place.

What if a dispute arises, and someone requests the original post content at the time of the argument?

Again, snapshots are not past data but active, useful data.

Whether in posts, products, or shopping carts, snapshots are essential for understanding historical context and performing analytics.

Without a snapshot structure, companies may have to rely on data lakes, which can be extremely expensive.

Conclusion: My Company Doesn't Use Snapshots

Yes, most companies don’t use them, and they probably won’t.

I only encountered this concept at my current job, and I believe it's rare for the following reasons:

Small companies don't prioritize data analytics, and few people understand its value.
Backend developers don’t see the need to retain past data.
- Many think soft-delete is enough.
- Startups are focused on immediate problem-solving rather than long-term planning.
- This leads to simply adding columns per requirement.
If leadership doesn’t value data, developers who spend time on design may be seen as slow.

However, as companies grow, data becomes increasingly important.

At some point, customers will start requesting historical data.

How will you respond when they ask for it?

Without snapshots, companies may end up adopting expensive data lake solutions.

Wouldn’t it be better to avoid that cost altogether?

If you enjoyed this article, I’ll write another one about designing commerce or marketing ERDs!

Gmail Agent Built with TypeScript

Kyungsu Kang — Thu, 20 Mar 2025 08:22:39 +0000

Quickly Build a Gmail Agent with Agentica CLI

https://github.com/wrtnlabs/agentica

This tutorial shows you how to effortlessly set up a Gmail Agent powered by OpenAI's GPT model using the Agentica CLI. In just a few minutes, you can automate your email tasks and focus on what truly matters.

Easy CLI Setup

With Agentica’s latest CLI wizard, you can start your project without any hassle. Open your terminal and run:

npx agentica start gmail-agent

This command launches the Agentica Setup Wizard, which will guide you through:

Installing the required packages
Choosing your package manager and project type
Selecting the GMAIL controller
Entering your OPENAI_API_KEY

After you complete the wizard, Agentica automatically generates your code, creates a .env file, and installs all dependencies.

Overview of the Generated Code

Once setup is complete, you’ll get a code template like the one below:

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

import { GmailService } from "@wrtnlabs/connector-gmail";

dotenv.config();

export const agent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: new OpenAI({
      apiKey: process.env.OPENAI_API_KEY!,
    }),
    model: "gpt-4o-mini",
  },
  controllers: [
    {
      name: "Gmail Connector",
      protocol: "class",
      application: typia.llm.application<GmailService, "chatgpt">(),
      execute: new GmailService(),
    },
  ],
});

const main = async () => {
  console.log(await agent.conversate("What can you do?"));
};

main();

This template sets up your Gmail Agent to interact with Gmail using OpenAI’s GPT model.

Setting Up Google API Credentials

Before running your agent, add your Google API credentials to the .env file in your project root:

OPENAI_API_KEY=your-openai-api-key
GMAIL_CLIENT_ID=your-gmail-client-id
GMAIL_CLIENT_SECRET=your-gmail-client-secret
GMAIL_REFRESH_TOKEN=your-gmail-refresh-token

To get these credentials:

Create a project in the Google Cloud Console and enable the Gmail API.
Generate OAuth 2.0 credentials to obtain your Client ID, Client Secret, and Refresh Token.

What Your Agent Can Do

Your Gmail Agent will:

Process Gmail Data: Use the GmailService connector to read, search, and manage emails.
Handle Natural Language Commands: Leverage OpenAI's GPT model to understand and process your requests.
Ensure Type Safety: Utilize typia to maintain robust type safety.
Manage Credentials Securely: Use dotenv for safe and easy environment variable management.

Selective Function Exposure

For enhanced security and easier maintenance, you can choose to expose only specific functions using TypeScript’s Pick utility. For example, to include only functions for creating drafts, finding emails, sending emails, deleting email lists, and hard deleting, you can configure your agent as follows:

export const GmailAgent = new Agentica({
  model: "chatgpt",
  vendor: {
    api: openai,
    model: "gpt-4o-mini",
  },
  controllers: [
    {
      name: "Gmail Connector",
      protocol: "class",
      application: typia.llm.application<
        Pick<
          GmailService,
          | "createDraft"
          | "findEmails"
          | "deleteMailList"
          | "sendEmail"
          | "hardDelete"
        >,
        "chatgpt"
      >(),
      execute: new GmailService({
        clientId: process.env.GMAIL_CLIENT_ID!,
        clientSecret: process.env.GMAIL_CLIENT_SECRET!,
        secret: process.env.GMAIL_REFRESH_TOKEN!,
      }),
    },
  ],
});

This selective exposure makes your integration more secure and easier to maintain.

Conclusion

By using the Agentica CLI, you can build an AI-powered Gmail Agent in just a few minutes—without the hassle of manual setup. Say goodbye to repetitive email tasks and free up your time for more important work.

Start building your Gmail Agent today and experience the benefits of smart email automation! 🚀

TypeScript Deep Dive: Mastering DeepStrictOmit, DeepStrictPick, and DeepStrictAssert

Kyungsu Kang — Sat, 11 Jan 2025 06:57:22 +0000

TypeScript Deep Dive: Mastering `DeepStrictOmit`, `DeepStrictPick`, and `DeepStrictAssert`

Introduction

When building robust TypeScript applications, maintaining type safety across deeply nested objects can be a challenge. Enter DeepStrictOmit, DeepStrictPick, and DeepStrictAssert — powerful utilities to navigate, manipulate, and validate deeply nested structures while preserving TypeScript’s strong typing capabilities.

In this article, we’ll explore these utilities in depth, showcasing their use cases and providing practical examples to help you master them. By the end, you’ll be equipped to handle even the most complex TypeScript structures with ease.

Why These Utilities Matter

In real-world applications, we often encounter deeply nested data structures that require precise transformations or validations. Common challenges include:

Omitting keys at various depths
Picking specific keys from deeply nested objects
Validating the presence of keys dynamically

Traditional approaches can be cumbersome, error-prone, or lose type safety. That’s where DeepStrictOmit, DeepStrictPick, and DeepStrictAssert shine.

What is `DeepStrictOmit`?

DeepStrictOmit removes specific keys from deeply nested objects, ensuring type safety at every level. It extends the functionality of TypeScript’s built-in Omit to handle complex structures, including arrays.

Example

import { DeepStrictOmit } from "./types/DeepStrictOmit";

type Example = {
  id: string;
  details: {
    name: string;
    address: {
      city: string;
      zip: string;
    };
  };
};

type Result = DeepStrictOmit<Example, "details.address.city">;
// Result: {
//   id: string;
//   details: {
//     name: string;
//     address: {
//       zip: string;
//     };
//   };
// }

Key Features

Omits properties at any depth using dot notation (e.g., details.address.city).
Handles arrays seamlessly with [*] notation.

What is `DeepStrictPick`?

DeepStrictPick is the counterpart to DeepStrictOmit. It allows you to extract specific keys from deeply nested objects while maintaining precise type definitions.

Example

import { DeepStrictPick } from "./types/DeepStrictPick";

type Example = {
  a: number;
  b: number;
  c: {
    d: string;
    e: string;
    f: {
      g: boolean;
      h: boolean;
    }[];
  }[];
};

type Result = DeepStrictPick<Example, "c[*].f[*].g">;
// Result: {
//   c: {
//     f: {
//       g: boolean;
//     }[];
//   }[];
// }

Key Features

Picks properties at any depth using dot and array notation.
Provides precise typing for extracted keys.

Introducing `DeepStrictAssert`

DeepStrictAssert validates that a given key exists within a nested object at runtime, while retaining its type safety. It’s particularly useful for dynamic validations in API responses or user inputs.

Implementation

import { DeepStrictAssert } from "./types/DeepStrictAssert";

const deepStrictAssert =
  <T extends object>(input: T) =>
  <K extends DeepStrictObjectKeys<T>>(key: K): DeepStrictPick<T, K> => {
    const keys = key.split(/(?:\[\*\])?\./g).filter(Boolean);

    const traverse = (input: any, keys: string[]): any => {
      const [first, ...rest] = keys;
      if (input instanceof Array) {
        return input.map(element =>
          typeof element[first] === "object" && element[first] !== null
            ? { [first]: traverse(element[first], rest) }
            : { [first]: element[first] }
        );
      } else {
        if (typeof input[first] === "object" && input[first] !== null) {
          return { [first]: traverse(input[first], rest) };
        }
        return { [first]: input[first] };
      }
    };

    return traverse(input, keys) as DeepStrictPick<T, K>;
  };

Example Usage

interface Example {
  a: number;
  b: number;
  c: {
    d: string;
    e: string;
    f: {
      g: boolean;
      h: boolean;
    }[];
  }[];
}

const data: Example = {
  a: 1,
  b: 2,
  c: [
    {
      d: "hello",
      e: "world",
      f: [{ g: true, h: false }],
    },
  ],
};

const result = deepStrictAssert(data)("c[*].f[*].g");
console.log(result);
// Output: { c: [{ f: [{ g: true }] }] }

Real-World Use Cases

API Responses:
- Extract or omit specific fields from complex API responses to shape the data as needed.
Form Validation:
- Validate deeply nested form inputs dynamically while keeping type safety.
Data Transformation:
- Transform nested structures in databases or data pipelines with precision.

Conclusion

DeepStrictOmit, DeepStrictPick, and DeepStrictAssert are game-changers for managing complex TypeScript types. They bring unparalleled precision, type safety, and ease of use to deeply nested data structures. Whether you’re working on APIs, forms, or data pipelines, these utilities will undoubtedly enhance your TypeScript toolkit.

This project and library are relatively new, so your understanding and support are greatly appreciated. Contributions, feedback, and bug reports are warmly welcomed to help us refine and improve these utilities further.

Ready to take your TypeScript skills to the next level? Try them out in your next project and experience the difference firsthand!