How to Use ChatGPT Sites to Build a Working Web App

Author: The AI Productivity Coach · Watch on YouTube

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: How to Use ChatGPT Sites to Build a Working Web App · Channel: The AI Productivity Coach · 10:22 · Watch on YouTube

Topics: Software engineering with AI, AI models, Privacy and data protection

Summary

The video demonstrates how to use ChatGPT Sites to turn a detailed brief into a working, shareable web app, using an internal AI request tracker as an example. The recommended process is to define requirements in a regular ChatGPT conversation, build from the approved brief, test the app’s core job, make focused changes, and get feedback before deployment. Sites supports saved versions, access controls, persistent data, file storage, and basic analytics, while deployment settings determine who can access the site. The video also notes that Sites is in public beta, is currently limited to paid plans, has usage limits, and calls for care about what data you host.

Key points

ChatGPT Sites turns a description into a website, web app, or game that can be hosted and shared.
Start by developing a one-page brief in a regular ChatGPT chat rather than iterating from an underspecified prompt in Sites.
Ask ChatGPT to interview you about the audience, core task, and required fields, then provide detailed answers.
Treat the first prototype as something to test, not as a finished product; test the core job with multiple examples.
Track feedback and make narrow, specific changes, then test again to confirm the app still works.
Ask other people or AI tools for feedback, but make the final decisions based on the intended purpose of the site.
Save a version before deployment, then configure the site name, URL, and access level.
Access can be limited to invited email addresses or opened to anyone with the link; basic visitor and page-view analytics are available.
Sites is in public beta and currently available only on paid plans, with plan-specific usage limits that OpenAI does not publish.
Consider carefully what data to host in a site.

Chapters

Start	Chapter	Summary
00:00	What ChatGPT Sites are and how to access them	The video introduces Sites as a way to build hosted websites and apps, outlines its features, and shows where to find it in ChatGPT or Codex.
02:06	Write a brief before building	The creator recommends using a regular ChatGPT conversation to clarify the app’s audience, purpose, and requirements before submitting an approved brief to Sites.
04:10	Test the app and iterate	The request tracker is tested with a sample request, followed by advice to stress-test different scenarios and make focused improvements.
06:15	Get feedback and deploy	The video recommends getting another perspective, saving a version, configuring access settings, and sharing the deployed site.
08:49	Limits and final recommendations	The creator reviews current beta and plan limitations, cautions about hosted data, and recaps the process from idea to launch.

Quotes

Most builders stop at a nice-looking preview. — 00:00

The fastest way to waste time creating a site is to just prompt directly in the sites — 02:06

The first version doesn’t need to be perfect. It just needs to be testable. — 04:10

iterate with narrow changes. — 05:12

ChatGPT sites becomes really good when you stop thinking about just ChatGPT can make me a site. — 09:51

Concepts and entities

ChatGPT Sites, ChatGPT, Claude artifacts, Gemini canvas, Codex, OpenAI

Full transcript (original language)

00:00 Most builders stop at a nice-looking preview. This one had a URL, saves requests after I refresh it, and it can be shared with my team. I built this with ChatGPT sites. But, the useful part was not the first prompt. It’s process I used to brief, test, and improve the tool before anyone else used it. In this video, I’ll show you what ChatGPT sites are, the complete process for creating one, and the limits you need to know before you publish. So, what is a ChatGPT site? ChatGPT sites basically turn a description into a website, a web app, or a game. So, for example, that

00:30 could be an internal request tracker like this one that I made. It could also be something like an exact account review app, an onboarding hub, an event briefing site, a forecasting dashboard, an interactive report, or a simple customer form. Sites can provide a production URL, versions, audience control, persistent data, file storage, and basic analytics. If you’ve used Claude artifacts or Gemini canvas before, the experience will feel quite similar. You describe an output, you see it beside the conversation, and you improve it by chatting. The difference, however, is the destination. If artifacts or canvas feel like a workshop

01:03 beside the chat, sites is closer to a hosted version of that. It is designed to move from that build conversation to a hosted site that others can use. So, how do you access sites? You can basically open sites from ChatGPT on the web at chat.openai.com/sites, or when you’re in ChatGPT, you can open up your sidebar, look at this more section, and hit sites. And if you haven’t created any sites, you’ll see that you’ll have this interface where you haven’t made any sites yet. On the desktop app, you can also find us in the Codex interface, and you can hit sites

01:34 here. And similarly, in the main ChatGPT interface, it’s just here in sites. So, you can use either the web version or the desktop app to build sites, and you can use both the ChatGPT and the Codex interface. But, sites has its own management system for your projects, versions, and deployments. So, how do we get started with making a site? Step one, build the ordinary brief in ChatGPT chat. The fastest way to waste time creating a site is to just prompt directly in the sites and then have to iterate loads, fix all your mistakes, and go back and forth. You might end up spending 10 prompts just fixing some

02:06 assumptions that ChatGPT sites made. Where I like to start is starting a regular chat in ChatGPT or any app, to be fair, and just figuring out what you want from the site through that conversation before you bring it into sites. So, for example, for this app I’m going to build, here’s the prompt. Okay, so I’m going to do something like help me build a brief for an internal AI request tracker. Again, this could be anything that you want. Maybe it’s a customer tracker, an event briefing, a forecasting dashboard. Just think about whatever you want and write it in plain English. Include something like interview me about the audience, the core job, the required fields, blah blah

02:37 blah blah. One important thing is do not build anything yet. Um maybe just state that you’ll eventually build this in ChatGPT sites and then whatever format you want it in, just add that in. ChatGPT will come back with a bunch of questions, so just answer them. Make sure you have give as much detail as possible uh in order to get the best brief for the app. So, for a lot of those questions, I basically just dictated to save a bit of time to give my answers and I was interviewed. Pretty cool to actually think through the problem that way as well. And so, I’ve come with this one-page brief, and which is ready to go. And now we’re in a good place actually bring it into ChatGPT sites and build it. And you can see

03:09 here, I actually had to spend a bit of time creating that brief. So, you can imagine if you had built something with one prompt in ChatGPT sites, it would probably have been wrong. And ultimately, you would spend more time and more tokens rebuilding a site than you would just rebuilding a text document. One tip I give to a lot of people uh for any prompts or anything you’re doing is just always ask your AI tool what it needs from you or ask it to interview or ask any questions, just so you can give it all the information it needs to perform a task. And especially when that task is a pretty heavy task, it’s really important to just make sure

03:40 your prompt is really good before you go down that rabbit hole. Step two, hand the approved brief to ChatGPT sites. So, I’ve got the brief. I’m coming over to ChatGPT sites and I’m going to hit create a site. And so, it already has prompt make me a site about” and I’m just going to paste the brief in here and and then simply send prompt. So, that took about 16 minutes to build the initial prototype. I could just click into it here. It seems like it’s already populated a bit of data, but overall looks pretty smooth. You’ve got this my request section. It’s a queue. I don’t

04:10 feel like some of that is a bit buggy there, but not a bad start. So, the first version doesn’t need to be perfect. It just needs to be testable. And that moves on to step number three, which is test the job before the design. So, I’m going to come in and basically I’m going to see in this new app whether it can take in my requests. So, let’s say this is a task that I want to submit. I’m in my team and every Friday I spend two to three hours pulling data. Could AI automate most of this process? Here are some of the things I do. Let’s send it into Area. So, he says, “Thanks. I’ve got the problem. Walk me through how it works today.” And so, it’s pretty

04:41 the app. You just need to test how it will work. So, I’ve submitted the request. You can see here it did kind of the back and forth chat, which is pretty helpful. Um I’ve been given this ticket number and I can actually see, click in, and see as an employee here are my own personal requests. So, it’s done a good job to to actually just create this request. I like this little pop-out thing. That’s pretty cool. Um it’s made a summary of all the information I’ve given. Um it has this cool little tracker of like approved request information. And then it also has this dashboard for the AI transformation needs. So, it’s basically it’s created a pretty good app of what I

05:12 wanted to do. There’s a few things I’d tweak, um but at least the request is working. That was the initial test I wanted to do. And so, you I’d recommend testing it a few times with a few different examples. I’ve just done one for the sake of this video, but really stress test it with some very niche scenarios or different use cases to make sure it’s working for you. Moving on step four, which is iterate with narrow changes. So, when you want to iterate, you basically have to come back to the sites area and add in a bit of feedback. Let’s say we want to make some simple tweaks like make the priorities easier

05:44 to scan the text and you don’t need to do this. Basically, you just want to input the changes that you want to make having reviewed it and tested it. So, as you’re testing it, it’s probably good to actually just track some of the changes you want to make. So, once you get through all your iterations, you should get a summary from ChatGPT. And then you can go in and check if it looks good to you, make more changes, and just keep going until you’re happy with the overall structure of the app. You can then also run the testing again if you want to be sure that it’s still working. Then move on to step number five, and that’s get a second pair of eyes on it to look at it. A builder can test

06:15 whether something works, but it is much more difficult for a builder to understand how a user would actually use it. So, before publishing it, I would share with someone that you are able to share it with. And you can also test it to a degree in some of the other AI apps. And if you want some feedback on the design, you can simply put a screenshot in and say “Review this app for design.” Get feedback that way. And again, if any of these things resonate, you could actually then just paste this back into ChatGPT to make changes that way. So, everyone’s going to have feedback, uh both tools and people. What I recommend is you making a call on what

06:46 you think is most relevant for what you’re trying to achieve, and then incorporate that back in. This phase is more for reviewers, but they’re not necessarily product owners. So, the final decision should rest with you if you’re making the site or whoever you’re making it for. And then finally, moving on to the final step, step six, and that is save, share, and then deploy. So, best to save a version before you deploy it. Sometimes ChatGPT will automatically save it, but just prompt it to make sure that it actually has saved it. So, you can see here, it’s already saved it for me. So, every deployed URL is basically a production URL. So, not everyone can

07:17 see it when it’s in this draft version. You can see here, this is the one that I had, the request tracker. So, before deploying it, you can come into the settings of the tracker and edit them. So, let’s say I just want to call this AI Help Quester. Maybe you want to change the URL as well. So, same, AI Help, Change URL. You can actually add a custom domain. You need to connect that to your DNS records. I won’t go into that right now. And then you can change the access, so either you share it with specific emails, so maybe you just want to share it with the team, or you can

07:47 share it with anyone with the link. There are also other environment variables you can add as well. And another cool thing about your site when you do release it is that you can actually see the analytics. So, pretty basic right now, you can see visitors and page views, but helpful enough to know what’s going on with your site if people are actually using it. So, it actually does get deployed when you’re building it, but only you can access it. To deploy it to more people, you basically just have to change the access level. So, you can do that by emails, share with your workspace if you have a workspace account, or you can make it public. And when you hit share, you can basically choose here, so it’s anyone

08:18 with the link, or it’s only those invited. So, you can add specific emails there. I’m going to do anyone with the link. That’s basically it. Your site is now deployed. You can share this if you have chosen with the public link, you can share it with anyone, and people can start testing it. And just to note, when you come back to your site’s interface, you’ll see it here. You can always go in and edit it or see the analytics and settings. And so, as you can see, uh since it’s been deployed, it has three unique visitors with 47 page views. That may just be me on my phone and my wife. Good to see that it’s working and the public link is working and anyone can

08:49 access it now. So, there you have it. You’ve created your first site. This is obviously a very specific use case, but it was a bit complicated in the background, and ChatGPT did a good job of creating it. You could easily use this to create a site for yourself, simple landing page, or whatever you want on this. But, let me know in the comments what you would consider making, and if you do have a site, please share it in the comments. I’d love to check it out and see what you created. But, let’s look at the limits of ChatGPT sites for now. So, ChatGPT sites is still in public beta. Right now, it is only available on the paid plans, and there are also plan-specific usage limits.

09:20 OpenAI doesn’t currently publish what the limits are currently, so that’s something you’ll just have to figure out based on your plan. I imagine the usage limits are dictated by the number of sites, the size of the sites, the number of the amount of storage you need for the site. And if you hit those limits, you probably won’t be be to create a new site or add on to your current sites. You should still be able to edit your existing sites and depending on the size of the edits, but just something to be aware of as you consider using this. One thing I’d also be conscious of is what data you host in these sites. So, that’s something for you to make a judgement

09:51 call on and just to consider as you create a site on ChatGPT. So, in conclusion, ChatGPT sites becomes really good when you stop thinking about just ChatGPT can make me a site. Can actually complete a lot of different tasks for you and create a app-type experience. So, it definitely has a lot more functionality than the name suggests. So, what I recommend is when you have the idea, flesh it in a ChatGPT chat, start the building site, it’ll probably take a bit of time, test a few times, iterate a bit, get feedback from other users, and then launch it to whoever you want to use it. If you found this video helpful, please make sure to like and

10:22 subscribe and join me on this journey. I also have a weekly AI productivity newsletter and you can subscribe using the link in the description below. Thank you so much for watching. I really appreciate it and I’ll see you in the next video.