Playground UI Update: UX Downgrade and Missing Features

[vmena]

Hello everyone,

I wanted to share my thoughts on the recent UI changes made to the OpenAI Playground, as they’ve significantly impacted my workflow. As you may have noticed, the new design includes changes that, unfortunately, diminish the user experience quite a bit.

Here are a few key issues I’ve encountered:

1. Chat Window Placement: The chat window is now relegated to a smaller space on the side of the screen. This makes it harder to interact with and navigate, especially since the configuration panel takes up a disproportionate amount of space. It would be helpful if users could resize these sections to suit their needs.
2. Removed Features: Several crucial features appear to be missing in the new UI:

• The ability to input an Assistant message, rather than just a User message, is no longer available. This was essential for simulating conversations more flexibly.
• The option to add messages without triggering a prompt has been removed, which disrupts the flow when trying to set up detailed scenarios.
• There’s no longer a one-click clear button to reset all messages, which complicates the process of starting fresh when experimenting.

These changes have made it more difficult to quickly iterate and test different scenarios, significantly reducing my productivity and limiting what I can accomplish with the model.

I hope OpenAI takes this feedback into consideration and reintroduces these functionalities. They’ve been vital for many of us who rely on the Playground for development and testing.

Looking forward to hearing if others are facing similar challenges and if there are any workarounds you’ve found useful.

[karolis]

Hi Vmena!
Thank you for sharing and really appreciate the feedback. We will definitely take this into account as we plan our next steps. A few notes on workarounds:

• The ability to input an Assistant message, rather than just a User message, is no longer available. This was essential for simulating conversations more flexibly.
• The option to add messages without triggering a prompt has been removed, which disrupts the flow when trying to set up detailed scenarios.

You can still do this in the Additional messages section (under the System Message).

You can also change roles, edit and rearrange the order of messages:

• There’s no longer a one-click clear button to reset all messages, which complicates the process of starting fresh when experimenting.

“Compose” button in the top left corner will clear all the messages in the chat (the right hand side panel).

[cahoover]

For what it’s worth, I 100% agree with this observation. It’s irritating that the model settings interface and developer message now consumes 50% of the screen. The smaller chat interface causes code samples to wrap, which can obscure the structure.

At least an option to return to the previous layout would be welcome.

[yashemes]

The most useless Playground ever. Cannot easily edit past messages (to optimize history length) requires scrolling and pressing the edit icon, no way to add messages without submitting a response, no easy way to see messages boundaries, the left side pane consumes too much space and no way to minimize it, the default is “store”: “True” which is dangerous for privacy, the “auto-clear” is a fringe feature that consumes too much attention.

[streamgy]

I would like to swear to, the edit, dumpster buttons are unclickable, but let’s respect that it’s companies decision to disappoint the users.

[_j]

@streamgy

dumpster buttons are unclickable

This TamperMonkey script is going to keep the message buttons “shown” in the Prompts playground by affecting the CSS - no need to hover.

It targets the particular class attributes with selectors having coded names that might be auto-generated the next update, so the lifetime could be limited.

The script

You can paste as the contents of a new script in the TamperMonkey extension dashboard:

// ==UserScript==
// @name         Playground Plus
// @version      2025.03.15
// @description  Make the API Prompts site readily usable
// @match        https://platform.openai.com/*
// @grant        none
// ==/UserScript==

(function() {
    const messagesCss = `
    .Wmjjd[data-variant=bare][aria-expanded=true]:before,
    .Wmjjd[data-variant=bare][data-state=open]:before,
    .Wmjjd[data-variant=bare][data-active]:before,
    .Wmjjd[data-variant=bare]:hover:before,
    .Wmjjd[data-variant=bare][aria-expanded=true]:hover:before,
    .Wmjjd[data-variant=bare][data-state=open]:hover:before,
    .Wmjjd[data-variant=bare][data-active]:hover:before {
      opacity: var(--button-bare-opacity-hover, .7) !important;
      transform: scale(1) !important;
    }
    ._5qprQ {
      opacity: 1 !important;
    }
    `;

    // Create a new <style> element and set its content to the CSS rules
    const styleElement = document.createElement("style");
    styleElement.textContent = messagesCss;

    // Append the new <style> element to the <head> section of the document
    document.head.appendChild(styleElement);
})();

(If you don’t know what this is, you’d already be viewing a chatbot in a playground you can ask).

No more need to wait 0.15 seconds after hover to see them!

You see how this script works to place a style → you can develop more customization.

[picard]

I have 2 wish list items @karolis

FYI - I’m using Firefox on macOS Ventura if any of this is browser specific.

1. I used to be able to hit Return in the prompt area without submitting the prompt. Now I need to use Shift+Return to avoid submission. I often forget to use Shift, which causes confusion. I much preferred the older behavior which required me to click the button to submit a prompt.

2. The response area is too narrow as mentioned previously. Providing the ability to resize the areas or collapse them would be super useful.

For other developers:
I used ChatGPT to create a bookmarklet that can toggle the middle window between hidden and visible. Fixes the width issue for me for coding. Here is the bookmarklet friendly code. I found the class name “gEVJr” using Web developer tools on Firefox.

javascript:(function(){let d=document.querySelector(“.gEVJr”);if(d){d.style.display=(d.style.display===“none”)?“block”:“none”;}})();

[_j]

@picard

I used ChatGPT to create a bookmarklet that can toggle the middle window between hidden and visible

Or it could be kept off until the browser width is increased even more.

Unfortunately, they’re using a javascript to write or strip the substitute “(gear) configure” direct to the HTML source, a button that brings up a pop-up version of that developer parameter pane only at viewports below 1024px. This button is necessary despite the other top bar controls, and it can’t be brought back unless you want to have script wars rewriting what they take away.

A handle for a splitter, or a collapse would be nice, instead of serving up responsive that is unresponsive to desires.