> ## 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 v0

> Integrate web scraping into UI components generated with Vercel v0

[v0](https://v0.dev) by Vercel is an AI tool that generates React UI components from prompts. You can combine it with ScrapeGraphAI to build components that display live data extracted from any website.

## How it works

v0 generates frontend components. ScrapeGraphAI runs server-side (e.g. in a Next.js API route or Server Action) to avoid exposing your API key and to bypass CORS restrictions.

## Setup

### 1. Generate your component with v0

Ask v0 to build a component, for example:

> Create a card component that displays a company name, description, and founding year fetched from an external API.

### 2. Add a Next.js API route

Install the v2 SDK:

```bash theme={null}
npm i scrapegraph-js@latest
```

Create `app/api/scrape/route.ts` in your Next.js project:

```typescript theme={null}
import { NextRequest, NextResponse } from "next/server";
import { ScrapeGraphAI } from "scrapegraph-js";

const sgai = ScrapeGraphAI(); // reads SGAI_API_KEY from env

export async function POST(req: NextRequest) {
  const { url, prompt } = await req.json();

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

  if (res.status === "success") {
    return NextResponse.json({ data: res.data?.json });
  }
  return NextResponse.json({ error: res.error }, { status: 502 });
}
```

### 3. Store your API key

Add `SGAI_API_KEY` to your `.env.local` file:

```bash theme={null}
SGAI_API_KEY=your-api-key-here
```

### 4. Fetch data inside your component

```typescript theme={null}
async function getScrapedData(url: string, prompt: string) {
  const res = await fetch("/api/scrape", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ url, prompt }),
  });
  return res.json();
}
```

## Tips

* Use Server Components (`async function Page()`) or Server Actions to call `sgai.extract` directly without an API route — the key stays on the server.
* Pass a `schema` (JSON Schema or Zod-compiled JSON Schema) to `sgai.extract({ url, prompt, schema })` to get typed, structured data back.

<Note>
  Never pass `SGAI_API_KEY` to a client component. Keep it on the server side.
</Note>