How to Integrate SpyFu with V0

Open V0 at v0.dev and describe the competitive SEO dashboard you need. SpyFu data is inherently tabular and numerical — keyword lists with rankings, CPC values, and traffic estimates. V0 does well with data-heavy dashboard layouts using sortable tables and summary stat cards. Ask V0 for specific components: a domain search input that triggers a fetch to your API route, summary cards showing key metrics (total keywords, monthly traffic estimate, ad spend), and data tables for organic and paid keywords. V0 will generate a React client component that manages the domain input state and fetches from /api/spyfu/domain on form submission. Review the generated mock data structure in V0's component — the column names and data shapes will inform how you need to structure your API route's response. Pay attention to how V0 renders the tables: if it generates a generic Table component from shadcn/ui, note the data prop structure expected. Push the generated project to GitHub using V0's Git panel to enable Vercel auto-deployment.

Create the API route that calls SpyFu's REST API for domain analysis data. The SpyFu API base URL is https://www.spyfu.com/apis/domain_api/v2/ for domain data. Authentication uses HTTP Basic Auth with your username and secret key. The main endpoints you need are the domain overview endpoint (which returns summary stats like total keywords and estimated traffic) and the top keywords endpoint (which returns lists of the domain's top organic and paid keywords with their metrics). The API uses query parameters including q (the domain to analyze) and api_key for some endpoints. Check SpyFu's API documentation for the exact parameter names for your plan tier — the Professional API and Enterprise API have slightly different endpoint structures. Your API route receives a domain query parameter from the component, calls SpyFu, and returns transformed data. SpyFu API responses can be large — apply a reasonable page size limit (top 20-50 keywords) to keep response times fast. The route should validate the domain format before sending it to SpyFu to avoid wasting API calls on invalid input.

1// app/api/spyfu/domain/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SPYFU_API_BASE = 'https://www.spyfu.com/apis';
5
6async function spyfuFetch(path: string): Promise<Response> {
7  const apiKey = process.env.SPYFU_SECRET_KEY;
8  const username = process.env.SPYFU_USERNAME;
9
10  if (!apiKey || !username) {
11    throw new Error('SpyFu credentials not configured');
12  }
13
14  const credentials = Buffer.from(`${username}:${apiKey}`).toString('base64');
15
16  return fetch(`${SPYFU_API_BASE}${path}`, {
17    headers: {
18      Authorization: `Basic ${credentials}`,
19      Accept: 'application/json',
20    },
21    next: { revalidate: 3600 }, // Cache for 1 hour - SpyFu data doesn't change frequently
22  });
23}
24
25export async function GET(request: NextRequest) {
26  const { searchParams } = new URL(request.url);
27  const domain = searchParams.get('domain');
28
29  if (!domain) {
30    return NextResponse.json({ error: 'domain parameter is required' }, { status: 400 });
31  }
32
33  // Validate domain format
34  const domainRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/;
35  if (!domainRegex.test(domain)) {
36    return NextResponse.json({ error: 'Invalid domain format' }, { status: 400 });
37  }
38
39  try {
40    // Fetch domain overview
41    const [overviewRes, organicRes, paidRes] = await Promise.all([
42      spyfuFetch(`/domain_api/v2/stats/json?q=${domain}&countryCode=US`),
43      spyfuFetch(`/domain_api/v2/organic_keywords/json?q=${domain}&pageSize=20&countryCode=US`),
44      spyfuFetch(`/domain_api/v2/paid_keywords/json?q=${domain}&pageSize=20&countryCode=US`),
45    ]);
46
47    if (!overviewRes.ok) {
48      throw new Error(`SpyFu API error: ${overviewRes.status}`);
49    }
50
51    const [overview, organicData, paidData] = await Promise.all([
52      overviewRes.json(),
53      organicRes.ok ? organicRes.json() : { results: [] },
54      paidRes.ok ? paidRes.json() : { results: [] },
55    ]);
56
57    return NextResponse.json({
58      domain,
59      summary: {
60        totalOrganicKeywords: overview.totalOrganicKeywords || 0,
61        totalPaidKeywords: overview.totalPaidKeywords || 0,
62        monthlyOrganicClicks: overview.monthlyOrganicClicks || 0,
63        monthlyBudget: overview.monthlyBudget || 0,
64        domainStrength: overview.domainStrength || 0,
65      },
66      organicKeywords: (organicData.results || []).map((kw: Record<string, unknown>) => ({
67        keyword: kw.keyword,
68        monthlySearches: kw.searchVolume || 0,
69        position: kw.rankingPosition || 0,
70        traffic: kw.clicksPerMonth || 0,
71      })),
72      paidKeywords: (paidData.results || []).map((kw: Record<string, unknown>) => ({
73        keyword: kw.keyword,
74        monthlySearches: kw.searchVolume || 0,
75        avgCpc: kw.avgAdWordsAdsCPC || 0,
76        monthlyBudget: kw.monthlyBudget || 0,
77      })),
78    });
79  } catch (error) {
80    console.error('SpyFu API error:', error);
81    return NextResponse.json(
82      { error: 'Failed to fetch SpyFu data' },
83      { status: 500 }
84    );
85  }
86}

Update your V0-generated dashboard components to fetch from the /api/spyfu/domain route when the user submits a domain. The component should manage three states: idle (before any search), loading (while fetching), and data (once the response arrives). The form's submit handler should call fetch('/api/spyfu/domain?domain=' + encodeURIComponent(domain)) and update state based on the response. Map the returned data objects to your table components' expected format. The keyword tables should be sortable — your component can use React's useState to track the current sort column and direction, sorting the data array before rendering. Add a formatted currency display for the ad spend values (the monthlyBudget field is in dollars) and format large numbers with commas for readability. If V0 generated generic table components, the data-to-table mapping should be straightforward. If V0 generated more specific components with hardcoded column definitions, update those definitions to match the actual SpyFu data fields your API route returns.

Push your project to GitHub and add SpyFu credentials to Vercel. Open the Vercel Dashboard, go to your project → Settings → Environment Variables. Add SPYFU_USERNAME with your SpyFu account username (usually your email address) and SPYFU_SECRET_KEY with your API secret key from SpyFu's API settings page. Neither should have the NEXT_PUBLIC_ prefix — both are server-side secrets. Set them for Production, Preview, and Development environments. After saving, trigger a deployment from the Deployments tab. Once deployed, test by entering a well-known competitor domain (try your own company's website first to verify the data looks reasonable). Check the Vercel Function Logs if you encounter errors — they'll show the raw error from SpyFu's API, which is typically more helpful than the generic error message returned to the client. SpyFu API plans have monthly call limits, so monitor your usage in SpyFu's account dashboard to ensure you're not approaching the limit during heavy development testing.