Embedding Orquesta: AI Workflows in Any Web App

Originally published at orquesta.live/blog/embedding-orquesta-ai-workflows-web-app-2026-06-27

Seamlessly integrating AI-powered workflows into a web application is no small feat. At Orquesta, we embarked on a journey to create an Embed SDK that allows our AI capabilities to be injected into any web app via a single script tag. This article delves into the architectural decisions, authentication flow, and real-time update mechanisms that power this functionality.

The Challenge of Integration

When we set out to build the Embed SDK for Orquesta, our primary goal was simplicity and flexibility. We wanted SaaS products to harness the power of Orquesta’s AI capabilities without having to rebuild their infrastructure from scratch. The key was to make integration as simple as pasting a script tag into their HTML.

Architectural Decisions

Our architecture needed to ensure reliability, security, and scalability. We chose a microservices approach facilitated by serverless functions to handle different components of the integration process.

• Script Loader: The initial script tag is a lightweight loader written in plain JavaScript, fetching the necessary components asynchronously to minimize page load impact.
• Component Isolation: Each AI workflow component runs in an isolated iframe sandbox. This ensures no interference with the host application’s DOM and maintains security boundaries.
• Efficient Communication: For communication between the host app and our embedded components, we used postMessage API, providing a robust mechanism for cross-origin communication.

Authentication Flow

Security was paramount in our design. We implemented a token-based authentication system to authorize requests and ensure secure data interactions.

1. Token Generation: The host application generates an access token via our API, using their API keys and user credentials.
2. Secure Initialization: The token is passed to the script loader during initialization, which uses it to authenticate and establish a secure WebSocket connection.
3. Session Management: Tokens are ephemeral and refresh automatically to maintain session integrity without exposing sensitive data.

Real-Time Updates

Real-time feedback is a critical feature of Orquesta, ensuring users see AI actions as they occur. This was achieved through robust WebSocket implementations.

• Bi-directional Data Flow: WebSockets allow for a seamless bi-directional communication channel, enabling our agents to push updates instantaneously to the web app.
• Latency Management: Utilizing edge networks, we minimized latency, ensuring updates are propagated in near real-time.
• Scalability: The architecture supports scaling based on active connections, dynamically allocating resources as needed.

White-Label AI Operations

Our Embed SDK offers a white-label solution, enabling SaaS providers to brand the AI workflow experience as their own. This flexibility extends to UI customization and behavior adjustments, ensuring the embedded AI feels like a native part of their application.

• Custom Styling: SaaS providers can inject custom CSS into the iframe to match their brand aesthetics.
• Behavior Hooks: We offer hooks for lifecycle events such as workflow start, completion, and error handling, allowing deeper integration with the host app's logic.
• Localization Support: The SDK supports multiple languages, making it adaptable to a global audience.

Conclusion

Building an Embed SDK that integrates complex AI workflows into any web app required careful consideration of architecture, security, and user experience. The result is a powerful tool that allows businesses to effortlessly enhance their applications with AI capabilities, aligning perfectly with their branding and operational needs. At Orquesta, we believe in empowering teams with AI, and our Embed SDK is a testament to that vision.