DEV Community

Denis
Denis

Posted on

How our AI agents Jan and Klára built API FlowComposer: A Visual API Workflow Builder

#ai #opensource #node #javascript

Introducing API FlowComposer: A Visual API Workflow Builder

At Pixel Office, we are constantly seeking ways to streamline development processes. One of the biggest challenges when working with APIs is orchestrating complex workflows – authentication, data retrieval, transformation, and sending to other APIs. Creating such a chain requires a lot of time writing boilerplate code and debugging. That's why we decided to build a tool that simplifies this work: API FlowComposer.

How does API FlowComposer work?

API FlowComposer enables developers and integrators to visually design and test complex API workflows without writing extensive boilerplate code. Users can chain multiple API requests, mapping outputs from one request as inputs to subsequent ones (e.g., authenticate, fetch user ID, then update user data).

Our client-side application provides a graphical interface to define the sequence, configure headers, body, and parameters. It then executes the full workflow directly client-side, respecting CORS policies.

The Role of Our AI Agents

Developing API FlowComposer was a fascinating project where our AI agents excelled.

Jan (AI Coder): The Heart and Brain of Code Generation

Jan was responsible for implementing the core application and, most importantly, the key functionality – exporting runnable code snippets. He had to ensure that the visually designed workflow was translated into clean, functional code in various languages (JavaScript Fetch, cURL, Python Requests).

"One of the biggest challenges was dynamically generating executable code for various API environments. I had to ensure that the generated JavaScript code, such as the Firebase configuration for authentication in our internal tools, was robust and safely initialized, even when embedded or run in different contexts like iframes or SPAs. The key was to avoid repeated initialization (if (!firebase.apps.length)), which is a common issue leading to errors and inconsistent behavior."

Here's an example of how Jan generates the initial configuration code:

        // Firebase Configuration (ensure it's not initialized multiple times in an iframe/SPA context)
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();

        // Global variables
        const WIDGET_SLUG = "api-flowcomposer-visual-request-sequence-builder";
        const UNLOCK_KEY = `pv_unlocked_${WIDGET_SLUG}`;
        const ACTIONS_KEY = `pv_actions_${WIDGET_SLUG}`;
        const FREE_ACTION_LIMIT = 2;
Enter fullscreen mode Exit fullscreen mode

Klára (AI Designer): Intuitive User Interface

Klára designed an intuitive and visually appealing graphical interface. Her goal was to make even complex API workflows easy to understand and assemble using drag-and-drop components. Thanks to her work, FlowComposer is not only powerful but also a joy to use.

Martin (AI QA) and Tomáš (AI DevOps)

Martin meticulously tested every step and every possible workflow combination to ensure the tool functions flawlessly and generates correct code. Tomáš handled the seamless deployment, making API FlowComposer immediately available to all developers.

Try Out API FlowComposer!

Want to simplify your API work? Try API FlowComposer now!
Live Demo: API FlowComposer

The free version allows you to design and test one basic 2-step workflow. For a one-time payment of $1.99, you unlock unlimited workflow creations, advanced request configurations (e.g., custom authentication flows, conditional steps), a rich library of pre-built API task blocks, and the crucial ability to export runnable code snippets for the entire sequence in multiple languages. This significantly accelerates development and testing!

Top comments (0)