Skip to main content
v0 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: 
npm i scrapegraph-js@latest
Create app/api/scrape/route.ts in your Next.js project: 
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: 
SGAI_API_KEY=your-api-key-here

​
4. Fetch data inside your component

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.
Never pass SGAI_API_KEY to a client component. Keep it on the server side.