LAB31

Today we created the entire internet, set in a dystopian future. Yeah.

Try it now. Type in any site into the address bar. Doesn’t matter whether that site exists or not… it will exist in a few seconds.

Try something straight forward like reddit.com
or got nuts and try something fun like “coca-cola.com/the-new-world-order/consumer-screening-program/info+signup“

An early and important shout-out for this experiment goes to one of our favorite platforms – websim.ai. They inspired us to build one for ourselves.

But what actually is it?

It’s a fake browser within your real browser. When you type in a URL, it’s not “surfing the web”, instead it’s sending your URL to ChatGPT as a creative brief to then invent a web page in real-time.

Here are some examples (featuring URLs imagined and written by us):

How it works

While there’s 1000+ lines of code crammed into this thing, the premise is rather simple. We’ve programmed ChatGPT to receive a URL entered into the address bar as the user’s input, and to throw everything it’s got (12,000 tokens) at creating a robust website with raw HTML and CSS, while adhering to our dystopian 2045 theme. This code is then rendered in real time.

Apart from boring json parsing issues, there were three key challenges we faced…

1. How do you make the buttons clickable?
Since there is no webpage on the other side of a button, we had to lace each button up with meta-data. When a button is clicked, the meta-data, the current page’s code, and the current URL are fed back into the LLM as the creative brief for the next page. This took some thinking, but was surprisingly painless to implement… unlike the bloody images.

2. Where do the images come from?
It was important to us that there were images, and that these images were dynamic (as opposed to being pulled from a local library). ChatGPT is not good at coming up with URLs for actual images that exist on the internet. It just doesn’t have the knowledge and would prefer to make up fake links. We wanted a bank of images that would be endless, load quickly, and not cost us too much money in API fees. We went for a hybrid approach. Image metadata is fed directly into the Unsplash API. The first image it finds is served. If an image cannot be found (or if Unsplash’s free API hits it’s 50 images/hour limit), then the metadata will instead be sent to Replicate to have Flux 1.1 pro generate an image. This whole functionality is stuck together with glue and tape and will often not serve images correctly, but we built this in a day so leave us alone.

3. Pushing Creative Boundaries
An LLM like GPT-4o can do a lot with 12,000 tokens, but we are still trying to push it as hard as we can to deliver the most ambitious yet executable code it can. It was bummer that our Claude API only gave us a 4,000 token max, because it would most definitely deliver cooler looking websites. GPT-4o is really smart, but Claude is the CSS king.

Credits

Code writing: Chat-GPT-o1
Real-Time web generation: Chat-GPT-4o
Prompt Engineering: Claude Sonnet 3.5
Images: Unsplash + Flux Pro 1.1 (via Replicate)
Hosting: Vercel

The old Paul Valery quote: “An artist never really finishes his work, he merely abandons it,” rings very true for today’s experiment. But maybe we’ll keep chipping away at this after this bonkers month is done.