Setup Capture for Vercel AI SDK

Vercel AI is an ecosystem of tools, libraries, and integrations designed to simplify the process of building AI-powered applications on Vercel’s platform. It enables developers to quickly integrate machine learning models, APIs, and AI services into their web applications with minimal setup.

Capture is a great addition to the Vercel AI SDK, bringing headless browser support to your Next.js applications.

Integrate Capture with Vercel AI

1. Get your API credentials from Capture.

If you haven't signed, make sure you sign up and get your API credentials from Capture Dashboard, you'll need both API key and secret.

2. Install the Vercel AI SDK & Capture SDK

npm i ai capture-node

3. Create a function to fetch page content using Capture SDK

async function getPageContent(url: string) {
	const capture = new Capture(
		process.env.CAPTURE_KEY,
		process.env.CAPTURE_SECRET,
	);

	const { textContent } = await capture.fetchContent(url, {
		delay: 1, // Adding a short delay to handle SPA (single page applications)
	});

	return textContent;
}

4. Create an endpoint to summarise webpage content

Below is an example of a route handler in the App Router, which uses the user question to search Google, use Capture API to get the text content from Google results and then summarise it using OpenAI.

import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

export async function GET(request: Request) {
	const question = "weather in Sydney";

	const info = await getPageContent(
	"https://www.google.com/search?q=" + question,
	);

	const { text } = await generateText({
		model: openai("gpt-4-turbo"),
		prompt: `Here is some context: ${info}, please answer the question: ${question}`,
	});

	return new Response(JSON.stringify({ content: text }), {
		status: 200,
		headers: { "Content-Type": "application/json" },
	});
}

Congratulations! You’ve successfully created a GET request to generate the summary of the page content using the Capture API and Vercel AI SDK.