How to Integrate Lovable with SpyFu

Log in to your SpyFu account at spyfu.com and navigate to your account settings by clicking your username or avatar in the top right corner, then selecting 'Account Settings' or 'My Account'. Look for an 'API' or 'API Access' section within your account settings. If you do not see an API option, verify that your plan includes API access — SpyFu's API is available on Professional ($39/month) and Team ($78/month) plans. If you are on the Basic plan, you will need to upgrade to access the API. In the API Access section, you will find your API key or a button to generate one. Click 'Generate API Key' if it has not been created yet. Copy the key, which is a long alphanumeric string. SpyFu's API key grants access to domain analytics, keyword data, and ad history queries, scoped by your plan's monthly query limits. The Professional plan typically includes a set number of API rows per month — check your plan details to understand your quota. The API key does not expire automatically but can be regenerated if compromised. Unlike OAuth2, there is no token refresh cycle. Store the key immediately in Cloud Secrets rather than saving it in a text file where it might get accidentally committed or shared.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview panel, then navigate to the Secrets section. Click 'Add Secret' and create a new secret named SPYFU_API_KEY with your API key as the value. This single credential is all that SpyFu requires for authentication. SpyFu's API typically accepts the key as a query parameter named api_key appended to every request URL — this is why storing it in an Edge Function secret is especially important. If it were used directly in frontend code, the key would be visible in every browser network request anyone makes to your Lovable app, visible in the browser's developer tools network tab and in any network monitoring tool. Routing through an Edge Function keeps the key on the server side where it belongs. Lovable's automated security infrastructure blocks approximately 1,200 hardcoded API keys per day from leaking into application code — but the strongest protection is the architectural decision to always use Cloud Secrets and Edge Functions for authenticated API calls. After saving the secret, verify it by checking the Secrets list in the Cloud tab and confirming SPYFU_API_KEY appears. The value will be masked with asterisks for security, but you can verify the secret name is correct.

Ask Lovable to create a Supabase Edge Function called spyfu-api that accepts an endpoint path and optional query parameters, then appends the API key and proxies the request to SpyFu's API. SpyFu's API base URL is https://www.spyfu.com/apis/domain_stats_api/v2/ for domain statistics, https://www.spyfu.com/apis/url_api/v2/ for URL-level data, and https://www.spyfu.com/apis/keyword_api/v2/ for keyword data. The API key is passed as a query parameter: ?api_key={key}&format=json. The Edge Function should accept an endpoint string (like 'getDomainStatsForExactDate'), a domain parameter, and any additional query parameters specific to the endpoint. It constructs the URL, appends all parameters including the API key, makes a GET request, and returns the JSON response. Key SpyFu endpoints to support include getDomainStatsForExactDate (domain PPC stats), getTopListFedomain (top keywords for a domain), getAdsForDomain (ad copy history), and getRelatedKeywordsforTerm (keyword research). Validate the domain parameter to ensure it is a plain domain without protocols or trailing slashes before forwarding to SpyFu — SpyFu returns errors or unexpected results for improperly formatted domains. Include an allowlist of the SpyFu API base URL paths to prevent proxy misuse.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8const ENDPOINT_BASES: Record<string, string> = {
9  domain: "https://www.spyfu.com/apis/domain_stats_api/v2/",
10  keyword: "https://www.spyfu.com/apis/keyword_api/v2/",
11  url: "https://www.spyfu.com/apis/url_api/v2/",
12};
13
14function getBaseUrl(endpoint: string): string {
15  if (endpoint.includes("Keyword") || endpoint.includes("keyword")) return ENDPOINT_BASES.keyword;
16  if (endpoint.includes("Url") || endpoint.includes("url")) return ENDPOINT_BASES.url;
17  return ENDPOINT_BASES.domain;
18}
19
20serve(async (req) => {
21  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
22
23  try {
24    const apiKey = Deno.env.get("SPYFU_API_KEY");
25    if (!apiKey) throw new Error("SPYFU_API_KEY not configured");
26
27    const { endpoint, domain, params = {} } = await req.json();
28    if (!endpoint) throw new Error("endpoint is required");
29    if (!domain) throw new Error("domain is required");
30
31    // Validate domain format (no protocol or trailing slash)
32    const cleanDomain = domain.replace(/^https?:\/\//, "").replace(/\/$/, "");
33
34    const baseUrl = getBaseUrl(endpoint);
35    const url = new URL(`${baseUrl}${endpoint}`);
36    url.searchParams.set("api_key", apiKey);
37    url.searchParams.set("format", "json");
38    url.searchParams.set("domain", cleanDomain);
39
40    Object.entries(params as Record<string, string>).forEach(([k, v]) => {
41      url.searchParams.set(k, v);
42    });
43
44    const response = await fetch(url.toString());
45    const data = await response.json();
46
47    if (!response.ok || data.error) {
48      throw new Error(data.error || `SpyFu API error: ${response.status}`);
49    }
50
51    return new Response(JSON.stringify(data), {
52      headers: { ...corsHeaders, "Content-Type": "application/json" },
53    });
54  } catch (error) {
55    return new Response(
56      JSON.stringify({ error: error.message }),
57      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
58    );
59  }
60});

With the Edge Function working, ask Lovable to build a competitive intelligence dashboard. The main SpyFu endpoint for PPC data is getDomainStatsForExactDate, which returns estimated monthly Google Ads spend, number of paid keywords, average ad position, and other metrics for a domain. Start by showing a list of competitor domains as input cards where users can type in competitor domain names. When a user adds a domain, call your Edge Function to fetch stats and display them as a metric card with the domain name, estimated monthly spend, number of paid keywords, and number of organic keywords. For the keyword overlap analysis, the getSharedPaidKeywords endpoint accepts two domains and returns keywords that both are bidding on — use this to build a head-to-head comparison view between your domain and any single competitor. For ad copy research, the getAdsForDomain endpoint returns a list of ad units with headlines and descriptions — display these in a scrollable card grid with the ad headline and description text, and sort by the estimated monthly spend on that keyword to surface the highest-investment ads first. Cache results per domain in React state for the current session to avoid repeat API calls when switching between competitor views.