Reference architecture embeds SageMaker AI MLflow Apps UI in custom React portal

A how-to post walks through a reference architecture for embedding the Amazon SageMaker AI MLflow Apps UI inside a custom, SSO-integrated portal using a React front end, a Flask SigV4 proxy, an ALB, and AWS CDK for deployment.

A how-to post describes a scalable reference architecture for embedding the Amazon SageMaker AI MLflow Apps UI into a custom portal, demonstrating a way to deliver a persistent, bookmarkable MLflow web UI integrated with internal tooling and single sign-on. The walkthrough targets ML teams that need a consistent experiment — tracking interface that sits inside corporate portals rather than relying on transient presigned links or console access. This approach gives users a single portal URL and lets organizations centralize access controls without exposing AWS credentials in client apps.

The reference stack centers on a React single — page application that serves branded static files from the /app path and hosts the MLflow tracking UI inside an iframe as the portal’s user-facing entry. Public traffic routes through an Application Load Balancer (ALB) as the external entry point, while deployment and orchestration for the stack are handled with the AWS Cloud Development Kit (AWS CDK). A Flask reverse proxy runs on Amazon EC2 instances behind the ALB and mediates requests between the portal and the managed MLflow backend.

Authentication and request handling are delegated to the Flask proxy. The proxy intercepts both UI and REST API calls, assumes a dedicated IAM role to obtain temporary credentials, signs outgoing requests with AWS Signature Version 4 (SigV4), and forwards them to the SageMaker AI MLflow Apps endpoint. To ensure the embedded UI renders properly, the proxy rewrites absolute MLflow URLs in HTML responses and strips X — Frame-Options headers so pages can load inside the iframe.

The post contrasts this pattern with common operational pain points: distributing presigned URLs does not scale for larger teams, and granting console access increases administrative overhead. Embedding MLflow inside an SSO-integrated portal enables CI/CD pipelines and automation scripts to interact with MLflow REST APIs using the same proxy endpoint, with SigV4 signing handled transparently by the proxy. For deployment and security, the ALB provides HTTPS termination, DNS and certificate integration, and a stable public URL-the post recommends adding ACM-managed certificates for production TLS.

Because SageMaker AI fully manages the MLflow backend, teams do not need to provision or patch servers for the tracking service; the tutorial closes with validation steps, security considerations, and cleanup procedures for the CDK-deployed stack.