> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scrapegraphai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using ScrapeGraphAI with Bolt.new

> Add real-time web data extraction to apps built with Bolt.new

[Bolt.new](https://bolt.new) by StackBlitz is an AI-powered full-stack development environment that runs entirely in the browser. You can use ScrapeGraphAI to add live web scraping capabilities to any Bolt.new application.

## How it works

Bolt.new can generate Node.js / Express backends alongside your frontend. Make ScrapeGraphAI API calls from the backend to keep your API key secret and avoid CORS errors.

## Setup

### 1. Tell Bolt to create an Express backend

Start a new Bolt project and prompt it:

> Create a full-stack app with an Express backend. Install `scrapegraph-js`. Add a POST endpoint at `/api/scrape` that accepts `url` and `prompt` fields, calls `sgai.extract` from ScrapeGraphAI v2, and returns the structured JSON result.

### 2. Backend endpoint

Bolt will generate something like this — make sure the API key is loaded from an environment variable:

```javascript theme={null}
import express from "express";
import { ScrapeGraphAI } from "scrapegraph-js";

const app = express();
app.use(express.json());

// Reads SGAI_API_KEY from process.env
const sgai = ScrapeGraphAI();

app.post("/api/scrape", async (req, res) => {
  const { url, prompt } = req.body;

  const result = await sgai.extract({ url, prompt });

  if (result.status === "success") {
    res.json({ data: result.data?.json, usage: result.data?.usage });
  } else {
    res.status(502).json({ error: result.error });
  }
});

app.listen(3001);
```

If you prefer `fetch` over the SDK, call the v2 REST endpoint directly:

```javascript theme={null}
const response = await fetch("https://v2-api.scrapegraphai.com/api/extract", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "SGAI-APIKEY": process.env.SGAI_API_KEY,
  },
  body: JSON.stringify({ url, prompt }),
});
```

### 3. Add your API key

In Bolt.new, open the environment variables panel and add:

```
SGAI_API_KEY=your-api-key-here
```

### 4. Call from the frontend

```javascript theme={null}
const response = await fetch("/api/scrape", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    url: "https://example.com",
    prompt: "Extract the product name and price",
  }),
});

const { data } = await response.json();
console.log(data);
```

## Example prompt for Bolt

> Build a price tracker UI. It should have an input for a product URL and a button. When clicked, it calls the backend `/api/scrape` endpoint and shows the extracted product name and price in a card.