Learn Prompting Newsletter
Your Weekly Guide to Generative AI Development
GenAI Tutorial
The Google AI Tool That Builds Apps For You
Learn how Opal lets anyone create AI-powered apps in minutes
|
|
Hey Mani,
|
|
The surge of AI development has given rise to many excellent no-code and vibe coding tools. But despite their popularity, many tools continue to be targeted at technical audiences. This is where the Google Labs experiment Opal comes in. This powerful no-code tool allows everyone, technical and non-technical alike, to build complex and powerful apps in minutes. This week we’ll explore how to start building with Opal.
|
What is Google Opal?
|
|
Opal is a visual, no-code tool for building AI-powered mini-apps. This Google Labs experiment gives users a canvas where they can drag and drop different unique building blocks to create the workflow for their app. This development method lets you build the step-by-step logic of your app without needing to manually write or even look at code. The best part of Opal is that you can develop your app entirely through one large conversation or by manually changing the description of each step.
|
Getting Started
|
|
There are two main ways to create a new app in Opal, either use a blank canvas or remix an existing app. Let’s focus on starting fresh.
|
Step 1- Describing what you want to build:
|
|
Although Opal has a building block system for creating app functionality, you don’t need to start from scratch. If you describe what you want to build in plain English, Opal will generate a first draft of your app's workflow. This means that you should try to be as descriptive as possible when explaining your idea or anticipate further iteration.
|
 |
|
This simple prompt will generate an initial version of my app that I can further refine.
|
|
Step 2- Edit your Building Blocks (The Visual Canvas)
|
|
This is where the genius of Opal comes in and sets it apart from other vibe coding and no-code tools. The canvas editor allows you to see under the hood of your app by representing all interactions as a flowchart with blocks that can be added, moved, deleted, and edited. There are three types of building blocks; User Input, AI Generation, and Output.
|
-
User Input (Red): As the name suggests, this is a screen that allows the user to add information. If you’re creating a movie recommendation app, this would be how the user shares a movie they enjoy.
-
AI Generation (Blue): The Generate blocks are what allow you to add AI functionality to your apps. You can select a model you’d like to use and then explain what that model should be doing. By adding things like inputs and outputs, you can help ensure the model is behaving correctly. The new Agent mode brings dynamic changes to your workflows to better ensure that the user’s prompts are addressed.
-
Output (Green): This is where you can choose the destination of your workflow. Opal offers a number of options which include simply displaying them on the screen or adding the output to a Google sheet that can be referenced in future chats. You can see my structured output on the right side of the image below.
|
|
This feature of Opal brings an optional complexity to the tool. While you can always use the chat box to edit any and all steps, you can also manually add steps. By selecting any of the options in the top middle of the canvas, you can have greater control over your workflow.
|
 |
|
This is the core way to view and edit your apps in Opal.
|
|
Step 3- Preview and Test
|
|
Once your app (or even just a single step) is completed, you can immediately start testing. There are two ways to do this, Preview mode and App View. The Preview mode can be seen in the above screenshot on the right side of the screen. The App view can be toggled on using the “App” button on the top middle of the screen. Both views allow you to experiment with your creation to ensure it’s running correctly.
|
 |
|
You can see the full screen version of your creations by selecting “App” at the top.
|
|
Step 4- Publish, Share and Remix:
|
|
Once you’ve created your app, you can share the link with coworkers or post it online for the public. Once shared, other users can build upon your design by using the Remix tool. This is great for brainstorming new ideas and features that will help make a good app great.
|
 |
|
All Opal creations can be easily published and shared!
|
|
|
The team behind Opal has shared 20+ example projects that can be explored and built upon using Remix.
|
My Thoughts:
|
|
No-code and vibe coding tools have always been my favorite aspect of AI products. Giving everyone the ability to create fun, useful, or interesting projects without needing to program is one of the main benefits of AI for me. Yet many of these tools still feel complex and intimidating for non-technical users. That's where the brilliance of Opal comes in. This Scratch-like environment completely removes the need to see / directly edit the code. However, users can still choose to manually create steps or use AI to generate them. This means that as you become more comfortable with Opal, you can choose how you want to interact with the tool. The team behind Opal are also actively updating the tool and have recently added the Agent mode that I mentioned in Step 2.
|
|
Although Opal is still an experiment within Google Labs, I highly recommend jumping in and exploring its capabilities.
|
|
|
|
|
|
|
|
Payment Failed
