DEV Community: MINYEONG KIM

Stop writing Python glue code for your AI Agents. Use YAML instead

MINYEONG KIM — Thu, 26 Mar 2026 05:57:20 +0000

Every time I wanted to build a multi-agent workflow—like having one AI write code and another review it—I hit a wall.

Existing frameworks are powerful, but they all forced me to write a massive amount of Python glue code. I had to define nodes, edges, state schemas, and classes just to get two agents to talk to each other.

I wanted something simpler. I wanted to say, "Agent A hands off to Agent B, and if the quality check fails, go back to Agent A," all without touching a single .py file.

So, I built aqm.

What is aqm?
aqm is an open-source orchestrator that lets you define complex AI pipelines in a single YAML file and run them directly via CLI.

No SDKs, no complex environment setups, and most importantly—no API keys required if you already have your favorite AI CLIs (like Claude or Gemini) configured.

Why YAML?
When you use YAML, your AI pipeline becomes portable. You can share a single file with a teammate, and they can run the exact same workflow instantly. It turns "code" into "configuration."

Key Features that save my sanity:
Multi-LLM Native: Use Claude for coding and Gemini for security reviews in the same flow.

Quality Gates: Built-in logic to auto-evaluate output. If the result is "Bad," the system triggers a retry or sends it back to a previous agent.

Token Optimization: I implemented 5 different context strategies that saved me 55-85% on token costs by only showing agents what they actually need to see.

Session Nodes: Perfect for "design meetings" where agents discuss back and forth until they reach a consensus.

A Quick 30-Second Example
Here is a simple pipeline where a developer agent writes code and a reviewer agent checks it. If the reviewer rejects it, it goes back to the developer.

YAML

agents:
  - id: developer
    runtime: claude
    system_prompt: "Implement: {{ input }}"
    handoffs: [{ to: reviewer }]

  - id: reviewer
    runtime: gemini
    system_prompt: "Review for security: {{ input }}"
    gate:
      type: llm
      prompt: "Is this production-ready?"
      max_retries: 3
    handoffs:
      - { to: deployer, condition: on_approve }
      - { to: developer, condition: on_reject }

You can run this entire flow with one command:
aqm run "Create a login form with JWT"

Give it a try!
I’ve made aqm entirely open-source (MIT License). I'm looking for fellow developers to break it, critique it, and tell me what's missing.

GitHub: https://github.com/aqm-framework/aqm

Quick Install: pip install aqm

I’d love to hear your thoughts:

Does a YAML-only approach fit your workflow?
What’s the one feature you wish your current agent framework had?

Chrome Extension for CSS Layouts: HTML Visualization

MINYEONG KIM — Sun, 12 Nov 2023 09:39:45 +0000

When working with layouts in CSS, aligning items within a box is crucial. For those just starting with CSS, understanding how items align can be challenging at first glance. During my mentoring sessions, I always recommended my students to visually draw lines for better clarity whenever they felt confused. To make this process easier, I developed a Chrome extension, moving away from the need to define such lines directly in CSS.

The concept of using this tool is straightforward. By clicking "Add Depth", you can see a border with a random color around your elements. Additionally, you have the flexibility to change the color, line style, and width size.

The structure of the source is user-friendly. You can set the details of the lines on the popup side, which then applies to the content.

On the content side, the extension checks all depth levels from the document and applies a border style that matches the data selected by the user.

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.depthSettings) {
    applyDepthStyles(request.depthSettings);
  }
});

function applyDepthStyles(settings) {
  document.querySelectorAll("*").forEach((element) => {
    const depth = getElementDepth(element);
    const setting = settings[depth];
    if (setting) {
      element.style.border = `${setting.width}px ${setting.style} ${setting.color}`;
    } else {
      element.style.border = "";
    }
  });
}

function getElementDepth(element) {
  let depth = 0;
  while (element.parentElement) {
    depth++;
    element = element.parentElement;
  }
  return depth;
}

You can view all the source code on github

The extension is currently under review for launch on the Chrome Store.

Thriving in the Workplace: Aligning Your Skills with Company Goals

MINYEONG KIM — Fri, 10 Nov 2023 11:11:34 +0000

I realized this after five years of working, and if you understand this, you would probably be loved at the company.

Lots of people often feel like their work and talents aren't fully seen or valued in their company. This could happen because they don't fully understand what the company is trying to achieve.

In this post, I'll talk about ways to do well in different kinds of companies.

Different companies have different aims and things they care about. For example, one company might want to do things quickly, while another might focus on error-free code in their work.

For a company, how much something costs and what they get from it are really important. They often think about how much money or benefit they'll get back from what they invest.

But we usually think from our own point of view. Like, we might use PHP that has legacy code, and I don't like that. But the company might not want to fix these problems and could even make things more complicated. This makes me unhappy.

However, if you look at it from the point of view of someone who owns a business, as long as the service works fine, they don't see a need to spend more money on it. Business owners might like developers who can make new things quickly more than those who worry a lot about making everything perfect.

Imagine if more users start using the service and problems start happening because of the way the code is written. This could mean the company has to spend more on servers and might have times when the service doesn't work. In this case, the business owner would probably want to spend money on making the system better to keep customers and not have to spend more on servers.

Now, the business owner might prefer developers who can make sure the system is strong and works well over those who can make new things quickly.

What a company wants and the kind of workers they look for can change depending on what's happening like this.

As a developer, if you make your skills match what the company wants and is trying to do, you're more likely to be valued in any company. This way of thinking helps you grow as a developer and also helps you have a successful career at the company.

It is recommended to prepare various competencies. If not, let's figure out which capabilities the company needs right away and go along.

Designing React Components for Reusability and Efficiency

MINYEONG KIM — Thu, 09 Nov 2023 11:26:05 +0000

This is about how I thought of ways to make taking care of all project on me easier.

When creating components, we usually encounter two distinct types:

Reusable components are built to be resuable across multiple parts of an application.

Non-Reusable components are tailored for a particular use case.

Now, let's learn how to build these components and spot some common slip-ups.

Reusable components

Here's a simple button component:

const Button = ({ color, text, onClick, size }) => {
  const styles = {
    backgroundColor: color || 'white',
    padding: size === 'large' ? '16px 32px' : '8px 16px',
    fontSize: size === 'large' ? '18px' : '14px',
  };

  return (
    <button
      style={styles}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

You can use this component into your project right away.

it is important to design reusable components so that anyone can use them even if they are distributed as open source.

But sometimes we make them non-reusable like this:

const Button = ({ color, text, size }) => {
  const dispatch = useDispatch();
  const isLoggedIn = useSelector(state => state.user.isLoggedIn);

  const styles = {
    backgroundColor: color || 'white',
    padding: size === 'large' ? '16px 32px' : '8px 16px',
    fontSize: size === 'large' ? '18px' : '14px',
  };


  return (
    <button
      style={styles}
      onClick={handleClick}
      disabled={!isLoggedIn}
    >
      {text}
    </button>
  );
};

In this component, you can see it relies on Redux. This means we can't easily use this button in a different project. It's not reusable anymore.

Non-Reusable components

Often, we need to create non-reusable components.

I'm taking a closer look at a common pattern many of us follow Here's to-do list.

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from '@/actions'; 

const TodoList = () => {
  const [task, setTask] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (task) {
      dispatch(addTodo(task));
      setTask('');
    }
  };

  const handleToggleTodo = (index) => {
    dispatch(toggleTodo(index));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li
            key={index}
            onClick={() => handleToggleTodo(index)}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

This code isn't too long, so you might think it's pretty easy to work with. But if you've ever come across a really long component, you know it can be tough to figure out what's happening.

To prevent complexity, you might want to consider using a custom hook.

Here's how the to-do list looks with a custom hook:

import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './actions';

const useTodos = () => {
  const [task, setTask] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (task) {
      dispatch(addTodo(task));
      setTask('');
    }
  };

  const handleToggleTodo = index => {
    dispatch(toggleTodo(index));
  };

  return {
    task,
    todos,
    setTask,
    handleAddTodo,
    handleToggleTodo
  };
};

export default useTodos;

You might think that a custom hook can be hard to grasp, but the idea is straightforward: if you want to manage and controll state or side effects, you can organize them all within a custom hook.

And we can make to-do list component like below.

import React from 'react';
import useTodos from './useTodos';

const TodoList = () => {
  const {
    task,
    todos,
    setTask,
    handleAddTodo,
    handleToggleTodo
  } = useTodos();

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li
            key={index}
            onClick={() => handleToggleTodo(index)}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Now, in the to-do list component, there's nothing about state management.
If you need to make changes related to state, you would only need to edit the custom hook file. This approach makes maintenance easier.