LongCut logo

How to get started on Opal

By Google for Developers

Summary

## Key takeaways - **Start in gallery for inspiration**: For most people, this top section will be empty since you don't have any Opals yet. So, most people actually start at the gallery to look for examples and inspiration of what you can do with Opal. [00:14], [00:17] - **Natural language builds visual flow**: I just want the app to ask me what leftovers I have to make sure we actually use those ingredients. Because I entered it here, it did it for me automatically. [03:30], [03:46] - **Choose any Google AI model**: This is now looking at asking a generative model and in this case it's Gemini 2.5 flash. But as you can see in the dropdown, you can select any AI model you want from the Google ecosystem. [01:03], [01:13] - **Assets reference uploads in prompts**: I clicked add asset and then I upload an image, but you can also pull from drive, YouTube, etc. This prompt actually references that specific image and tells the model that it needs to take inspiration from that photo. [05:39], [05:49] - **Output to Docs appends runs**: I could just change this to save to Google Docs. And anytime you ran the same Opal again, it would just upload more content into the same doc. [06:24], [06:34] - **Share app or static output**: If I wanted people to actually go to your Opal or run it themselves, then you would share this publish link with them instead. But if you click this copy share URL, then other people can just open it and go directly here. [03:03], [03:14]

Topics Covered

  • Prompts Auto-Expand for Richer Outputs
  • Natural Language Edits Auto-Wire Flows
  • Assets Provide Style References
  • Outputs Append to Persistent Docs

Full Transcript

Hi, I'm Megan. I'm a product manager on the Google Labs team and I'm going to walk you through a quick tutorial on a product called Opal. It's a noode mini app builder that helps you automate workflows and build mini apps for

yourself or your friends. For most

people, this top section will be empty since you don't have any Opals yet. So,

most people actually start at the gallery to look for examples and inspiration of what you can do with Opal. Let's click create new and put in

Opal. Let's click create new and put in an idea I had.

So, this is an app that plans a weekly meal plan. I want it based on the number

meal plan. I want it based on the number of people and the number of times that I might want to cook in a week. And this

is something I do every week. So, I like that it's repeatable and I can always come back to it. And while we're waiting for that to load, this is what we call the visual editor. So, here essentially is the logic behind the app idea that I

just suggested. And we can actually take

just suggested. And we can actually take a look at each one of these steps. So,

the first one, the yellow is user input.

That's right here. You can also manually add these blocks at any time to your canvas. So, you could always build it

canvas. So, you could always build it from scratch as well. So, this asks essentially the user what the number of people might be. And then this asks a cooking frequency. Great. I'm looking

cooking frequency. Great. I'm looking

here. This is the generate step here. So

again, this is now looking at asking a generative model and in this case it's Gemini 2.5 flash. But as you can see in the dropown, you can select any AI model you want from the Google ecosystem. And

here you can see they've actually expanded my prompt so that it's way more detailed than what I just put in that original prompt box. And then this looks like the final output step. So this is showing me what it would look like when

I run the app. Uh so let's give it a go.

So I'll click here. This is the start button. And essentially what we're doing

button. And essentially what we're doing is previewing the app. Let's say two people and I only want to cook four times this week. And now it's working.

And if I go here to console, you can actually see all the interim stuff. So

what's actually happening while this app is starting to run. So here I can see that they're calling a specific model. I

can expand that as well. I don't really need to see all those details, but if I were curious, here's what I could look at. And while it's doing that, let me

at. And while it's doing that, let me show you also the theme. So this is the section where you can actually change that original cover image. And so here you can either generate something or you can upload it directly. And if you hit

randomize, you'll get something that feels relevant to the app. All right,

let's take a look and see how that's going. All right, you can already start

going. All right, you can already start to see some content coming out. So I can see the original meal plan that it's generated, but it looks like it hasn't generated the final output yet. So once

this is ready, I'll actually have a nice little landing page for people to see all the meal prep preps that I've made.

All right. So, if I go to the preview tab, I can see that it's ready. And I

can also click to the app toggle to see the more immersive view. Great. So, I

can see here there's a few meals planned. All right. They know that I'm

planned. All right. They know that I'm only cooking four times, which is nice.

Cool. So, that's the output. And if I wanted to save this exact HTML output with someone, I could click this share output button. I'd have to share the

output button. I'd have to share the Opal first. So, I'd do that by clicking

Opal first. So, I'd do that by clicking up here. I click share app. You can

up here. I click share app. You can

publish this, which means that anybody that you send the link to could be able to access your Opal. And then once you do that, you'd copy this publish link to send to other people. But once you've done that, you can easily click this

share output button like I tried to show you earlier. And if you click this copy

you earlier. And if you click this copy share URL, then other people can just open it and go directly here. Um, but if you wanted people to actually go to your Opal or run it themselves, then you would share this publish link with them

instead. And this link would take them

instead. And this link would take them here. So if we start over, you could

here. So if we start over, you could have anybody run the app that you just made.

All right, let's make some edits now. So

here, let's try natural language. That's

the easiest thing to do. And here, I just want the app to ask me what leftovers I have to make sure we actually use those ingredients. But if I wanted to do this manually, I could have also clicked this user input and it would have added another field to the

board. So I would have been able to edit

board. So I would have been able to edit it by saying what I want that step to do and then I would just add a little connection here. So here you can see

connection here. So here you can see that because I entered it here, it did it for me automatically. But I could have just manually added one here. All

right. And actually the same goes for everything here. If I wanted a different

everything here. If I wanted a different step, let's say I want the model to do something else. So after I get a menu, I

something else. So after I get a menu, I want it to generate an image of something. I could have done that here

something. I could have done that here and selected a different model. All

right. But for the sake of these changes, let's add one more here and say generate some images to go along with my meals. All right. So, when you take a

meals. All right. So, when you take a look at what actually changes here, that was the first change was pretty obvious because it just added an input to the board. For this type of change, you'd

board. For this type of change, you'd actually have to click in and see what changed about each step. So, here

because I expect some images to go along with my meals, I'd actually expect another generate step here created to be able to ask an image generation model.

So here it's using image in4. Let's

actually use nano banana which is the fun newest image model. Um and you can see it's actually just added the step to my flow. And at the end of the day you

my flow. And at the end of the day you can see here also it's now accounted for the fact that there's images. So in

output I would expect to see not only the recipes and the meal plans but also the images that go along with it. Before

I go on to other topics I also want to show you a few other hidden features. So

here you can also see version history.

If you click here, you can edit the title and description of your Opal, but it's automatically titled for you here as well. The description actually just

as well. The description actually just goes right below here. So, even if you had nothing, you can edit this field as well. Um, and again, theme. If you had

well. Um, and again, theme. If you had themed this or uploaded your own cover image, you would see that image portrayed here. Uh, lastly here, you

portrayed here. Uh, lastly here, you also have some some controls to undo and redo. So, you can click those or use

redo. So, you can click those or use these to zoom in or zoom out of your canvas. And this button just centers

canvas. And this button just centers you. So, you can always come back to

you. So, you can always come back to home. A few more features I want to show

home. A few more features I want to show you. So the first one is adding an

you. So the first one is adding an asset. So for this example, I wanted to

asset. So for this example, I wanted to make a pet comic strip. I wanted to let someone upload their pet photo, their name, and then be able to generate this specific style of comic strip every time. So I clicked add asset and then I

time. So I clicked add asset and then I upload an image, but you can also pull from drive, YouTube, etc. And here I wanted the cartoons to always come out this specific look. So what happens here

is this prompt actually references that specific image and tells the model that it needs to take inspiration from that photo when it generates the comic strip.

So you can imagine this happening with anything. So if you uploaded a doc, you

anything. So if you uploaded a doc, you could copy that specific structured format or you could give a video or an image to add inspiration or ask the model to mimic that exactly. Another

neat feature is actually the ability to change the output. So previously I showed you what it looks like when you have an output as essentially a web page. But here what you can also do if

page. But here what you can also do if you click here is save something to Google Doc or a slide or a sheet. So if

you generated let's say a custom report.

So here it's like viral trends for social media. I could just change this

social media. I could just change this to save to Google Docs. And then when I looked at the app and uh output, you would actually see the doc, a link to it, click out, and you could share the doc with someone as well. And anytime

you ran the same Opal again, it would just upload more content into the same doc.

Loading...

Loading video analysis...