Learning Timeline
Key Insights
Thinking Mode vs Fast Mode
GPT-5 in 'Thinking Mode' generates significantly higher-quality code (up to 800+ lines) compared to 'Fast Mode' or GPT-4o, which typically produce only 80-170 lines. This reduces the risk of UI bugs and broken buttons.
Visual Display Tips
By default, the AI might generate a plain UI. You can enhance the visual quality by requesting custom CSS or specific color themes in your follow-up prompt.
Benefits of React in Canvas
Use the React framework when asking the AI to build applications in Canvas, as the Canvas system is optimized to render React components flawlessly in real-time.
Prompts
Building a Goal Tracking App
Target:
ChatGPT (Canvas Mode)
Build a goal tracking app using React.
Building a Business Tycoon Simulation
Target:
ChatGPT (Canvas Mode)
Build a business tycoon game where I'm making decisions as time goes on. Business name: Tech. Location: Chicago. Strategy: Balanced.
Step by Step
Building React Applications with Canvas & Thinking Mode
- Click the '+' (plus) icon located next to the ChatGPT input field.
- Select and enable 'Canvas' from the model picker menu to open an interactive workspace.
- Ensure you select the 'GPT-5' model (or the latest version) and enable 'Thinking Mode' before sending your request.
- Enter a specific prompt to build your app, for example: 'Build a goal tracking app using React'.
- Click 'Send' and wait for the AI to complete its 'reasoning' process. This may take up to 10 minutes as the AI maps out complex logic.
- Once the code is generated, the Canvas window will display the code on the left and the 'Preview' of the app on the right.
- Interact with your app within Canvas to test its functionality (e.g., click 'Add Goal', toggle 'Dark Mode', or check the 'Weekly Trend').
- If you encounter any bugs or want to improve the UI, provide a follow-up prompt for specific refinements.
