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

# Web UI

> Connect to Vexlo in a browser, find executions and inspect recorded calls and data.

The Vexlo web UI is the browser interface for recorded execution. Search recordings, follow
call graphs and timelines, and inspect captured inputs, outputs, errors and logs. Use it to
understand call flow, examine an unexpected result, compare retry attempts or inspect where an
execution spent time.

The server hosts the UI and HTTP API together. You can connect to a local instance or use the
URL of a shared server. For setup, use
[Install and run](https://docs.vexlo.ai/deployment/install.md) and [Central hosting](https://docs.vexlo.ai/deployment/central-hosting.md).

![Vexlo Graph view beside the selected pricing call's captured output.](https://mintcdn.com/vexlo-d15ac36e/rRJca0t154Rw5eS5/images/ui-trace-graph-detail.png?fit=max\&auto=format\&n=rRJca0t154Rw5eS5\&q=85\&s=41907a4ad01ce0f45f1144781538b29f)

Graph view with price\_order selected and its recorded output loaded.

[Open the full-resolution screenshot](https://docs.vexlo.ai/images/ui-trace-graph-detail.png).
Pan the graph to follow calls outside the pricing branch.

## Connect to an instance

You need the server URL and a read token issued for that server. For the default local
installation, open `http://127.0.0.1:8080`. For a shared instance, use the URL supplied by its
operator.

1. Open the server URL in your browser.
2. Enter the read credential in **Read token**, then choose **Connect**.
3. Select the relevant team and environment in the application bar.

An ingest token is not a UI credential. It is rejected by the connection screen. In a trusted
proxy or local no-auth deployment, the UI resolves the connection without a browser token.
See [Authentication](https://docs.vexlo.ai/deployment/authentication.md) for those deployment modes.

In bearer-token mode, the UI saves the credential in browser local storage when that storage
is available. **change token** clears the saved credential and returns to the connection
screen. A read request rejected with `401` also clears the bearer session and requests a new
credential, while retaining the current route.

## Navigate the workspace

The home screen accepts a trace ID or a tag value, such as a request identifier. A recognized
trace ID opens that execution directly. Other text starts a tag-value search. **Show All
Traces** opens the trace list without an identifier; **Traces** in the application bar returns
to that list from another screen.

The team and environment selectors set the scope of the workspace. A multi-team token can
select a team or **All my teams**. A single-team token displays its team without a selector.
**All environments** includes every environment in scope; **Unset** selects recordings with
no environment label.

![Vexlo home search containing order-1042 with Search and Show All Traces actions.](https://mintcdn.com/vexlo-d15ac36e/rRJca0t154Rw5eS5/images/ui-home-search.png?fit=max\&auto=format\&n=rRJca0t154Rw5eS5\&q=85\&s=e2b13fe67b1f6eb6d30347778424b558)

Find a recording with its request identifier.

[Open the full-size screenshot](https://docs.vexlo.ai/images/ui-home-search.png).

## Find an execution

On the Traces page, combine identifiers with service, time, function, duration and status
filters. Root status describes the entry point. **Has error** includes a failed call attempt
even when the request recovered. Recording completeness is a separate filter.

Open a result row to inspect the execution. Search results are paginated; sorting a visible
column reorders the current page rather than performing a new global sort. The
[Search traces](https://docs.vexlo.ai/guides/search.md) guide documents each control, scope and result behavior.

## Read the trace workspace

A trace opens with execution identity and status above the visualization, and a details panel
for the selected call. The main views organize the same loaded recording:

| View | Use |
| - | - |
| **Graph** | Follow recorded parent-child relationships and select a call or collapsed sibling group. |
| **Timeline** | Inspect start offsets, completed durations and overlapping work; select a call attempt. |
| **Table** | Search recorded calls by name, sort durations and select individual attempts. |
| **Raw** | Inspect trace JSON, including values fetched in this browser session and marked `clientFetched`. |

Selecting the root displays **TRACE DETAILS**. Selecting another call displays **STEP DETAILS**.
Large recordings can open in Table when their collapsed graph is too large; the other views
remain available. View changes use the loaded data, rather than fetching another trace.

Use [Explore execution graphs](https://docs.vexlo.ai/guides/execution-graphs.md) for call navigation, attempt selection
and timing. A recorded parent is the nearest instrumented parent; an uninstrumented helper
can exist between displayed calls in the source.

## Inspect a selected call

The details panel separates the call's metadata from its captured values:

| Tab | Contents |
| - | - |
| **Info** | Trace metadata at the root; selected attempt status, duration and start offset for a call. |
| **Input** | Captured arguments. |
| **Output** | Captured return value. |
| **Error** | Exception class and captured error details when reported. |
| **Logs** | Captured log entries when enabled and recorded. |
| **Code** | Function identity and counts of observed callers and callees. |

Values initially appear as previews. Use **fetch full value** when available to retrieve the
recorded bytes. The preview and the availability of full bytes are separate: storage retention
can remove bytes while leaving call metadata.

The Code tab is not a source-code browser or a complete relationship explorer. Use
[Understand function usage](https://docs.vexlo.ai/guides/function-usage.md) for observed caller/callee names and real
executions through the HTTP API, with equivalent MCP tools for agents.

[Inspect recorded values](https://docs.vexlo.ai/guides/values.md) covers encoded representations, truncation,
unavailable data and the current limits of full-value retrieval across retry attempts.

## Check quality and freshness

Read recording completeness independently of the root's status. A complete recording can
contain failed attempts; an incomplete one can omit evidence needed for a conclusion. Coverage
indicators identify reported loss, shedding, truncation and instance mismatches.

The trace list refreshes visible running traces every five seconds. An open detail page does
not poll for new calls; reload it to read updated data. The UI walks the trace's step pages
while loading, but an execution still receiving records is a changing observation.

## Agent access

An agent operating a browser uses the same connection, scope and inspection controls. For
structured queries, [connect the agent through MCP](https://docs.vexlo.ai/agents/connect.md). The
[HTTP API](https://docs.vexlo.ai/reference/http-search.md) also provides direct access to the recorded data.


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