Guide · Lovable
Inside Lovable, the preview toolbar (which replaced the earlier Visual edits) lets you select an element or edit text and describe the change. That covers a lot. This guide is for what it does not cover: changes your own coding agent should make in your repository, and feedback from people reviewing the published app outside Lovable.
The toolbar works inside the Lovable editor. Per Lovable’s docs, selecting elements and drawing annotations consume credits, and inline text edits are free only up to a limit.
Once a project syncs to GitHub, many teams make bigger changes with Claude Code or Cursor in a local checkout. Those agents cannot see the element you selected inside Lovable.
Reviewers who look at the published app, such as a client, a PM or QA, need a way to point at what is wrong right there.
Lovable syncs a project to GitHub both ways: changes made in Lovable go to GitHub, and changes pushed to the active branch sync back into Lovable.
Open the published app or a preview with the Yocoolab extension, click the element and write what should change. The comment keeps the screenshot, selector, DOM path and computed styles.
Send to Agent hands the thread to Claude Code or Cursor in your checkout of the Lovable repository. The agent finds the code, makes the change and opens a pull request, and the thread moves to In Review.
Merge into the branch Lovable syncs, and the change comes back into Lovable.
A prompt gets an app standing. Making it look like yours takes specific decisions about specific elements, made on the app as it really renders. That is the part Yocoolab is for.
Use Lovable’s GitHub integration, then clone the repository.
For Claude Code, run claude mcp add --transport http --scope user yocoolab https://app.yocoolab.com/mcp and sign in to Yocoolab when it asks. For Cursor, click Add to Cursor on app.yocoolab.com/connect.
Open the published app or a preview, click the element and say what should change.
The agent opens a PR and moves the thread to In Review. Merge into the synced branch and the change shows up in Lovable.
For a quick text change or a restyle you can describe inside Lovable, its own toolbar is faster. Reach for this when the work belongs in your repository and your own agent.
Facts about Lovable on this page come from Lovable docs: visual edits and the preview toolbar and Lovable docs: GitHub, checked October 2026.
Lovable’s docs say the preview toolbar replaces the previous Visual edits experience: you pick a mode, point at an element and describe the change, or edit text inline.
Per Lovable’s docs, selecting elements and drawing annotations consume credits; inline text edits are free up to a limit and then consume credits. Adding comments is free, but sending a comment thread to Lovable uses credits.
Yes, through GitHub. Lovable syncs the project to a repository both ways, so you can run your agent in a local checkout and push to the active branch; the changes sync back into Lovable.
No. Lovable builds and hosts the app. Yocoolab is for pointing at elements on the running app and handing them to your own agent.
Pin a comment on the element in your live app; your coding agent gets the screenshot, selector and discussion, and opens the PR for a person to review. Free for your whole team, in beta.