The experiment:

Use codex web (codex-1, “a version of OpenAi o3 optimized for software engineering”) and Codex CLI (GPT-5). https://github.com/openai/codex

I ran Codex CLI using WSL2 on Windows, in a bash terminal ran in visual studio.

A github repo was used (my personal website, with Next.js 15.4.5, Tailwind CSS, written in typescript.) and this was all built by Vercel. Codex Web watched the github repo and made pull requests in there.

Generate 2 prompts using GPT-5 for both web and CLI to use. Give CLI 1 try, web 4 tries and pick the best. 1 prompt is abstract, “write the best tech demo you can do in 1 prompt”, and the other is a concrete idea.

Write 1 prompt by hand, with my own concrete idea.

Go maximum vibe coding, no thinking, no brain, just accept whatever it produces.

See the outcomes.

Prompt 1 - GPT-5’s tech demo

You are generating a complete Next.js 13+ page (app directory) with TailwindCSS styling. Output ONLY code for one file named page.tsx. No explanations before or after the code block.

Project

Create a polished AI/3D/Audio Reactive Tech Demo showcasing modern frontend techniques.

Folder Location

extra/ai generated/codex/[tech demo]/page.tsx

Requirements

Environment:

Next.js (app directory)

TailwindCSS

You may use additional modern libraries (Three.js, react-three-fiber, drei, react-use, tone.js, framer-motion, shadcn/ui, etc.) but import them via npm packages.

Features:

Full-screen 3D Canvas (react-three-fiber + drei) with orbit controls.

Procedural terrain or animated geometry (noise-based or torus knot).

Particle system that responds to audio input (microphone or uploaded file).

Custom fragment shader applied to a mesh, editable live inside the page (a text editor panel).

Audio-reactive visuals: colors, particle burst, shader uniforms driven by FFT bands.

UI Controls (shadcn/ui components):

Tabs: Playground, Particles, Shader, Audio, Presets

Toggles/sliders for parameters (speed, particle count, shader uniforms, audio gain, etc.).

Presets:

Save/load to JSON.

Encode preset + shader in URL hash for shareable links.

Snapshot button: export canvas as PNG.

Dark/light mode following prefers-color-scheme.

Keyboard Shortcuts (show in modal):

Space: pause/resume

S: save PNG

R: reset camera

E: focus shader editor

UX & Performance:

Responsive layout (sidebar collapses on mobile).

Smooth animations (framer-motion).

Pause rendering when tab is hidden.

Show fallback message if WebGL/audio unavailable.

Structure:

Main layout: 3D canvas full screen + right sidebar with tabs.

Use Tailwind for styling, shadcn/ui for UI components (Tabs, Buttons, Sliders, etc.).

Organize into React components:

Scene (3D world)

Particles

ShaderToy

AudioAnalyzer

ControlsPanel

Code Quality:

TypeScript, functional React components.

Well-commented.

No external images/fonts (system fonts + procedural visuals only).

Deliverable

Output exactly one fenced code block containing the full page.tsx file. It must run if I save it to:
extra/ai generated/codex/[tech demo]/page.tsx

Make sure all features above are present and working.

CLI

Attempt #1: I input this, it started thinking for about 300 seconds (usually CLI does ~30 sec max in my experience) and then it started generating like mad. after about 500 seconds it seemed to crash and have made no changes. I will retry.

Attempt #2: It crashed, again.

Attempt #3: restart codex, fresh context. fixed path inconsistencies in prompt (only 1 place had CLI Tech Demo #1, other still was [Tech Demo].

Again, it crashed after 800 seconds, this time with a message:

🖐 stream disconnected before completion: Transport error: error decoding response body

Attempt #4: Because the web app seemed to have difficulties with a path, I included this sentence and re-ran it again, fresh context.

Be sure the path is build-safe

But sadly enough, again, it crashed.

Attempt #5: I had GPT-5 rewrite the prompt to be simpler, to not specify any techniques or frameworks, just the essence of what the page should be.

You are generating a complete page. Output ONLY code for one file named page.tsx. No explanations before or after the code block. Project: Create a polished AI/3D/Audio Reactive Tech Demo showcasing modern frontend techniques. Folder Location: extra/ai generated/codex/CLI Tech Demo #1/page.tsx. Requirements: The page must include a full-screen 3D canvas with orbit controls. It should render procedural terrain or animated geometry. It must include a particle system that responds to audio input from microphone or uploaded file. It must have a custom fragment shader applied to a mesh that can be edited live inside the page with a text editor panel. Visuals should be audio-reactive with colors, particle bursts, and shader uniforms driven by FFT bands. The UI should include tabs for Playground, Particles, Shader, Audio, and Presets, with toggles and sliders for parameters like speed, particle count, shader uniforms, and audio gain. Presets should be saveable and loadable as JSON and encode preset plus shader in the URL hash for shareable links. There should be a snapshot button to export the canvas as PNG. The page must support dark and light mode following the system setting. Keyboard shortcuts should be included and shown in a modal: Space to pause or resume, S to save PNG, R to reset camera, E to focus the shader editor. The layout must be responsive with the sidebar collapsing on mobile. Animations should be smooth. Rendering should pause when the tab is hidden. A fallback message should be shown if 3D or audio are unavailable. The main layout should be a full-screen 3D canvas with a right sidebar containing the tabs. Organize the implementation into components for Scene, Particles, ShaderToy, AudioAnalyzer, and ControlsPanel. Code must be well-commented, written in TypeScript with functional components. No external images or fonts may be used, only system fonts and procedural visuals. Deliverable: Output exactly one fenced code block containing the full page.tsx file. It must run if I save it to extra/ai generated/codex/CLI Tech Demo #1/page.tsx. Make sure all features above are present and working.

And again, a crash. Experiment failed.

Web

https://chatgpt.com/s/cd_68a32f0f52dc819182b64366928ea722

Attempt #1: It ran for about 6 minutes and had 4 versions. Only version 1 and version 4 seem to be able to have actually generated a diff and are able to create a pull request for.

Version 1: Deployment failed.

I submitted the error logs to codex web in version 1 to see if it would be able to fix it.

Usually, with my more simple prompting, deployments won’t fail. This is maybe the 2nd or 3rd time (of over 50 PR’s) a deployment has failed.

Attempt #2: After submitting the error logs it created something that deployed and said the following:

Moved the AI-generated tech demo page to a build-safe path and wired in the standard disclaimer component for creation-date display.

Introduced a dedicated client component that sets up the 3D canvas, audio analyzer, and control panel using React Three Fiber, Tone.js, and Radix UI widgets

Implemented microphone-driven FFT processing and an audio-reactive particle scene rendered with a custom shader

It created something!

image.png

It has scroll bars that are very inconvenient It wants my microphone’s access, whenever a sound is detected, the particles move abruptly. (immediatlely, no fluid movement at all)

The screen constantly spins around the 2 intersected shapes, they constantly change colours.

I can spin around it manually holding my LMB and moving my mouse, and zoom using my scrol wheel.

The sidepanel’s adjustments seem to work, but are very very limited. There is also a possibility for a snapshot, that downloads a .png but sadly enough the image is blanc.

Funny sidenote, when I disconnected my microphone, the center image turned black and a maximum zoom out happened.

I committed this version. I continued, telling it some things that aren’t right about it.

This currently isn't properly centered (I have horizontal and vertical scrolbars, that I shouldn't need to have) It's not clear what this tech demo should to The "control panel "on the right is not fully visible The snapshot download gave me an empty blanc image.

It worked! It improved. Funnily enough it has now hidden some buttons behind my navbar, I’ve seen codex do this before when I ask it to use the full screen. I almost always have to tell it again to keep my (sticky) navbar and footer in mind.

image.png

The snapshot function now works!

It pretty much fixed everything I specifically instructed it to. It didn’t properly show all buttons in the control panel, but my prompt for that was also ambiguous.

In my opinion, this quickly did most of what I asked it to. From here on you could start tweaking stuff to have it exactly your way.

Version 4: Deployment failed

Prompt 1 Conclusion

Winner by default is of course the web web version. I have never had the CLI crash on me before in my plentiful experience (less than a week).

Sadly enough you can only edit 1 version when re-prompting on web, So since there was no version immediately working from the start, I could only do 1 version. I was impressed by what it generated though, I felt like it wouldn’t be able to do something like this from just 1 prompt, as it sometimes fails with easier tasks already.

Prompt 2

With inspiration from GPT-5, I worked out the following:

Goal:

A simple interactive page that demonstrates real-time audio visualization.

Features:

Canvas with Animated Visuals

Runs full screen.

Shows smooth animation reacting to audio.

Audio Input

User can upload an audio file.

Optionally allow microphone input.

Visual Effects

At least one particle-based effect (e.g. dots or bursts).

At least one frequency-based effect (bars, waveform, or radial spectrum).

Visuals should change with beat, volume, or frequency spectrum.

Controls

Play / pause button.

Sensitivity slider to adjust reactivity.

Dropdown or toggle to switch between at least two visualization modes.

Responsiveness

Layout works well on desktop and mobile.

Controls adapt to small screens.

Fallbacks

Location & Tech

Create this page in /extra/ai generated/codex/[CLI/WEB] Tech Demo #2 Use any technologies you deem required for this page, please create a fully functioning page with above requirements in 1 go.

CLI

Attempt #1: It worked, and quick. It did it in <200 seconds, I didn’t really pay close enough attention to be precise.

Funnily enough it created it in ai generated, instead of ai-generated (the already existing folder)

So it followed my instructions quite closely.

For some reason I can’t access it through my navbar or the link it gave me (/extra/ai-generated/codex/CLI%20Tech%20Demo%20%232). But from what I can tell it might have something to do with my code that converts a file path to a readable url.

After telling it “I can’t reach the page using the link you gave me (insert their link) or using the navbar (http://localhost:3000/extra/ai-generated/codex/CLI Tech Demo /#2)” it renamed the path, and it worked.

image.png

image.png

It fulfills all the requirements (technically, there are 2 bugs though:)

Switching visualiser style only works when I enable/disable my microphone, otherwise it doesn’t do anything.

When an audio track is done playing, the play/pause button keeps displaying “pause”. It’s functionality is correct though. (starts playing the track again)

Update: it all worked fine on localhost, deploying live gave some errors. I input the logs into Codex CLI. Had to do this 2 times, it fixed it all and went live flawlessly after that.

Web

It again created 4 versions:

V1: 5 minutes

V2: 14 minutes

V3: 5 minutes

V4: 19 minutes