How to Integrate Lovable with Ubersuggest

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 BASE = 'https://app.neilpatel.com/api'
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const body = await req.json()
17    const { action } = body
18
19    const apiKey = Deno.env.get('UBERSUGGEST_API_KEY')
20    if (!apiKey) throw new Error('Missing required secret: UBERSUGGEST_API_KEY')
21
22    const authHeaders = {
23      Authorization: `Bearer ${apiKey}`,
24      'Content-Type': 'application/json',
25    }
26
27    const handleRateLimit = (res: Response) => {
28      if (res.status === 429) {
29        throw new Error('Ubersuggest API rate limit reached. Please try again later or check your plan limits.')
30      }
31    }
32
33    if (action === 'keyword-suggestions') {
34      const { keyword, countryCode = 'us', count = 100 } = body
35      if (!keyword) throw new Error('keyword is required')
36
37      const params = new URLSearchParams({
38        keyword: encodeURIComponent(keyword),
39        countryCode,
40        language: 'en',
41        count: String(count),
42      })
43
44      const res = await fetch(`${BASE}/keywords/v2/keywords-by-keyword?${params}`, { headers: authHeaders })
45      handleRateLimit(res)
46
47      if (!res.ok) {
48        const err = await res.json().catch(() => ({}))
49        throw new Error(`Ubersuggest keyword error ${res.status}: ${JSON.stringify(err)}`)
50      }
51
52      const data = await res.json()
53      const keywords = (data.keywords || data || []).map((k: Record<string, unknown>) => ({
54        keyword: k.keyword_text || k.keyword,
55        searchVolume: k.sv || 0,
56        seoDifficulty: k.sd || 0,
57        paidDifficulty: k.pd || 0,
58        cpc: k.cpc || 0,
59      }))
60
61      return new Response(
62        JSON.stringify({ success: true, keywords, total: keywords.length }),
63        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64      )
65    }
66
67    if (action === 'domain-overview') {
68      const { domain, countryCode = 'us' } = body
69      if (!domain) throw new Error('domain is required')
70
71      const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/.*/, '')
72      const params = new URLSearchParams({ domain: cleanDomain, countryCode })
73
74      const res = await fetch(`${BASE}/traffic-by-domain/v1?${params}`, { headers: authHeaders })
75      handleRateLimit(res)
76
77      if (!res.ok) {
78        const err = await res.json().catch(() => ({}))
79        throw new Error(`Ubersuggest domain error ${res.status}: ${JSON.stringify(err)}`)
80      }
81
82      const data = await res.json()
83      return new Response(
84        JSON.stringify({
85          success: true,
86          domain: cleanDomain,
87          monthlyVisits: data.estimated_visits || data.organic_monthly_traffic || 0,
88          organicKeywords: data.organic_keywords_count || 0,
89          domainAuthority: data.domain_authority || data.da || 0,
90        }),
91        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
92      )
93    }
94
95    throw new Error(`Unknown action: ${action}. Use 'keyword-suggestions' or 'domain-overview'.`)
96  } catch (error) {
97    return new Response(
98      JSON.stringify({ error: error.message }),
99      { status: error.message.includes('rate limit') ? 429 : 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
100    )
101  }
102})

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 { toast } from '@/components/ui/use-toast'
7
8interface Keyword { keyword: string; searchVolume: number; seoDifficulty: number; cpc: number }
9
10const difficultyLabel = (sd: number) => {
11  if (sd < 30) return { label: 'Easy', color: 'text-green-600' }
12  if (sd < 60) return { label: 'Medium', color: 'text-yellow-600' }
13  return { label: 'Hard', color: 'text-red-600' }
14}
15
16export const KeywordResearch = () => {
17  const [seed, setSeed] = useState('')
18  const [country, setCountry] = useState('us')
19  const [keywords, setKeywords] = useState<Keyword[]>([])
20  const [loading, setLoading] = useState(false)
21  const [sortBy, setSortBy] = useState<keyof Keyword>('searchVolume')
22
23  const handleSearch = async (e: React.FormEvent) => {
24    e.preventDefault()
25    setLoading(true)
26    try {
27      const { data, error } = await supabase.functions.invoke('ubersuggest-seo', {
28        body: { action: 'keyword-suggestions', keyword: seed, countryCode: country },
29      })
30      if (error) throw error
31      setKeywords(data.keywords || [])
32    } catch (err: unknown) {
33      const msg = err instanceof Error ? err.message : 'Search failed'
34      toast({ title: msg.includes('rate limit') ? 'Daily API limit reached' : 'Search failed', variant: 'destructive' })
35    } finally {
36      setLoading(false)
37    }
38  }
39
40  const sorted = [...keywords].sort((a, b) => (b[sortBy] as number) - (a[sortBy] as number))
41
42  return (
43    <div className="space-y-6">
44      <form onSubmit={handleSearch} className="flex gap-2 max-w-xl">
45        <Input value={seed} onChange={(e) => setSeed(e.target.value)} placeholder="Enter seed keyword" required />
46        <Select value={country} onValueChange={setCountry}>
47          <SelectTrigger className="w-28"><SelectValue /></SelectTrigger>
48          <SelectContent>
49            <SelectItem value="us">US</SelectItem>
50            <SelectItem value="gb">UK</SelectItem>
51            <SelectItem value="ca">CA</SelectItem>
52            <SelectItem value="au">AU</SelectItem>
53          </SelectContent>
54        </Select>
55        <Button type="submit" disabled={loading}>{loading ? 'Searching...' : 'Search'}</Button>
56      </form>
57      {keywords.length > 0 && (
58        <div className="overflow-x-auto">
59          <table className="w-full text-sm">
60            <thead>
61              <tr className="border-b">
62                <th className="text-left py-2">Keyword</th>
63                <th className="text-right py-2 cursor-pointer" onClick={() => setSortBy('searchVolume')}>Volume {sortBy === 'searchVolume' ? '▼' : ''}</th>
64                <th className="text-right py-2 cursor-pointer" onClick={() => setSortBy('seoDifficulty')}>Difficulty {sortBy === 'seoDifficulty' ? '▼' : ''}</th>
65                <th className="text-right py-2 cursor-pointer" onClick={() => setSortBy('cpc')}>CPC {sortBy === 'cpc' ? '▼' : ''}</th>
66              </tr>
67            </thead>
68            <tbody>
69              {sorted.map((kw, i) => {
70                const diff = difficultyLabel(kw.seoDifficulty)
71                return (
72                  <tr key={i} className="border-b hover:bg-muted/40">
73                    <td className="py-2">{kw.keyword}</td>
74                    <td className="text-right py-2">{kw.searchVolume.toLocaleString()}</td>
75                    <td className={`text-right py-2 font-medium ${diff.color}`}>{diff.label} ({kw.seoDifficulty})</td>
76                    <td className="text-right py-2">${kw.cpc.toFixed(2)}</td>
77                  </tr>
78                )
79              })}
80            </tbody>
81          </table>
82        </div>
83      )}
84    </div>
85  )
86}