When debugging AI agents, developers face more complex challenges than those encountered when debugging ordinary functions. These AI agents often involve multiple steps such as reading files, calling APIs, and writing code, and traditional stack trace methods are not applicable. To help developers analyze and understand the working process of AI agents more effectively, the OpenAI team has launched Euphony, an open-source browser visualization tool designed to convert structured Harmony chat data and Codex session logs into an easy-to-understand conversation view.
Euphony's core is a web component library and a standalone web application that can receive Harmony format JSON/JSONL data or Codex session JSONL files and display them in a structured conversation timeline within the browser. This tool features a user-friendly interface and supports loading data through various methods, including directly pasting JSON data, loading from local files, or loading data via a public URL. Euphony can automatically identify the data format and render it accordingly based on different situations.
In addition to basic rendering functionality, Euphony provides a rich metadata inspection panel that allows developers to view detailed metadata of conversations and messages within the user interface. This is especially useful when dealing with annotated datasets that include additional fields. Developers can also use a filtering feature based on JMESPath to precisely filter out the information they need. In addition, Euphony offers a focus mode, grid view, and in-browser editing capabilities, making it convenient for users to perform various operations on a single platform.
Euphony offers two modes of operation: front-end only mode and back-end assisted mode. In the front-end only mode, the entire application can run independently in the browser without relying on a server. In the back-end assisted mode, a FastAPI Python server is used to handle the loading and rendering of large datasets. This design fully considers the convenience and security of developers during the usage process.
For AI development teams, one highlight of Euphony is that it is provided in the form of reusable web components, which can be easily embedded into various front-end frameworks. Users can customize the style using CSS and flexibly adjust the appearance and style of the interface.
