Add try-it page on Gateway usage example modal by PattaraS · Pull Request #21077 · mlflow/mlflow

PattaraS · 2026-02-23T14:57:43Z

Related Issues/PRs

#xxx

What changes are proposed in this pull request?

Adds an interactive "Try it" tab to the AI Gateway endpoint usage modal, letting users send requests directly to an endpoint from the UI.

How is this PR tested?

Existing unit/integration tests
New unit/integration tests
Manual tests

Does this PR require documentation update?

Does this PR require updating the MLflow Skills repository?

No. You can skip the rest of this section.
Yes. Please link the corresponding PR or explain how you plan to update it.

Release Notes

Is this a user-facing change?

No. You can skip the rest of this section.
Yes. Give a description of this change to be included in the release notes for MLflow users.

AI Gateway endpoint usage modal now includes a "Try it" tab for sending requests interactively from the UI, with support for both Unified (MLflow Invocations) and Passthrough (OpenAI, Anthropic, Gemini) APIs.

What component(s), interfaces, languages, and integrations does this PR affect?

Components

How should the PR be classified in the release notes? Choose one:

rn/none - No description will be included. The PR will be mentioned only by the PR number in the "Small Bugfixes and Documentation Updates" section
rn/breaking-change - The PR will be mentioned in the "Breaking Changes" section
rn/feature - A new user-facing feature worth mentioning in the release notes
rn/bug-fix - A user-facing bug fix worth mentioning in the release notes
rn/documentation - A user-facing documentation change worth mentioning in the release notes

Should this PR be included in the next patch release?

Yes should be selected for bug fixes, documentation updates, and other small changes. No should be selected for new features and larger changes. If you're unsure about the release classification of this PR, leave this unchecked to let the maintainers decide.

What is a minor/patch release?

Minor release: a release that increments the second part of the version number (e.g., 1.2.0 -> 1.3.0).
Bug fixes, doc updates and new features usually go into minor releases.
Patch release: a release that increments the third part of the version number (e.g., 1.2.0 -> 1.2.1).
Bug fixes and doc updates usually go into patch releases.

Yes (this PR will be cherry-picked and included in the next patch release)
No (this PR will be included in the next minor release)

github-actions · 2026-02-23T14:57:57Z

🛠 DevTools 🛠

Install mlflow from this PR

# mlflow
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/21077/merge
# mlflow-skinny
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/21077/merge#subdirectory=libs/skinny

For Databricks, use the following command:

%sh curl -LsSf https://raw.githubusercontent.com/mlflow/mlflow/HEAD/dev/install-skinny.sh | sh -s pull/21077/merge

PattaraS · 2026-02-23T15:02:57Z

/autoformat

Copilot

Pull request overview

This pull request adds an interactive "Try it" tab to the Endpoint Usage Modal in the MLflow Gateway UI, allowing users to test API endpoints directly from the browser without writing code.

Changes:

Adds a new "Try it" tab with interactive request/response interface for testing gateway endpoints
Supports both Unified (MLflow Invocations) and Passthrough (provider-specific) API modes
Includes provider selection (OpenAI, Anthropic, Google Gemini) for passthrough requests

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

Copilot · 2026-02-23T15:03:22Z

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

+        {activeTab === 'try-it' && (
+          <div css={{ display: 'flex', flexDirection: 'column', gap: theme.spacing.md }}>
+            <Typography.Text color="secondary">
+              <FormattedMessage
+                defaultMessage='Edit the request body below and click Send request to call the endpoint. Choose Unified for the MLflow Invocations API, or Passthrough for provider-specific APIs (OpenAI, Anthropic, Gemini).'
+                description="Try it tab description"
+              />
+            </Typography.Text>
+            <div>
+              <Typography.Text bold css={{ display: 'block', marginBottom: theme.spacing.xs }}>
+                <FormattedMessage defaultMessage="API" description="API type selector label" />
+              </Typography.Text>
+              <SegmentedControlGroup
+                name="try-it-api-type"
+                componentId="mlflow.gateway.usage-modal.try-it.api-type"
+                value={tryItApiType}
+                onChange={({ target: { value } }) => {
+                  setTryItApiType(value as 'unified' | 'passthrough');
+                  setRequestBody(
+                    value === 'unified' ? DEFAULT_REQUEST_BODY_UNIFIED : getPassthroughDefaultBody(tryItProvider, endpointName),
+                  );
+                }}
+                css={{ marginBottom: theme.spacing.sm }}
+              >
+                <SegmentedControlButton value="unified">
+                  <FormattedMessage defaultMessage="Unified (MLflow Invocations)" description="Unified API option" />
+                </SegmentedControlButton>
+                <SegmentedControlButton value="passthrough">
+                  <FormattedMessage defaultMessage="Passthrough" description="Passthrough API option" />
+                </SegmentedControlButton>
+              </SegmentedControlGroup>
+            </div>
+            {tryItApiType === 'passthrough' && (
+              <div>
+                <Typography.Text bold css={{ display: 'block', marginBottom: theme.spacing.xs }}>
+                  <FormattedMessage defaultMessage="Provider" description="Provider selector label" />
+                </Typography.Text>
+                <SegmentedControlGroup
+                  name="try-it-provider"
+                  componentId="mlflow.gateway.usage-modal.try-it.provider"
+                  value={tryItProvider}
+                  onChange={({ target: { value } }) => {
+                    const provider = value as Provider;
+                    setTryItProvider(provider);
+                    setRequestBody(getPassthroughDefaultBody(provider, endpointName));
+                  }}
+                  css={{ marginBottom: theme.spacing.sm }}
+                >
+                  <SegmentedControlButton value="openai">OpenAI</SegmentedControlButton>
+                  <SegmentedControlButton value="anthropic">Anthropic</SegmentedControlButton>
+                  <SegmentedControlButton value="gemini">Google Gemini</SegmentedControlButton>
+                </SegmentedControlGroup>
+              </div>
+            )}
+            <div
+              css={{
+                display: 'flex',
+                gap: theme.spacing.md,
+                minHeight: 0,
+                flex: 1,
+              }}
+            >
+              <div css={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+                <div css={{ display: 'flex', alignItems: 'center', gap: theme.spacing.xs, marginBottom: theme.spacing.xs }}>
+                  <Typography.Text bold>
+                    <FormattedMessage defaultMessage="Request" description="Request body label" />
+                  </Typography.Text>
+                  <Tooltip
+                    content={
+                      <FormattedMessage
+                        defaultMessage='JSON body for the MLflow Invocations API. Use "messages" for chat or "input" for embeddings.'
+                        description="Request body tooltip"
+                      />
+                    }
+                  >
+                    <span css={{ cursor: 'help', color: theme.colors.textSecondary }} aria-label="Request help">
+                      ?
+                    </span>
+                  </Tooltip>
+                </div>
+                <Input.TextArea
+                  componentId="mlflow.gateway.usage-modal.try-it.request"
+                  value={requestBody}
+                  onChange={(e) => setRequestBody(e.target.value)}
+                  disabled={isSending}
+                  rows={10}
+                  css={{
+                    fontFamily: 'monospace',
+                    fontSize: theme.typography.fontSizeSm,
+                  }}
+                />
+              </div>
+              <div css={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+                <div css={{ display: 'flex', alignItems: 'center', gap: theme.spacing.xs, marginBottom: theme.spacing.xs }}>
+                  <Typography.Text bold>
+                    <FormattedMessage defaultMessage="Response" description="Response body label" />
+                  </Typography.Text>
+                  <Tooltip
+                    content={
+                      <FormattedMessage
+                        defaultMessage="Response from the endpoint after clicking Send request."
+                        description="Response body tooltip"
+                      />
+                    }
+                  >
+                    <span css={{ cursor: 'help', color: theme.colors.textSecondary }} aria-label="Response help">
+                      ?
+                    </span>
+                  </Tooltip>
+                </div>
+                <Input.TextArea
+                  componentId="mlflow.gateway.usage-modal.try-it.response"
+                  value={responseBody}
+                  readOnly
+                  rows={10}
+                  placeholder={
+                    sendError
+                      ? undefined
+                      : isSending
+                        ? undefined
+                        : 'Click "Send request" to see the response here.'
+                  }
+                  css={{
+                    fontFamily: 'monospace',
+                    fontSize: theme.typography.fontSizeSm,
+                    backgroundColor: theme.colors.backgroundSecondary,
+                  }}
+                />
+                {sendError && (
+                  <Typography.Text color="danger" css={{ marginTop: theme.spacing.xs }}>
+                    {sendError}
+                  </Typography.Text>
+                )}
+              </div>
+            </div>
+            <div css={{ display: 'flex', gap: theme.spacing.sm }}>
+              <Button
+                componentId="mlflow.gateway.usage-modal.try-it.send"
+                type="primary"
+                onClick={handleSendRequest}
+                disabled={isSending}
+              >
+                <FormattedMessage defaultMessage="Send request" description="Send request button" />
+              </Button>
+              <Button
+                componentId="mlflow.gateway.usage-modal.try-it.reset"
+                onClick={handleResetExample}
+                disabled={isSending}
+              >
+                <FormattedMessage defaultMessage="Reset example" description="Reset example button" />
+              </Button>
+            </div>
+          </div>
+        )}


🔴 CRITICAL: No test coverage exists for the new Try it tab functionality. The existing tests only cover the Unified and Passthrough tabs. Tests should be added to verify: request sending, error handling, API type switching, provider selection, response display, and state reset behavior.

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

Copilot · 2026-02-23T15:03:24Z

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

+                      ? undefined
+                      : isSending
+                        ? undefined
+                        : 'Click "Send request" to see the response here.'


🟢 NIT: The hardcoded placeholder text "Click 'Send request' to see the response here." doesn't match the actual button text "Send request" in the code (without quotes around "Send request"). For consistency, either add quotes in the button FormattedMessage or remove them from the placeholder.

Suggested change

: 'Click "Send request" to see the response here.'

: 'Click Send request to see the response here.'

github-actions · 2026-02-23T15:08:05Z

Documentation preview for 188815c is available at:

https://pr-21077--mlflow-docs-preview.netlify.app/docs/latest/

Changed Pages (1)

genai/governance/ai-gateway/endpoints/query-endpoints (modified)

More info

Ignore this comment if this PR does not change the documentation.
The preview is updated when a new commit is pushed to this PR.
This comment was created by this workflow run.
The documentation was built by this workflow run.

PattaraS · 2026-02-24T01:34:05Z

@copilot open a new pull request to apply changes based on the comments in this thread

PattaraS · 2026-02-24T07:27:17Z

/autoformat

PattaraS · 2026-02-24T09:24:25Z

/autoformat

TomeHirata · 2026-02-24T10:48:10Z

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

+
+  const tryItRequestUrl = useMemo(() => {
+    if (tryItApiType === 'unified') {
+      return `${base}/gateway/${endpointName}/mlflow/invocations`;


Why we don't allow users to try unified chat completion?

I missed that! Adding it now.

TomeHirata · 2026-02-24T10:50:26Z

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

+    }
+  }, [open]);
+
+  const tryItRequestUrl = useMemo(() => {


We already show urls for each endpoint type in the curl example, can we consolidate the mapping util?

TomeHirata · 2026-02-24T10:58:19Z

mlflow/server/js/src/gateway/components/endpoints/EndpointUsageModal.tsx

+    [tryItApiType, tryItProvider, endpointName],
+  );
+
+  const handleSendRequest = useCallback(async () => {


Can we extract the main logic to a util that calls the invocation api and returns the response or raise an exception?

Updated the PR with some refactor.

TomeHirata · 2026-02-24T11:00:58Z

Can we test if the test it functionality works even when auth is enabled?

github-actions · 2026-02-24T11:05:36Z

UI Preview for this PR has been removed.

PattaraS · 2026-02-24T16:38:34Z

Can we test if the test it functionality works even when auth is enabled?

I did that (also added a test)

TomeHirata · 2026-02-25T01:01:55Z

@PattaraS sorry for the back and forth, but I started to think it's semantically clearer if we locate the "try it" tab in the same level as curl or python. So the information structure would be (unified|passthrough) => (try it|python|curl). also, since the try it functionality is shared between unified and passthrough and has sizable complexity, we might want to create a child component for the try it functionality, and then use it in EndpointUsageModal to avoid making this component large. What do you think?

PattaraS · 2026-02-25T01:15:10Z

@PattaraS sorry for the back and forth, but I started to think it's semantically clearer if we locate the "try it" tab in the same level as curl or python. So the information structure would be (unified|passthrough) => (try it|python|curl). also, since the try it functionality is shared between unified and passthrough and has sizable complexity, we might want to create a child component for the try it functionality, and then use it in EndpointUsageModal to avoid making this component large. What do you think?

I think that makes sense. Will make a code change accordingly.

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

…ic-dangerous-direct-browser-access Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Copilot

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated no new comments.

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com> Signed-off-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com> Co-authored-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com>

Copilot AI review requested due to automatic review settings February 23, 2026 14:57

github-actions bot added the size/L Large PR (200-499 LoC) label Feb 23, 2026

Copilot started reviewing on behalf of PattaraS February 23, 2026 14:58 View session

github-actions bot added v3.10.1 rn/feature Mention under Features in Changelogs. labels Feb 23, 2026

github-actions bot removed the rn/feature Mention under Features in Changelogs. label Feb 23, 2026

Copilot AI reviewed Feb 23, 2026

View reviewed changes

Copilot AI mentioned this pull request Feb 24, 2026

Add "Try it" tab to AI Gateway endpoint usage modal #21086

Closed

10 tasks

github-actions bot added rn/feature Mention under Features in Changelogs. area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server labels Feb 24, 2026

PattaraS self-assigned this Feb 24, 2026

PattaraS requested review from TomeHirata and daniellok-db February 24, 2026 09:46

PattaraS changed the title ~~Add try-it page~~ Add try-it page on Gateway usage example modal Feb 24, 2026

TomeHirata reviewed Feb 24, 2026

View reviewed changes

PattaraS added the ui-preview Deploy UI preview on Databricks Apps label Feb 24, 2026

TomeHirata reviewed Feb 24, 2026

View reviewed changes

github-actions bot assigned TomeHirata Feb 24, 2026

PattaraS added 16 commits February 27, 2026 15:20

Refactor: move code used only by TryItPanel inside it to reduce scope

5e42efd

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Refactor: patterns for fetching hooks

14a3e25

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Refactor: use useMutation instead of useCallback

17112dd

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

UI: Spare one line for error

8be28e6

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Accessibility: use aria-live=polite

4f4e6f5

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

createTryItError helper

8ebeaf8

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Refactor: named constants

b779af0

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

add useTryIt test

007622a

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Remove keyword export

34bf8d1

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

remove duplicate logic

914082f

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

refactor: pattern

d8abac4

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Override header in gateway to prevent request from accepting Brotli

0e9ad25

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

For anthropic, pass an additional header to mark request with anthrop…

2d1ba8a

…ic-dangerous-direct-browser-access Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

rename

d585c8f

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Add a test for SUPPORT_ACCEPT_ENCODING

2d62848

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

Fix failing tests

188815c

Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>

PattaraS force-pushed the gateway-ui-based-invocation branch from a1cc759 to 188815c Compare February 27, 2026 08:20

PattaraS requested a review from Copilot February 27, 2026 08:25

Copilot started reviewing on behalf of PattaraS February 27, 2026 08:26 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

PattaraS enabled auto-merge February 27, 2026 08:53

PattaraS added this pull request to the merge queue Feb 27, 2026

Merged via the queue into mlflow:master with commit 6d221ef Feb 27, 2026
58 checks passed

PattaraS deleted the gateway-ui-based-invocation branch February 27, 2026 09:02

github-actions bot added size/XL Extra-large PR (500+ LoC) and removed size/L Large PR (200-499 LoC) labels Feb 27, 2026

	: 'Click "Send request" to see the response here.'
	: 'Click Send request to see the response here.'

Conversation

PattaraS commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issues/PRs

What changes are proposed in this pull request?

How is this PR tested?

Does this PR require documentation update?

Does this PR require updating the MLflow Skills repository?

Release Notes

Is this a user-facing change?

What component(s), interfaces, languages, and integrations does this PR affect?

How should the PR be classified in the release notes? Choose one:

Should this PR be included in the next patch release?

Uh oh!

github-actions bot commented Feb 23, 2026

Install mlflow from this PR

Uh oh!

PattaraS commented Feb 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PattaraS commented Feb 24, 2026

Uh oh!

PattaraS commented Feb 24, 2026

Uh oh!

PattaraS commented Feb 24, 2026

Uh oh!

TomeHirata Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PattaraS Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

TomeHirata Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

TomeHirata Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PattaraS Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

TomeHirata commented Feb 24, 2026

Uh oh!

github-actions bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PattaraS commented Feb 24, 2026

Uh oh!

TomeHirata commented Feb 25, 2026

Uh oh!

PattaraS commented Feb 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

PattaraS commented Feb 23, 2026 •

edited

Loading

github-actions bot commented Feb 23, 2026 •

edited

Loading

TomeHirata Feb 24, 2026 •

edited

Loading

TomeHirata Feb 24, 2026 •

edited

Loading

github-actions bot commented Feb 24, 2026 •

edited

Loading