Lovable generates React + Supabase apps from prompts, but the default data is hardcoded. To turn a Lovable prototype into a shippable product, you need an API that works with Lovable's environment and fits the generated code patterns. This tutorial walks through wiring Scavio into a Lovable project end-to-end.
Prerequisites
- A Lovable account
- A Scavio API key
- A Supabase project (auto-created by Lovable)
Walkthrough
Step 1: Prompt Lovable to build the app
Use a prompt that explicitly describes the search pattern.
Text
// In Lovable prompt:
// 'Build a search page. On query submit, call the Scavio API to fetch Google results and display them in a card grid.'Step 2: Add Scavio to Lovable secrets
Open Lovable's secrets panel and add SCAVIO_API_KEY.
Text
// Lovable UI: Project > Secrets > Add
// Name: SCAVIO_API_KEY
// Value: sk_live_...Step 3: Edit the generated fetch call
Lovable generates a generic fetch placeholder. Replace it with a real Scavio call.
JavaScript
const searchScavio = async (query) => {
const res = await fetch('https://api.scavio.dev/api/v1/search', {
method: 'POST',
headers: { 'x-api-key': import.meta.env.SCAVIO_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
});
return (await res.json()).organic_results || [];
};Step 4: Bind to Lovable components
Use Lovable's generated useState and useEffect to render results.
JavaScript
const [results, setResults] = useState([]);
const handleSearch = async (q) => setResults(await searchScavio(q));Step 5: Deploy via Lovable
Use Lovable's built-in deploy button to ship the app live.
Text
// Click Deploy in Lovable UIPython Example
Python
import os, requests
r = requests.post('https://api.scavio.dev/api/v1/search',
headers={'x-api-key': os.environ['SCAVIO_API_KEY']},
json={'query': 'how to build a lovable app'})
print(r.json()['organic_results'][:3])JavaScript Example
JavaScript
const res = await fetch('https://api.scavio.dev/api/v1/search', {
method: 'POST',
headers: { 'x-api-key': import.meta.env.SCAVIO_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ query: 'how to build a lovable app' })
});
console.log((await res.json()).organic_results.slice(0, 3));Expected Output
JSON
Your Lovable app renders real Google search results with titles, URLs, and snippets. Lovable's generated card grid populates dynamically from live Scavio data.