How the OpenAI Codex JavaScript Sandbox works

blog.scottlogic.com
7 min read
fairly easy
The OpenAI Codex JavaScript Sandbox and the API which backs it, have (rightly!) generated a lot of interest and comment in the development community. When faced with something so different to what we expect, it's easy to assume it's all magic. In this post I'll peel back some of the layers and try to describe what's going on.
What is the OpenAI Codex JavaScript Sandbox?

If you've not seen the sandbox in action, here's the official demo video from OpenAI -

If you can't watch the video right now, I'd recommend finding some time. My short description of its features really isn't going to do it justice!

In simple terms, as a user you type your instruction into the query box and submit it. This query is submitted to an API which responds with some generated code intended to perform the instruction. This code is shown in the code panel down the right hand-side, as well as being executed in the main iframe.

Multiple instructions can be submitted and it is worth noting that the instructions build on each other. So for example, if you were feeling particularly uncreative, you could add an element with one instruction and then change its text in a subsequent instruction.

The sandbox can be reset by clearing all the generated code or refreshing the page. Alternatively you can remove an individual generated code block, which is useful as an undo if you've made a mistake. Finally, any of the generated code blocks can be manually edited if you're feeling suitably adventurous.

The real power of the sandbox is that it can handle far more complex and abstract instructions than my trivial example of adding and mutating an individual element. For example -

/* Create a registration form, accepting name, dob and email address */ var form = document . createElement ( ' form ' ); form . innerHTML = ' Name: ' + ' Date of birth: ' + ' Email: ' + ' ' ; document . body . appendChild ( form ); /* On submission, submit the data as JSON to an API endpoint called "/registration" using fetch */ form . addEventListener ( ' submit ' , function ( e ) { e . preventDefault (); var data = { name : document . getElementById ( ' name ' ). value , dob : document . getElementById ( ' dob ' ). value , email : document . getElementById ( ' email ' ). value }; fetch ( ' /registration ' , { method : ' POST ' , headers : { '…
Chris Price, View More Chris Price
Read full article