How to Integrate Lovable with Serpstat

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 SERPSTAT_API = 'https://api.serpstat.com/v4'
9
10async function serpstatRequest(apiToken: string, method: string, params: Record<string, unknown>) {
11  const res = await fetch(SERPSTAT_API, {
12    method: 'POST',
13    headers: {
14      Authorization: `Bearer ${apiToken}`,
15      'Content-Type': 'application/json',
16    },
17    body: JSON.stringify({ id: 1, method, params }),
18  })
19
20  if (res.status === 401) throw new Error('Invalid Serpstat API token — check SERPSTAT_API_TOKEN in Cloud → Secrets')
21  if (res.status === 429) throw new Error('Serpstat daily API limit reached. Upgrade your plan or try again tomorrow.')
22  if (!res.ok) throw new Error(`Serpstat API error ${res.status}`)
23
24  const data = await res.json()
25  if (data.error) throw new Error(`Serpstat error: ${data.error.message || JSON.stringify(data.error)}`)
26  return data
27}
28
29serve(async (req) => {
30  if (req.method === 'OPTIONS') {
31    return new Response('ok', { headers: corsHeaders })
32  }
33
34  try {
35    const body = await req.json()
36    const { method, keyword, domain, searchDb, size = 100 } = body
37
38    const apiToken = Deno.env.get('SERPSTAT_API_TOKEN')
39    const defaultDb = Deno.env.get('SERPSTAT_DEFAULT_DB') || 'g_us'
40    if (!apiToken) throw new Error('Missing required secret: SERPSTAT_API_TOKEN')
41
42    const db = searchDb || defaultDb
43
44    if (method === 'SerpstatKeyword.getKeywords') {
45      if (!keyword) throw new Error('keyword is required for SerpstatKeyword.getKeywords')
46
47      const data = await serpstatRequest(apiToken, 'SerpstatKeyword.getKeywords', {
48        keyword,
49        se: db,
50        size,
51      })
52
53      const raw = data.result?.data || []
54      const keywords = raw.map((k: Record<string, unknown>) => ({
55        keyword: k.keyword,
56        volume: k.region_queries_count || 0,
57        difficulty: k.keyword_difficulty || 0,
58        cpc: k.cost || 0,
59        competition: k.concurrency || 0,
60      }))
61
62      return new Response(
63        JSON.stringify({ success: true, keywords, total: keywords.length, database: db }),
64        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
65      )
66    }
67
68    if (method === 'SerpstatDomain.getInfo') {
69      if (!domain) throw new Error('domain is required for SerpstatDomain.getInfo')
70
71      const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/.*/, '').replace(/^www\./, '')
72      const data = await serpstatRequest(apiToken, 'SerpstatDomain.getInfo', {
73        domain: cleanDomain,
74        se: db,
75      })
76
77      const result = data.result || {}
78      return new Response(
79        JSON.stringify({
80          success: true,
81          domain: cleanDomain,
82          database: db,
83          organicKeywords: result.organic_keywords || 0,
84          estimatedTraffic: result.traff || 0,
85          visibility: result.visible || 0,
86          domainPower: result.domain_power || 0,
87        }),
88        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
89      )
90    }
91
92    if (method === 'SerpstatDomain.getTopKeywords') {
93      if (!domain) throw new Error('domain is required')
94      const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/.*/, '').replace(/^www\./, '')
95
96      const data = await serpstatRequest(apiToken, 'SerpstatDomain.getTopKeywords', {
97        domain: cleanDomain,
98        se: db,
99        size,
100      })
101
102      const raw = data.result?.data || []
103      const rankings = raw.map((r: Record<string, unknown>) => ({
104        keyword: r.keyword,
105        position: r.position || 0,
106        volume: r.region_queries_count || 0,
107        url: r.url || '',
108        trafficEstimate: r.traff || 0,
109      }))
110
111      return new Response(
112        JSON.stringify({ success: true, rankings, total: rankings.length, database: db }),
113        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
114      )
115    }
116
117    throw new Error(`Unsupported method: ${method}. Supported: SerpstatKeyword.getKeywords, SerpstatDomain.getInfo, SerpstatDomain.getTopKeywords`)
118  } catch (error) {
119    return new Response(
120      JSON.stringify({ error: error.message }),
121      {
122        status: error.message.includes('rate limit') ? 429 : 500,
123        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
124      }
125    )
126  }
127})

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
6import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
7import { toast } from '@/components/ui/use-toast'
8
9const DB_OPTIONS = [
10  { label: 'United States', value: 'g_us' },
11  { label: 'United Kingdom', value: 'g_uk' },
12  { label: 'Australia', value: 'g_au' },
13  { label: 'Canada', value: 'g_ca' },
14  { label: 'Germany', value: 'g_de' },
15]
16
17const diffColor = (d: number) => d < 30 ? 'text-green-600' : d < 60 ? 'text-yellow-600' : 'text-red-600'
18const diffLabel = (d: number) => d < 30 ? 'Easy' : d < 60 ? 'Medium' : 'Hard'
19
20export const SerpstatDashboard = () => {
21  const [keyword, setKeyword] = useState('')
22  const [domain, setDomain] = useState('')
23  const [searchDb, setSearchDb] = useState('g_us')
24  const [kwResults, setKwResults] = useState<Array<{ keyword: string; volume: number; difficulty: number; cpc: number }>>([]) 
25  const [domainData, setDomainData] = useState<Record<string, number | string> | null>(null)
26  const [loadingKw, setLoadingKw] = useState(false)
27  const [loadingDomain, setLoadingDomain] = useState(false)
28
29  const invoke = (body: Record<string, unknown>) =>
30    supabase.functions.invoke('serpstat-api', { body })
31
32  const searchKeywords = async (e: React.FormEvent) => {
33    e.preventDefault()
34    setLoadingKw(true)
35    try {
36      const { data, error } = await invoke({ method: 'SerpstatKeyword.getKeywords', keyword, searchDb })
37      if (error) throw error
38      setKwResults(data.keywords || [])
39    } catch (err: unknown) {
40      toast({ title: err instanceof Error ? err.message : 'Keyword search failed', variant: 'destructive' })
41    } finally { setLoadingKw(false) }
42  }
43
44  const searchDomain = async (e: React.FormEvent) => {
45    e.preventDefault()
46    setLoadingDomain(true)
47    try {
48      const { data, error } = await invoke({ method: 'SerpstatDomain.getInfo', domain, searchDb })
49      if (error) throw error
50      setDomainData(data)
51    } catch (err: unknown) {
52      toast({ title: err instanceof Error ? err.message : 'Domain lookup failed', variant: 'destructive' })
53    } finally { setLoadingDomain(false) }
54  }
55
56  return (
57    <div className="space-y-8">
58      {/* Keyword Research */}
59      <section>
60        <h2 className="text-xl font-semibold mb-4">Keyword Research</h2>
61        <form onSubmit={searchKeywords} className="flex gap-2 max-w-xl mb-4">
62          <Input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="Seed keyword" required />
63          <Select value={searchDb} onValueChange={setSearchDb}>
64            <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
65            <SelectContent>{DB_OPTIONS.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}</SelectContent>
66          </Select>
67          <Button type="submit" disabled={loadingKw}>{loadingKw ? 'Searching...' : 'Search'}</Button>
68        </form>
69        {kwResults.length > 0 && (
70          <table className="w-full text-sm">
71            <thead><tr className="border-b"><th className="text-left py-2">Keyword</th><th className="text-right">Volume</th><th className="text-right">Difficulty</th><th className="text-right">CPC</th></tr></thead>
72            <tbody>{kwResults.map((k, i) => (
73              <tr key={i} className="border-b hover:bg-muted/30">
74                <td className="py-2">{k.keyword}</td>
75                <td className="text-right">{k.volume.toLocaleString()}</td>
76                <td className={`text-right font-medium ${diffColor(k.difficulty)}`}>{diffLabel(k.difficulty)} ({k.difficulty})</td>
77                <td className="text-right">${k.cpc.toFixed(2)}</td>
78              </tr>
79            ))}</tbody>
80          </table>
81        )}
82      </section>
83
84      {/* Domain Overview */}
85      <section>
86        <h2 className="text-xl font-semibold mb-4">Domain Overview</h2>
87        <form onSubmit={searchDomain} className="flex gap-2 max-w-xl mb-4">
88          <Input value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="example.com" required />
89          <Select value={searchDb} onValueChange={setSearchDb}>
90            <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
91            <SelectContent>{DB_OPTIONS.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}</SelectContent>
92          </Select>
93          <Button type="submit" disabled={loadingDomain}>{loadingDomain ? 'Loading...' : 'Analyze'}</Button>
94        </form>
95        {domainData && (
96          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
97            {[['Organic Keywords', domainData.organicKeywords], ['Est. Monthly Traffic', domainData.estimatedTraffic], ['Visibility', domainData.visibility], ['Domain Power', domainData.domainPower]].map(([label, value]) => (
98              <Card key={label as string}><CardHeader><CardTitle className="text-sm text-muted-foreground">{label}</CardTitle></CardHeader><CardContent><p className="text-2xl font-bold">{Number(value).toLocaleString()}</p></CardContent></Card>
99            ))}
100          </div>
101        )}
102      </section>
103    </div>
104  )
105}