Bolt.new generates full-stack apps in the browser, but the default data is fake. To turn a Bolt prototype into something real, you need an API that works with browser-based fetch and returns clean JSON. This tutorial shows how to wire Scavio into a Bolt.new project using nothing but fetch and an environment variable.
Prerequisites
- A Bolt.new account
- A Scavio API key (free tier available)
- Basic knowledge of React (Bolt generates it for you)
Walkthrough
Step 1: Create a Bolt.new project
Go to bolt.new and prompt 'build me a product search page that shows trending Amazon products'.
Text
// In Bolt.new prompt:
// 'Build a product search page. On search, call scavio API and display results.'Step 2: Add the Scavio secret
In Bolt's secrets panel, add SCAVIO_API_KEY with your key from scavio.dev.
Text
// In Bolt UI: Settings > Secrets > Add
// Key: SCAVIO_API_KEY
// Value: sk_live_your_keyStep 3: Wire up the fetch call
Replace Bolt's placeholder data with a real fetch to Scavio. Paste this into your component.
JavaScript
const searchProducts = 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({ platform: 'amazon', query, marketplace: 'US' })
});
return (await res.json()).products || [];
};Step 4: Render real results
Bind the results into Bolt's generated product grid.
JavaScript
useEffect(() => {
searchProducts('wireless earbuds').then(setProducts);
}, []);Step 5: Deploy
Deploy via Bolt's built-in deploy button. Your live app now returns real Amazon products instead of placeholders.
Text
// Click Deploy in Bolt UIPython Example
Python
# Bolt runs in-browser, but you can test Scavio from Python too:
import os, requests
r = requests.post('https://api.scavio.dev/api/v1/search',
headers={'x-api-key': os.environ['SCAVIO_API_KEY']},
json={'platform': 'amazon', 'query': 'wireless earbuds', 'marketplace': 'US'})
print(r.json()['products'][: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({ platform: 'amazon', query: 'wireless earbuds', marketplace: 'US' })
});
const { products } = await res.json();
console.log(products.slice(0, 3));Expected Output
JSON
Your Bolt app renders real Amazon products with titles, prices, ratings, and thumbnails. The placeholder lorem-ipsum data is gone.