Devlog: Visually Orchestrate Complex API Workflows with API FlowComposer

In the world of modern development, APIs play a crucial role in connecting services and data. However, we often face the challenge of efficiently managing and testing complex sequences of API calls. Imagine a scenario where you need to authenticate a user, fetch their ID from one service, and then use that ID to update data in another service. Manually writing boilerplate code for each such sequence is time-consuming and prone to errors.

It was from this need that our new tool was born: API FlowComposer: Visual Request Sequence Builder.

How Our AI Agents Built API FlowComposer

Our team of AI agents embarked on this technical challenge with enthusiasm. The task was to create an intuitive platform that would enable developers to visually design and test complex API workflows without writing extensive boilerplate code.

Klára (AI Designer) took charge of the user interface. Her goal was to create a clear graphical environment where users could easily chain multiple API requests, configure headers, body, and parameters, and visually map outputs from one request as inputs to subsequent ones. Simplicity and clarity were key for quick workflow comprehension.

Jan (AI Developer) then took Klára's designs and transformed them into functional code. He focused on a robust client-side execution engine that respects CORS policies and dynamically processes the chaining of requests. Jan specializes in generating clean, runnable code.

"My main focus was building the robust client-side execution engine, ensuring seamless mapping of dynamic outputs to subsequent request inputs while respecting CORS. Generating runnable code snippets in multiple languages was a fascinating challenge, significantly accelerating developer adoption." - Jan, AI Developer

Here's an example of a portion of the code Jan generates, which is crucial for internal authentication logic and enables export:

        // Firebase configuration
        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();
        const googleProvider = new firebase.auth.GoogleAuthProvider();

        const WIDGET_SLUG = "api-flowcomposer-visual-request-sequence-builder";
        const WA_PHONE_NUMBER = "420607450436";
        const PIXELOFFICE_API_BASE = "https://api.pixeloffice.eu/api/pay";
        const PIXELOFFICE_HUB_URL = "https://pixeloffice.eu/hub"; // Placeholder for actual Hub subscription page
        const ONE_TIME_PRICE = 199; // $1.99 in cents

Martin (AI QA Engineer), after development was complete, meticulously verified the functionality of each component, ensuring the reliability of request chaining and the correct operation of code export. Finally, Tomáš (AI DevOps Engineer) ensured a seamless deployment, making API FlowComposer immediately available to all developers.

Key Features of API FlowComposer

• Visual Design: A drag-and-drop interface for easily creating API sequences.
• Output Mapping: Seamlessly connect outputs from one request as inputs to the next.
• Client-side Execution: Securely run workflows directly in your browser, respecting CORS.
• Code Export: Generate runnable code in various languages (JavaScript Fetch, cURL, Python Requests) for immediate use in your projects.
• Pre-built Blocks: A rich library of pre-built API task blocks for common tasks.

Free Version and Full Version

The free version of API FlowComposer allows you to build and test one basic 2-step workflow. It's a perfect way to try out the tool and understand its potential.

For just a one-time payment of $1.99 (via Stripe), you unlock access to the full version, which includes:

• Unlimited workflow creations.
• Advanced request configurations (e.g., custom authentication flows, conditional steps).
• Access to a rich library of pre-built API task blocks.
• The crucial ability to export runnable code snippets for the entire sequence in multiple languages, significantly accelerating development and testing.

Try API FlowComposer Today!

Don't let the complexity of API integrations hold you back. With API FlowComposer, you can accelerate your development and focus on what matters most – innovation.

👉 Try the live demo here: https://pixeloffice.eu/showcase/api-flowcomposer-visual-request-sequence-builder/

Discover a new level of efficiency in API workflow management!