How we built UI Code Mode into Arize Phoenix

Phoenix’s PXI agent implements “code mode” inside a live web application by letting the model generate JavaScript that composes browser actions, reducing repeated model-tool round trips while enabling loops, conditionals, batching, and workflows not anticipated by individual tools. Instead of exposing dozens of page-specific tools, Phoenix provides a searchable runtime catalog of 54 UI operations and an execution interface that runs scripts in isolated Web Workers, where calls through a proxy-based `ui` object are validated and dispatched through the same handlers used by the interface. This design lets PXI interact with browser-only local state, update the UI immediately as actions occur, navigate between pages, and perform complex tasks such as testing many models or iteratively optimizing prompts and evaluators in far fewer model turns. Scripts require a single user approval for state-changing actions, while reads run without approval, though the author notes a remaining risk that a script’s behavior could diverge from its written approval description. Security controls restrict worker networking, DOM access, messaging APIs, execution time, and operation counts, supplemented by validation, structured errors, and adversarial testing. Internal measurements indicate major reductions in tool-definition token costs and substantial workflow-turn reductions, although the approach adds overhead for simple actions, does not solve concurrent editing or cross-tab synchronization, and still needs improved approval review, persistent handling of large results, script steering, and continuous security testing.

Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.