How to Integrate Bolt.new with SpyFu

1// lib/spyfu.ts
2const SPYFU_BASE_URL = 'https://api.spyfu.com';
3
4export async function callSpyfuAPI(
5  path: string,
6  params: Record<string, string | number> = {}
7): Promise<any> {
8  const apiKey = process.env.SPYFU_API_KEY;
9  if (!apiKey) {
10    throw new Error('SPYFU_API_KEY environment variable is not set');
11  }
12
13  // HTTP Basic Auth: key as username, empty password
14  const credentials = Buffer.from(`${apiKey}:`).toString('base64');
15
16  const url = new URL(`${SPYFU_BASE_URL}${path}`);
17  Object.entries(params).forEach(([k, v]) => {
18    url.searchParams.set(k, String(v));
19  });
20
21  const response = await fetch(url.toString(), {
22    headers: {
23      Authorization: `Basic ${credentials}`,
24      Accept: 'application/json',
25    },
26  });
27
28  if (!response.ok) {
29    const error = await response.text();
30    throw new Error(`SpyFu API error ${response.status}: ${error}`);
31  }
32
33  return response.json();
34}

1// app/api/spyfu/organic-keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { callSpyfuAPI } from '@/lib/spyfu';
4
5export async function GET(request: NextRequest) {
6  const domain = request.nextUrl.searchParams.get('domain');
7  const countryCode = request.nextUrl.searchParams.get('countryCode') ?? 'US';
8
9  if (!domain) {
10    return NextResponse.json({ error: 'domain is required' }, { status: 400 });
11  }
12
13  // Strip protocol and www
14  const cleanDomain = domain
15    .replace(/^https?:\/\//, '')
16    .replace(/^www\./, '')
17    .replace(/\/$/, '')
18    .toLowerCase();
19
20  try {
21    const data = await callSpyfuAPI('/organic/v2/domain/keywords', {
22      domain: cleanDomain,
23      countryCode,
24      pageSize: 20,
25      startingRow: 1,
26    });
27
28    const keywords = (data?.results ?? []).map((item: any) => ({
29      keyword: item.term ?? '',
30      rank: item.rank ?? 0,
31      monthlySearches: item.localMonthlySearches ?? 0,
32      monthlyClicks: item.monthlyClicks ?? 0,
33      clickThruRate: item.domainClickThruRate ?? 0,
34    }));
35
36    return NextResponse.json({ domain: cleanDomain, countryCode, keywords });
37  } catch (error) {
38    const message = error instanceof Error ? error.message : 'Unknown error';
39    return NextResponse.json({ error: message }, { status: 500 });
40  }
41}

1// app/api/spyfu/paid-keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { callSpyfuAPI } from '@/lib/spyfu';
4
5export async function GET(request: NextRequest) {
6  const domain = request.nextUrl.searchParams.get('domain');
7  const countryCode = request.nextUrl.searchParams.get('countryCode') ?? 'US';
8
9  if (!domain) {
10    return NextResponse.json({ error: 'domain is required' }, { status: 400 });
11  }
12
13  const cleanDomain = domain
14    .replace(/^https?:\/\//, '')
15    .replace(/^www\./, '')
16    .replace(/\/$/, '')
17    .toLowerCase();
18
19  try {
20    const data = await callSpyfuAPI('/paid/v2/domain/keywords', {
21      domain: cleanDomain,
22      countryCode,
23      pageSize: 10,
24      startingRow: 1,
25    });
26
27    const keywords = (data?.results ?? []).map((item: any) => ({
28      keyword: item.term ?? '',
29      monthlyBudget: item.monthlyBudget ?? 0,
30      monthsBidding: item.monthsSearched ?? 0,
31      averageCPC: item.cpc ?? 0,
32      adStrength: item.strength ?? 0,
33    }));
34
35    return NextResponse.json({ domain: cleanDomain, keywords });
36  } catch (error) {
37    const message = error instanceof Error ? error.message : 'Unknown error';
38    return NextResponse.json({ error: message }, { status: 500 });
39  }
40}

1// components/ExportButton.tsx
2'use client';
3
4interface ExportButtonProps {
5  data: Record<string, unknown>[];
6  filename: string;
7}
8
9export default function ExportButton({ data, filename }: ExportButtonProps) {
10  const exportCSV = () => {
11    if (data.length === 0) return;
12    const headers = Object.keys(data[0]).join(',');
13    const rows = data.map((row) =>
14      Object.values(row)
15        .map((v) => (typeof v === 'string' && v.includes(',') ? `"${v}"` : v))
16        .join(',')
17    );
18    const csv = [headers, ...rows].join('\n');
19    const blob = new Blob([csv], { type: 'text/csv' });
20    const url = URL.createObjectURL(blob);
21    const a = document.createElement('a');
22    a.href = url;
23    a.download = filename;
24    a.click();
25    URL.revokeObjectURL(url);
26  };
27
28  return (
29    <button onClick={exportCSV} disabled={data.length === 0}>
30      Export {data.length} rows as CSV
31    </button>
32  );
33}