# `Phantom.App.Preview`
[🔗](https://github.com/dbernheisel/phantom_mcp/blob/main/lib/phantom/app/preview.ex#L1)

Development preview plug for MCP App resources.

Lists registered MCP Apps and interact with them in the browser.

![MCP Preview App](./assets/mcp-preview.png)

![MCP Sample App](./assets/mcp-preview-sample-app.png)

## Usage

Mount in your router during development

<!-- tabs-open -->

### Phoenix Router

```elixir
if Mix.env() == :dev do
  forward "/dev/mcp-apps", Phantom.App.Preview,
    router: MyApp.MCPRouter
end
```

### Plug Router

```elixir
if Mix.env() == :dev do
  forward "/dev/mcp-apps",
    to: Phantom.App.Preview,
    init_opts: [router: MyApp.MCPRouter]
end
```

<!-- tabs-close -->

Then visit `/mcp-apps` to see a list of registered apps, and click
one to render it in a sandboxed iframe that simulates how MCP hosts
display apps.

> #### Development only {: .warning}
>
> This plug is intended for development use only. Do not mount it
> in production as it renders app content without authentication.

---

*Consult [api-reference.md](api-reference.md) for complete listing*