OpenAI Rilis Euphony: Tools Visualisasi Open-Source untuk Data Chat Harmony dan Log Session Codex

Debugging AI agent yang jalan puluhan langkah—baca file, panggil API, nulis kode, revisi output sendiri—itu beda banget sama debugging fungsi biasa. Nggak ada stack trace yang bisa kamu baca langsung. Yang ada malah ratusan baris raw JSON yang bikin pusing, dan kamu harus coba rekonstruksi sendiri apa yang model ini pikir dan lakuin di tiap step.

OpenAI akhirnya ngerilis solusi buat masalah ini: Euphony. Ini tools open-source berbasis browser yang dirancang buat ngeubah structured chat data dan Codex session logs jadi tampilan percakapan yang readable dan interaktif.

Euphony dibangun khusus buat dua format data milik OpenAI: Harmony conversations dan Codex session JSONL files. Kalau kamu kerja dengan gpt-oss atau Codex, tools ini bakal jadi sahabat baru kamu.

Sebelum ngerti kenapa Euphony penting, kamu perlu tahu dulu soal Harmony. OpenAI punya model open-weight series bernama gpt-oss yang dilatih pakai format khusus: harmony response format.

Bedanya sama format chat biasa, Harmony support multi-channel outputs. Artinya model bisa hasilin reasoning output, tool calling preambles, dan regular response—semua dalam satu structured conversation. Dia juga support role-based instruction hierarchies (system, developer, user, assistant) dan named tool namespaces.

Hasilnya? Satu file Harmony .json atau .jsonl bisa nyimpen metadata yang jauh lebih kaya dari typical OpenAI API response. Bagus buat training, evaluation, dan agent workflows. Tapi ya, bikin pusing kalau harus dibaca manual. Tanpa tools, kamu bakal staring at deeply nested JSON objects dengan token IDs, decoded tokens, dan rendered display strings yang nyampur-nyampur.

Euphony hadir buat nyelesain masalah ini. Intinya, Euphony itu web component library dan standalone web app yang bisa nge-proses Harmony JSON/JSONL data atau Codex session JSONL files, lalu ngerender jadi structured, browseable conversation timelines di browser.

Ada tiga cara load data: paste JSON atau JSONL langsung dari clipboard, load file .json atau .jsonl lokal dari disk, atau arahin ke public HTTP(S) URL yang serve JSON/JSONL—termasuk Hugging Face dataset URLs.

Euphony bakal auto-detect format dan render sesuai empat kasus: kalau JSONL-nya list of conversations, dia render semua conversations; kalau detect Codex session file, dia render structured Codex session timeline; kalau conversation disimpen under top-level field, dia render semua conversations dan treat field lain sebagai per-conversation metadata; kalau nggak match apa pun, dia fallback ke raw JSON objects.

Fiturnya nggak cuma basic rendering doang. Euphony punya metadata inspection panel buat lihat conversation-level dan message-level metadata langsung di UI. Berguna banget kalau kamu evaluate annotated datasets yang tiap conversation bawa extra fields kayak scores, sources, atau labels.

Ada juga JMESPath-based filtering buat narrow down large datasets dengan query over JSON structure. Focus mode bisa filter visible messages by role, recipient, atau content type. Grid view buat skimming datasets cepat. Editor mode buat langsung modify JSONL content di browser. Markdown rendering (termasuk mathematical formulas) dan optional HTML rendering juga didukung di message content.

Euphony punya dua operating mode. Frontend-only mode (set via VITE_EUPHONY_FRONTEND_ONLY=true) bikin seluruh app jalan di browser tanpa server dependency. Backend-assisted mode pake local FastAPI Python server yang handle remote JSON/JSONL loading, backend translation, dan Harmony rendering—cocok buat load datasets yang gede.

Salah satu fitur paling praktis buat AI dev teams: Euphony dirilis sebagai reusable custom elements. Ini standard Web Components yang bisa di-embed di frontend framework apa pun: React, Svelte, Vue, atau plain HTML.

Setelah build library dengan pnpm run build:library (output di ./lib/euphony.js), kamu bisa drop element <euphony-conversation> ke UI kamu dan pass Harmony conversation sebagai JSON string attribute atau parsed JavaScript object via DOM.

Visual styling fully overridable lewat CSS custom properties, mulai dari padding, font colors, sampai role-specific color coding buat user dan assistant messages. Tech stack-nya mostly TypeScript (78.7% codebase) dengan CSS dan Python backend layer, dirilis under Apache 2.0 license.

Practical takeaway buat kamu: kalau sering debug AI agents yang generate complex multi-step outputs, jangan buang waktu parse raw JSON manual. Euphony bisa langsung visualisasi Harmony conversations dan Codex sessions tanpa setup ribet.

Coba frontend-only mode dulu buat quick look, terus pake backend-assisted kalau datasets-nya gede. Dan kalau punya internal tools, embed Web Components-nya langsung—styling bisa disesuaikan sepenuhnya sama brand kamu.