Learning Timeline
Key Insights
Benefits of the Canvas Workflow
Canvas mode eliminates the need to copy-paste AI output into Google Docs or third-party code editors. It allows you to interactively shape the final output alongside the AI.
Free Access
The 'Build Mode' and app generation features are available on the 'Free Tier', making it a highly efficient alternative to ChatGPT or Claude for those looking to build prototypes quickly.
Prompts
Email Sequence Generation (Canvas)
Target:
Gemini Canvas
welcome email sequence for new users
Full Web App Generation (Build Mode)
Target:
Google AI Studio
build a fully working timer with a dark mode toggle and a task list
UI Customization Prompt
Target:
Google AI Studio
change the accent color to blue
Step by Step
Using Gemini Canvas for Interactive Workflows
- Open the Gemini interface and log in to your account.
- Enter your prompt into the chat box (e.g., generating an email sequence or specific code).
- Notice the screen automatically splits into a split-screen view to open Canvas mode on the right.
- Watch the generated code or text appear within the Canvas section.
- Edit content directly inside Canvas without needing to copy it into an external editor.
- Test or modify the AI output in real-time within the same workspace.
Building Web Applications with Build Mode in AI Studio
- Visit aistudio.google.com.
- Locate the prompt input area and ensure you are in 'Build Mode'.
- Type a specific prompt to build your application (e.g., a timer app with dark mode).
- Wait a few seconds for the AI to generate the code and display a clickable 'Live Preview' on the right side of the screen.
- Test the app's functionality interactively (e.g., click the timer button or toggle dark mode).
- Enter additional prompts to modify the visual style, such as 'change the accent color to blue'.
- Watch the application update automatically based on your latest instructions.
