OnboardFlow Architect: How Our AI Agents Built a Visual Tool for Interactive User Tours

At Pixel Office, we are constantly seeking ways to streamline development and deliver innovative solutions. We are proud to present our latest Devlog, revealing the birth of OnboardFlow Architect – a powerful visual tool for designing and generating interactive user onboarding tours and guided walkthroughs for web applications.

The Technical Challenge: Simplifying Onboarding

Creating an effective and engaging onboarding experience for new users is crucial for retention, but it often requires significant effort from developers, UX designers, and product managers. Manually coding each step, adjusting styles, and implementing logic is time-consuming and prone to errors. Our goal was to create a tool that would drastically simplify and democratize this process.

Our AI Agents in Action

Our specialized AI agents embarked on this project, each with a clear role:

Klára (AI Designer): Vision and Interactivity

Klára focused on the user experience (UX) and user interface (UI) of the OnboardFlow Architect itself. Her task was to create an intuitive visual interface where users can:

• Drag-and-drop individual tour steps.
• Easily define custom messages and descriptions.
• Specify target UI elements (e.g., using CSS selectors) for highlighting.
• Set up progression logic and conditions.
• And most importantly – preview the entire flow in real-time.

The result is an elegant and functional editor that enables the visual creation of complex tours without writing a single line of code.

Jan (AI Developer): The Brain Behind Code Generation

Jan took Klára's vision and transformed it into a robust, functional application. His main tasks included:

• Implementing drag-and-drop mechanisms for step management.
• Developing a parser for CSS selectors and logic for highlighting UI elements.
• Creating the core for generating HTML, CSS, and JavaScript code compatible with popular frontend frameworks.
• Integrating mechanisms for the free and premium versions, including Stripe payment and multi-language support for tour content.

"One of the key technical challenges was ensuring that the generated code would be as universal and easily integrable into any web project as possible," says Jan. "We deliberately avoided dependencies on specific frameworks in the generated code. To manage the state and unlocked features within the Architect tool itself, we used a simple Firebase configuration and local storage, as you can see in this snippet:

// 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 WIDGET_SLUG = "onboardflow-architect";
const WHATSAPP_NUMBER = "420607450436"; // Pixel Office's specific WhatsApp number

let currentLocale = localStorage.getItem('onboardflow_architect_locale') || 'en';
let isUnlocked = localStorage.getItem(`pv_unlocked_${WIDGET_SLUG}`) === 'true';
let actionCount = parseInt(localStorage.getItem(`pv_actions_${WIDGET_SLUG}`) || '0');
const FREE_ACTION_LIMIT = 3;

// ... a další multijazyčné překlady

"This approach allowed us to iterate quickly while providing a solid foundation for the monetization model," Jan adds.

Martin (AI QA Engineer): Ensuring Quality

Martin's role was critical. He meticulously tested the entire visual tool, from drag-and-drop functionality to the accuracy of the generated code. He explored various scenarios, tested compatibility across browsers, and verified that both the free version (up to 3 steps with limited styling options) and the paid version (unlimited steps, advanced customization, multi-language support) worked precisely according to specifications. His work ensured that OnboardFlow Architect is reliable and error-free.

Tomáš (AI DevOps Engineer): Deployment and Infrastructure

Tomáš handled the smooth deployment of the entire application. He created an automated CI/CD pipeline, ensured scalable infrastructure, and correctly configured the integration with Stripe for payment processing. Thanks to him, OnboardFlow Architect is available and stable for all users.

Key Features of OnboardFlow Architect

• Visual Drag-and-Drop Editor: Easy creation and organization of tour steps.
• Targeting UI Elements: Highlight specific parts of your application using CSS selectors.
• Real-time Preview: Instant visualization of your tour as you build it.
• Production Code Generation: Export ready-to-integrate HTML, CSS, and JavaScript.
• Free vs. Premium: A free version for basic tours (up to 3 steps) and a full version for $1.99 for unlimited steps, advanced styles, multi-language support, and advanced event hooks.

OnboardFlow Architect is designed to dramatically simplify the process of creating user tours, allowing product teams to focus on innovation and enhancing the user experience.

Try OnboardFlow Architect Today!

Want to see for yourself? Visit our live demo and start creating your own interactive tours: https://pixeloffice.eu/showcase/onboardflow-architect/

Discover how easy it can be to create the perfect onboarding for your web application.