> ## Documentation Index
> Fetch the complete documentation index at: https://ngrok.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Compare Models in the Playground

> Send one prompt to up to three models in the app.ngrok.ai playground and compare their streamed answers side by side.

The playground in [app.ngrok.ai](https://app.ngrok.ai/playground) sends prompts through the AI Gateway from your browser.
Use it to try a model before you write any code, or to send the same prompt to up to three models and compare their answers side by side as they stream in.

Playground requests are real gateway requests.
They use one of your [access keys](https://ngrok.com/docs/ai-gateway/concepts/access-keys.md), they're billed like any other request, and they appear on the [Activity](https://app.ngrok.ai/activity) page.

## What you'll need

* An ngrok account. Sign in at [app.ngrok.ai](https://app.ngrok.ai).
* [Credits](https://ngrok.com/docs/ai-gateway/concepts/credits.md) in your AI Gateway account. Every request needs a positive balance, including requests that use your own provider keys.

## Open the playground

Select **Playground** in the app.ngrok.ai sidebar.

From any other page, you can open the playground as a side panel with the playground button in the page header.
Select **Open page** in the panel to switch to the full page.
The panel and the page show the same conversation.

## Compare models

The playground starts with one model selected. Its chip sits at the bottom of the message box, next to the key icon.

1. Select the key icon to choose an access key.
   Every model uses this key unless you [override it](#configure-each-model).
2. Select **+** (**Add model**) and pick a model to compare.
   Repeat to add a third model.
3. Type a prompt and press **Enter**, or select **Send message**.

Each model answers in its own column, streamed as tokens arrive.
Follow-up prompts go to every enabled model, and each model keeps its own conversation history.

![Playground in app.ngrok.ai with GPT-5.6 Luna and Claude Haiku 5.5 answering the same prompt side by side, and both model chips in the message box](https://mintcdn.com/ngrok/NtlJmMH9rvSW0IRo/ai-gateway/guides/img/playground-compare-models.png?fit=max\&auto=format\&n=NtlJmMH9rvSW0IRo\&q=85\&s=9d613b97313082c347db24a8c5df2efd)

The model list shows only models the access key can use.
If the key has an [access key configuration](https://ngrok.com/docs/ai-gateway/guides/access-key-configurations.md) that restricts providers or models, the rest are left out.

## Configure each model

Select a model's chip in the message box to open its settings:

| Setting | What it does |
| - | - |
| **Enable model** | Turn off to stop sending new prompts to this model. Its earlier answers stay in the conversation. |
| **Primary model** | Switch this column to another model. |
| **Fallbacks** | Select **Add fallback** to add [fallback models](https://ngrok.com/docs/ai-gateway/guides/configure-fallback-models.md) the gateway tries, in order, if the primary model fails. |
| **Override access key** | Send this model's requests with a different access key than the rest. |
| **Enable system prompt** | Add a system prompt for this model only. |

Models that support reasoning also show a thinking effort or budget setting, and models that can create images show image generation settings.

![Settings for one model in the playground, with Enable model, Primary model, Fallbacks with an Add fallback button, Generate images, Override access key, and Enable system prompt](https://mintcdn.com/ngrok/NtlJmMH9rvSW0IRo/ai-gateway/guides/img/playground-model-settings.png?fit=max\&auto=format\&n=NtlJmMH9rvSW0IRo\&q=85\&s=0f02103b852ce8a1777a9097f400564d)

## See what the gateway did

Select the **Response details** icon under an answer, or hover over it, to see:

* A timing waterfall with the time to the first token and the total time.
* The input and output tokens, when the model reports them.
* Which model answered, when a fallback answered for the primary model.
* **View in Activity**, which opens the request in the [request details panel](https://ngrok.com/docs/ai-gateway/observability/index.md#inspect-a-request-in-app-ngrok-ai) with its attempts, timing, and cost.

## Get the code

To make the same request from your app, open the **Playground actions** menu and select **Get code**.
The snippet reproduces the conversation with the first model, including its fallbacks.

## If your balance runs out

When your credit balance reaches \$0, the gateway rejects new requests, so the playground is covered by a **Purchase credits** form.
Pick an amount and complete the purchase. When your credits arrive, the form closes and you can send prompts again.
If you haven't saved a card yet, you add one in Stripe first, then return to the playground and confirm the purchase there. Saving a card doesn't charge you or add credits by itself.

![Purchase credits form covering the playground, with amounts from \$5 to \$100, a note that credits expire after 365 days, and an Add payment method button](https://mintcdn.com/ngrok/NtlJmMH9rvSW0IRo/ai-gateway/guides/img/playground-purchase-credits.png?fit=max\&auto=format\&n=NtlJmMH9rvSW0IRo\&q=85\&s=da7e71a3af7ec27b19b47727b5280c06)

See [Purchasing credits](https://ngrok.com/docs/ai-gateway/concepts/credits.md#purchasing-credits) for amounts and limits.

To avoid running out, turn on [automatic top-up](https://ngrok.com/docs/ai-gateway/concepts/credits.md#automatic-top-up).

## Limits

* **Models**: up to three models per prompt.
* **Access keys**: the access key menu lists only keys whose value ngrok.ai has stored, which is every key created since late July 2026. Older keys don't appear. If you have no usable key, the playground creates one named **Playground Key**.
* **Sessions**: conversations are saved in your browser under **Saved sessions**, not in your ngrok account, so they don't follow you to another browser or device.
* **Billing**: playground requests cost the same as requests from your app and count toward your usage.

## Next steps

* [Inspect a request](https://ngrok.com/docs/ai-gateway/observability/index.md#inspect-a-request-in-app-ngrok-ai): See attempts, timing, and captured bodies for a request
* [Configure fallback models](https://ngrok.com/docs/ai-gateway/guides/configure-fallback-models.md): Add fallbacks to requests from your app
* [Credits](https://ngrok.com/docs/ai-gateway/concepts/credits.md): How usage is billed and how to add credits
* [SDK integration](https://ngrok.com/docs/ai-gateway/sdks.md): Call the gateway from your code


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.