Build with URL

1. 1

   Decide what you want Lovable to build or do, and gather any public image or web page links you want it to reference.

   This is the content you'll put into your special Lovable link.

2. 2

   Go to the Lovable Link Generator, or manually construct your link starting with "https://lovable.dev/#" followed by your prompt and references.

   The Link Generator helps you build the link correctly, especially for complex prompts or many references. Manual construction requires careful URL encoding.

3. 3

   Add your main instruction using "prompt=YOUR_PROMPT", replacing spaces and special characters with URL codes like "%20".

   This tells Lovable what you want to create or change.

4. 4

   If you have images, add "&images=IMAGE_URL" for each one, ensuring they are publicly accessible and end in .png, .jpg, or .webp.

   Lovable will use these images as visual guides for your project.

5. 5

   If you have web pages, add "&html=PAGE_URL" for each one, ensuring they are publicly accessible.

   Lovable will use these web pages for layout, content, and styling inspiration.

6. 6

   If you want to suggest a change in an existing project, use its project URL with a '?' instead of '#' for the prompt, like "https://lovable.dev/projects/YOUR_PROJECT_ID?prompt=YOUR_PROMPT".

   This will prefill the chat for that specific project, allowing you to suggest edits without creating a new project.

7. 7

   Share the generated link with others or use it yourself.

   Clicking the link will open Lovable with your prompt and references ready to go, but it won't start building until someone clicks 'send'.

Hey Lovable, I want to create a special link that opens Lovable with a specific task. I need to build a landing page that looks like this website: https://example.com/old-landing.html and uses this logo: https://mycompany.com/new-logo.png. The prompt should say: "Rebuild this landing page with our new logo and modern design principles." Can you generate the correct URL for me?

URL parameters

These are extra pieces of information added to a web address (URL) that tell the website what to do or what to show. They usually come after a '?' or '#' symbol.

URL encoding

This is a way of translating special characters (like spaces, question marks, or ampersands) in a web address into a format that web browsers and servers can understand without confusion. For example, a space becomes '%20'.

• Using images or web pages that are not publicly accessible (e.g., on your private computer, behind a login, or on a private network).
• Forgetting to URL encode special characters in your prompt or image/HTML URLs, which can break the link.
• Using image formats other than JPEG, PNG, or WebP, or image URLs that don't end with the correct file extension.
• Creating a prompt longer than 50,000 characters, which will cause the entire link to fail.
• Expecting the link to automatically start a build; users must always click 'send' after the prompt is prefilled.
• Using too many references (images and HTML pages combined) – the limit is 10 per link.
• Trying to prefill an existing project's chat when there's already an unsent message in the chat input; the link's prompt will be ignored.