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

# Playground

> A batteries-included web host to test your server and share it with your beta testers

Every MCP workload hosted on Alpic gets its own custom **Playground**. It lets anyone try your app instantly with a preconfigured AI agent. It also contains instructions on how to connect it to their favorite AI client if they want to continue using it in their daily driver.

Use it for yourself to quickly test your app in production-like conditions. You can also share it with anyone to get early feedback before distributing on well-known platforms.

## Accessing the playground

Alpic playgrounds are available on the `/try` path of your project URLs.

For example, if your server URL is `https://my-server-123456.alpic.live`, the playground is accessible at `https://my-server-123456.alpic.live/try`.

<Frame caption="The Alpic Playground in action">
  <img src="https://mintcdn.com/alpic/wo8ce4mCwbbcnXbT/images/playground-light.png?fit=max&auto=format&n=wo8ce4mCwbbcnXbT&q=85&s=4584d7c6b4443df848eca9c0bfd0bcfe" alt="Alpic Playground" data-theme="light" className="block dark:hidden" width="2560" height="1349" data-path="images/playground-light.png" />

  <img src="https://mintcdn.com/alpic/wo8ce4mCwbbcnXbT/images/playground-dark.png?fit=max&auto=format&n=wo8ce4mCwbbcnXbT&q=85&s=b31709b0f2543745daea8abc46ca3867" alt="Alpic Playground" data-theme="dark" className="hidden dark:block" width="2560" height="1343" data-path="images/playground-dark.png" />
</Frame>

If you've configured a [custom domain](/distribution/domains), the playground is available at `https://your-custom-domain.com/try`.

If you're using [path prefixes](/distribution/domains#routing-multiple-environments-on-one-domain) to ship multiple environments of the same project on a custom domain, the playground for an environment with prefix `/v1` is at `https://your-custom-domain.com/v1/try`.

<Card title="Try a live playground" icon="play" href="https://everything.skybridge.tech/try">
  Open the Everything App playground to see view tools, MCP Apps, ChatGPT App widgets, app-initiated tool calls, display
  modes, and more.
</Card>

## Features

The Playground is a full MCP host in the browser. Use this table as the feature map.

| Feature | Support | Notes |
| - | - | - |
| **Core MCP** (tools, resources, prompts) | ✅ | Lists and calls tools, reads resources, honors `tools/list_changed`. Browse tools from **See Tools** in the sidebar. |
| **View tools** | ✅ | Tools that declare `_meta.ui.resourceUri` (MCP Apps) or `openai/outputTemplate` (Apps SDK) render their view inline in the chat. |
| **MCP Apps** ([`ext-apps`](https://github.com/modelcontextprotocol/ext-apps)) | ✅ | Sandboxed iframe + full `AppBridge` host surface. Recommended path for new apps. |
| **OpenAI Apps SDK** ([`window.openai`](https://developers.openai.com/apps-sdk)) | ✅ | Dedicated Apps SDK path, plus a compatibility shim injected into MCP Apps for common APIs. |
| **Display modes** | ✅ | `inline`, `pip`, `fullscreen`; `modal` via Apps SDK / `window.openai.requestModal`. |
| **Host context** | ✅ | Theme, platform, locale, host styles, container size, safe-area / device capabilities. |
| **Streaming tool input / results** | ✅ | Partial + final tool input, then tool result. |
| **Tool calling from apps** | ✅ | Apps call server tools (and can register their own) through the host bridge. |
| **Skills over MCP** | ✅ | Discovers `skill://` resources, exposes them to the model, and shows a **See Skills** browser in the sidebar. |
| **OAuth** (DCR + PKCE + refresh) | ✅ | Full browser-side flow. |
| **Custom headers** | ✅ | Declared in playground settings; attached to every request including app-initiated tool calls. |
| **Model selection + credits** | ✅ | Choose the model and manage credits from the dashboard. See [Customize the playground](#customize-the-playground). |
| **Installation guide** | ✅ | **Use in your app** in the playground sidebar walks through connecting to 10 AI clients with copyable snippets. |

## Customize the playground

Configure the playground from the **Distribution > Alpic Playground** section of your project in the Alpic dashboard, or
with the [`alpic playground` CLI commands](/cli/playground-configure).

### Enable or disable

The playground is **enabled by default** for all environments. Toggle it off if you don't want to expose the `/try`
page.

### Model selection

Choose the model from the **model dropdown** next to the enable toggle in the Distribution tab. It applies to every
conversation in that environment immediately.

Available models:

* **Claude Haiku 5.5** *(default)* - Anthropic's fast, cost-efficient model for quick testing and demos.
* **Claude Haiku 4.5** - The previous Haiku model, still available as an explicit choice.
* **Claude Sonnet 5.5** - Anthropic's more capable model for complex reasoning and tool use.
* **GPT-5.4** - OpenAI model.
* **GPT-5.5** - OpenAI model.
* **GPT-6 Luna** - OpenAI model.
* **GPT-6.1 Sol** - OpenAI model.

<Info>
  Credit usage depends on the model and the length of the conversation. Claude Haiku 5.5 is the default for
  cost-efficient testing. Existing playgrounds using Haiku 4.5 or Sonnet 4.5 are automatically upgraded to the matching
  5.5 model.
</Info>

### Credits

Each team on Alpic receives **\$5 of free credits** to power playground conversations. Credits are shared across all
projects within the team and deducted after each AI response (amount depends on the [model](#model-selection)).

When credits run out, the playground pauses until the team adds more from team billing.

### Edit Playground settings

Click **Edit Playground** to configure:

* **Server name** - Displayed in the playground header (1-100 characters).
* **Server description** - Shown on the welcome screen and given to the AI as context (1-500 characters).
* **Example prompts** (up to 5) - Quick-start suggestions on the welcome screen. Each has a title and a message sent on
  click.

<Tip>
  **Example prompts are a great way to onboard new users.** Pick prompts that showcase what makes your plugin unique.
</Tip>

<Frame caption="Configure example prompts from the Distribution settings">
  <img src="https://mintcdn.com/alpic/f_cBrR0gBCS6M6zc/images/distribution-configuration.png?fit=max&auto=format&n=f_cBrR0gBCS6M6zc&q=85&s=c2a4e92fa7ca78e1047c54bef5d3f84f" alt="Distribution configuration" width="2974" height="1566" data-path="images/distribution-configuration.png" />
</Frame>

### Custom headers

If your MCP server needs authentication or other parameters as headers, declare **custom headers** in the playground
settings. They are collected in the browser and attached to every request, including app-initiated tool calls.

* **Required headers** - Users must fill them in before sending messages.
* **Secret headers** - Shown as password fields.

### Installation guide

**Use in your app** in the playground sidebar opens step-by-step instructions for ChatGPT, Claude (Web, Desktop, Code),
Cursor, VS Code, Codex, Gemini CLI, Goose Desktop, Mistral Vibe, and a generic **Other** tab. Snippets are pre-filled
with your server URL and any required headers.


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