Grove can draw what you're planning: a mockup of a screen, a set of screens, a flow, or a diagram. Use a picture when it says something faster than words, such as what a screen shows or how a flow branches.
Ask for a picture
Ask Grove in the chat. For example:
"Sketch the screen where a customer picks a new time."
"Draw the flow for cancelling a visit, with each error case."
"Make a clickable prototype of the three booking screens."
Grove also adds a picture by itself when one helps, for example while it settles the requirements.
When Grove adds or changes a picture, it tells you in one line what the picture shows and where it is.
Low-fi or hi-fi
A mockup of your product comes in two levels of detail:
Low-fi: a hand-drawn sketch, quick to change. It uses placeholder text, so nobody mistakes it for a final design.
Hi-fi: it looks like a real product screen.
If you don't say which one you want, Grove asks you. It keeps your choice for the rest of the chat, until you change it.
How a hi-fi mockup looks depends on what your workspace has connected:
No connected code: a polished screen in standard components.
Connected code: matched to your product as closely as Grove can from its code.
A component kit: drawn in your app's own components. See "Set up a component kit for realistic mockups" in the builders' section.
Where pictures go
In a document. Most pictures go inside a plan document, next to the text they explain. Each one has a caption that says what it decides, and what is only an example.
On a page of their own. Clickable prototypes and full sets of screens open as their own page. Grove opens the page for you.
Every picture is also listed in the Scratchpad, under Visuals. See Use the Scratchpad.
While Grove draws
The space for the picture appears right away, with its caption and a Drawing label. If something goes wrong, the space says so:
"This picture couldn't be drawn": something went wrong. Ask Grove again, and it retries.
"This picture wasn't made": Grove mentioned a picture but didn't make it. Ask for it, and Grove draws it.
If Grove fails to redraw a picture, the earlier version stays in place.
If a picture is archived, the document shows one line in its place, such as "Picking a new time was archived."
Open, change, or redo a picture
Open it full size: click the caption under the picture.
Change it: ask Grove in the chat, such as "Make the confirm button full width." Grove makes small changes right away. If the change means the plan should change too, Grove tells you, and waits for your OK before it edits the plan.
Redo it: ask Grove to draw it again. There is no redo button.
If you open a picture on its own page, you can also switch between View and Edit. Edit shows the picture's code, for people who want to change it by hand.
Builders can use pictures too
When a builder picks up a project, the project's pictures come with it. Their coding agent can read them, and add or change them.