Notebooks
O
OpenAI Gpt 5 Frontend

Gpt 5 Frontend

chatgptopenaigpt-4examplesgpt-5openai-apiopenai-cookbook
alph-notebooks/openai-cookbook / gpt-5_frontend.ipynb

Frontend with GPT-5

GPT-5 is a large leap forward in frontend development. We have seen the model be excellent at developing full stack applications in one shot, making complex refactors look easy, and making surgical edits within large codebases.

In this cookbook we will show some examples and some learnings of developing frontend applications with GPT-5 across multiple axes.

Intro

There are some general principles we have seen be effective in developing strong frontend applications. We share some of these learnings in the prompt guide. Below are some important pieces to consider when building frontend applications.

Here are libraries and packages we recommend to start with steering the model:

  • Frameworks: Next.js (TypeScript), React, HTML
  • Styling / UI: Tailwind CSS, shadcn/ui, Radix Themes
  • Icons: Material Symbols, Heroicons, Lucide
  • Animation: Motion
  • Fonts: San Serif, Inter, Geist, Mona Sans, IBM Plex Sans, Manrope

These packages are not an exhaustive list and we have seen many different application styles.

Below you'll find an easy way to iterate over frontend abstractions on the API. We’re excited to see how users can unlock creativity with GPT-5.

Interactive Example

Let's dive into an example of creating frontends from scratch. First let's create some help functions to see the generated websites from GPT-5.

[ ]

Now, let's combine the above into one helper function.

[7]

We'll start with a simple example: one-shot building a retro gaming store with the right theme

[8]
get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/retro_dark.html
open_in_browser: finished

Not bad for a one line, one shot prompt!

Now let's steer it to be lighter, and a bit softer

[9]
get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/retro_light.html
open_in_browser: finished

As you can see GPT-5 is incredibly steerable - with just a one line you can change entire applications effortlessly

But what if you have existing website designs that you want to make additions to? For example, we already have this dashboard.

Since GPT-5 is natively multimodal and accepts both image and text input, when you are generating frontend applications we can take advantage of image input to improve model performance.

[10]
get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/login_page.html
open_in_browser: finished

As you can see, GPT-5 does an incredible job of matching the existing style & vibe of the app.

So far this has been pretty static - let's try a more interactive task

[11]
get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/snake_game.html
open_in_browser: finished

We've got a theme consistent snake game: matching colours, typography, and even sound

We hope this has given some ideas of how powerful GPT-5 is at frontend. From a single underspecified prompt and API call, we get production grade outputs.

Now it's your turn - we can't wait to see what you'll build

[12]
get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/your_website.html
open_in_browser: finished