Skip to main content

UI Access & Notebook Integration

Remote SDK Access​

The MLflow Python SDK connects to remote tracking servers without special configuration:

import mlflow

# Connect to remote server
mlflow.set_tracking_uri("http://mlflow.company.com:5000")

with mlflow.start_run():
    mlflow.log_param("alpha", 0.5)
    mlflow.log_metric("rmse", 0.1)

Jupyter Notebook Integration​

Jupyter notebooks can embed MLflow UI components using iframes.

Cross-Origin Notebooks​

When notebooks run on a different domain than your MLflow server, configure CORS and frame options:

# Allow embedding from notebook domain
mlflow server --host 0.0.0.0 \
  --x-frame-options NONE \
  --cors-allowed-origins "https://jupyter.company.com"

Manual iframe Embedding​

Embed specific MLflow views directly in notebook cells:

from IPython.display import IFrame

# Embed MLflow UI
IFrame(src="http://mlflow.company.com:5000", width=1000, height=600)

Embedding in Web Applications​

Web applications can embed the MLflow UI using iframes.

React Application​

Create a component to display MLflow content:

function MLflowDashboard() {
  return (
    <iframe
      src="http://mlflow.company.com:5000/experiments/1"
      style={{ width: '100%', height: '800px' }}
      title="MLflow"
    />
  );
}

Configure the MLflow server to accept requests from your React app:

mlflow server --host 0.0.0.0 \
  --x-frame-options NONE \
  --cors-allowed-origins "http://localhost:3000,https://app.company.com"

Testing iframe Embedding​

Use this HTML file to verify iframe configuration works correctly:

<!DOCTYPE html>
<html>
<head>
    <title>MLflow iframe Test</title>
</head>
<body>
    <h1>MLflow Embedding Test</h1>
    <iframe
        src="http://localhost:5000"
        style="width: 100%; height: 600px; border: 1px solid #ccc;"
        onload="document.getElementById('status').innerHTML = '✅ Loaded'"
        onerror="document.getElementById('status').innerHTML = '❌ Failed'">
    </iframe>
    <div id="status">Loading...</div>
</body>
</html>