# `A2UIPhoenix.Surface`
[🔗](https://github.com/a2ui-elixir/a2ui/blob/v0.1.1/umbrella/apps/a2ui_phoenix/lib/a2ui_phoenix/surface.ex#L1)

A LiveComponent that renders one surface of an `A2UIPhoenix.Session`.

    <.live_component
      module={A2UIPhoenix.Surface}
      id="surface-main"
      session={@a2ui}
      surface_id="main"
    />

Assigns: `:id`, `:session` and `:surface_id` (required); `:components`
— component functions by type, merged over
`A2UIPhoenix.Components.Basic.components/0` and
`A2UIPhoenix.Components.MCP.components/0`; `:markdown` and
`:mcp_sandbox` — see `A2UIPhoenix.Context`.

A surface created with a theme (protocols v0.9 and v0.9.1) shows it: `primaryColor`
becomes the `--a2ui-color-primary` custom property of the surface, and
`iconUrl` and `agentDisplayName` are shown above it, to say which agent
made it.

The component owns the surface's local UI state: the open tab, whether a
modal is open, a choice filter. Input that concerns the agent is sent to
the LiveView process, which owns the session:

  * `{A2UIPhoenix.Surface, surface_id, {:write, ref, property, value}}` —
    user input reached a two-way binding;
  * `{A2UIPhoenix.Surface, surface_id, {:invoke, ref, property}}` — the
    user triggered an action;
  * `{A2UIPhoenix.Surface, surface_id, {:mcp_app, ref, method, params, id}}`
    — an embedded MCP App sent a request (`id` is `nil` for a
    notification).

`A2UIPhoenix.Live` handles both.

---

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