Hey it's Paul, welcome to my 83rd newsletter!

Ever dreamt of building your own web app but thought it was way too complicated or would take ages?

Well, hold onto your hats, because AI is changing the game again!

Today, I'm going to show you how to do just that using ChatGPT o3 and its nifty "Canvas" feature.

Seriously, the whole workflow can take less than 5 minutes!

1. Prepare your master prompt

Like with any AI magic, a good prompt is key. For this, I often use my own GPT called "Prompt Enhancer".

It’s a real time-saver and helps make sure o3 can build the app in one go.

For our example, we're building a "Prompt Organizer". Here's the kind of detailed prompt it generated:

Plaintext

You're a senior front-end developer with experience in building productivity tools using vanilla JavaScript and browser-based storage. Create a single-file web application that serves as a "Prompt Organizer" to help users save, edit, delete, and categorize AI prompts directly in the browser without any external dependencies. Use only HTML, CSS, and JavaScript, and store data persistently using localStorage or IndexedDB to ensure saved prompts remain available across sessions. Each prompt should include fields such as title, description, tags, and the full prompt text. Users should be able to filter prompts by tags, search by keywords, and sort by date created or modified. Include example prompts to populate the organizer on first load. Structure the code so it’s readable and modular within the single HTML file, using internal <style> and <script> tags. Use a clean, modern UI design with a light color palette, clear typography, and responsive layout. Adopt an approachable and user-friendly tone throughout the UI, with intuitive labels, buttons, and helpful tooltips.

Getting this part right makes all the difference!

2. Unleash ChatGPT o3 with "Canvas"

Next up, head over to ChatGPT.

You'll want to paste your super-detailed prompt into a new conversation.

Then, the crucial part: select “o3” as the model you're using, and make sure to activate the “Canvas” option.

This is what tells ChatGPT you're looking to build something interactive!

3. Preview your creation

Once o3 has worked its magic, you'll be able to use the "Preview" option.

This is your first look at your brand-new app! You can click around and test out some of the features.

At this stage, the "database" part (where your data gets saved) might not be fully functional in the preview, but you can see the structure.

If something's not quite right, you can just ask o3 to make changes!

4. Save your app's code

Happy with the preview? Awesome!

Now, simply copy all the code that o3 generated.

Open up any text editor (like Notepad on Windows, or TextEdit on Mac), paste the code in, and save the file with an .html extension.

For example, you could call it my-prompt-organizer.html. That's it, your app is born!

5. Use your new app

To use your app, just find that HTML file you saved and double-click it. It'll open right up in your web browser!

And the really cool part? Any changes you make, like adding new prompts to your organizer, are saved directly in the app's "database" (using your browser's localStorage or IndexedDB).

So even if you refresh the page or close and reopen the app, all your stuff will still be there.

6. Get ready to deploy (it's free!)

Okay, so you have an app running on your computer. But what if you want to share it with the world, or access it from any device? You deploy it!

And you're getting to know me... we're going for a free option!

First, you'll need to create a free account with Cloudflare. They offer a great service for this.

7. Upload and go live!

Once you're in your Cloudflare account:

Look for "Workers & Pages" in the sidebar and click it.
Then, hit "Create application", and navigate to the "Pages" tab.
You'll see an option to "Upload assets". Click that and give your project a name.
Click "Create project". Now, this is where you upload your app. The original instructions suggest uploading a folder containing your index.html file. So, you can put your my-prompt-organizer.html (or whatever you named it) into a folder, and then upload that folder.
Finally, click "Deploy"! And just like that, your web app is live on the internet!

So there you have it. From a detailed prompt to a fully functional, deployed web app in a matter of minutes!

Whereas before you'd need to wrestle with complex coding languages, server setups, and deployment processes, now AI tools like ChatGPT o3 with Canvas are putting the power of creation into everyone's hands.

Of course, this is just the beginning, and for super complex apps, you'll still need deeper expertise.

But for quickly building useful tools, prototypes, or personal utilities? It's an absolute game-changer.

Have a great weekend and see you next week!

Paul

Promote your business in this newsletter

0 comments

Build faster with Gemini and its new integration

Google Sheets now has a "=AI" formula!

Generate & Deploy a landing page with Gemini (for free!)

Build and Run your AI Agent locally (for free!)

Build your Second AI Brain with NotebookLM

See all posts from Paul Couvert