How to Integrate Lovable with SEMrush

Log in to your SEMrush account at semrush.com and navigate to your account profile settings. Look for the API section or go directly to semrush.com/api-analytics. Your API key is displayed on this page as a long alphanumeric string. If you are on the free plan, you will have access to 10 API units per day, which is enough for testing. For a production dashboard, you will need a Pro plan ($129.95/month) or higher, which includes a larger API unit allocation. Copy your API key and do not paste it into Lovable's chat interface — instead you will store it in Cloud Secrets in the next step. SEMrush also displays your current API unit balance on this page, which you should monitor when building your dashboard to avoid hitting limits unexpectedly. The API key is a 32-character hex string unique to your account.

In your Lovable project, click the plus (+) icon next to the preview window to open the side panels. Select the Cloud tab. Scroll down to the Secrets section and click Add Secret. In the Name field, type SEMRUSH_API_KEY exactly — this is case-sensitive and must match what your Edge Function will use. Paste your SEMrush API key into the Value field. Click Save. The key is now encrypted and stored in the server-side environment. It will only be accessible from Edge Functions via Deno.env.get('SEMRUSH_API_KEY') — it will never appear in browser network requests, JavaScript bundles, or any client-side code. This is Lovable's secure secrets architecture, which also prevents the key from being committed to your GitHub repository if you have GitHub sync enabled.

Prompt Lovable to create an Edge Function that accepts requests from your frontend, reads the SEMRUSH_API_KEY from secrets, and proxies calls to the SEMrush API. The SEMrush API is a query-string-based REST API. Most endpoints accept parameters like type (the report type), domain or phrase, database (the regional database, e.g. 'us' for United States), export_columns (which data columns to return), and display_limit (max rows). The function constructs the SEMrush API URL at https://api.semrush.com/ with all parameters including the key, makes the fetch request, and returns the CSV or JSON response (SEMrush returns CSV by default; you can request JSON in some endpoints). The Edge Function should parse the CSV response into JSON for easier consumption by the frontend. Include CORS headers for all responses.

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
8function csvToJson(csv: string): Record<string, string>[] {
9  const lines = csv.trim().split('\n')
10  if (lines.length < 2) return []
11  const headers = lines[0].split(';')
12  return lines.slice(1).map(line => {
13    const values = line.split(';')
14    return Object.fromEntries(headers.map((h, i) => [h.trim(), values[i]?.trim() ?? '']))
15  })
16}
17
18serve(async (req) => {
19  if (req.method === 'OPTIONS') {
20    return new Response('ok', { headers: corsHeaders })
21  }
22
23  try {
24    const apiKey = Deno.env.get('SEMRUSH_API_KEY')
25    if (!apiKey) {
26      return new Response(
27        JSON.stringify({ error: 'SEMRUSH_API_KEY not configured' }),
28        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
29      )
30    }
31
32    const url = new URL(req.url)
33    const type = url.searchParams.get('type')
34    const target = url.searchParams.get('target')
35    const database = url.searchParams.get('database') || 'us'
36    const displayLimit = url.searchParams.get('display_limit') || '10'
37    const exportColumns = url.searchParams.get('export_columns') || ''
38
39    if (!type || !target) {
40      return new Response(
41        JSON.stringify({ error: 'type and target parameters are required' }),
42        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
43      )
44    }
45
46    const semrushUrl = new URL('https://api.semrush.com/')
47    semrushUrl.searchParams.set('type', type)
48    semrushUrl.searchParams.set('key', apiKey)
49    semrushUrl.searchParams.set('database', database)
50    semrushUrl.searchParams.set('display_limit', displayLimit)
51    // domain vs phrase endpoint uses different param name
52    if (type.startsWith('phrase_')) {
53      semrushUrl.searchParams.set('phrase', target)
54    } else {
55      semrushUrl.searchParams.set('domain', target)
56    }
57    if (exportColumns) semrushUrl.searchParams.set('export_columns', exportColumns)
58
59    const response = await fetch(semrushUrl.toString())
60    const text = await response.text()
61
62    // Check for SEMrush error responses
63    if (text.startsWith('ERROR') || text.includes('ERROR 50')) {
64      return new Response(
65        JSON.stringify({ error: 'SEMrush API error', details: text }),
66        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
67      )
68    }
69
70    const jsonData = csvToJson(text)
71
72    return new Response(
73      JSON.stringify({ rows: jsonData, total: jsonData.length }),
74      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
75    )
76  } catch (error) {
77    return new Response(
78      JSON.stringify({ error: error.message }),
79      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
80    )
81  }
82})

With the Edge Function working, build the keyword research dashboard in Lovable. The most valuable report for a first dashboard is the keyword overview (type=phrase_this) combined with a domain organic report (type=domain_organic). Ask Lovable to create a page with two sections: a keyword search section where you enter a phrase and get back volume, difficulty, CPC, and competitive density; and a domain section where you enter a domain and see its top organic keywords with their positions, traffic estimates, and keyword difficulty. Use shadcn/ui Table, Card, and Badge components for the layout. The difficulty score (0–100) should be visualized as a color-coded badge: green (0–39 Easy), yellow (40–69 Medium), red (70–100 Hard). Add a database selector dropdown so users can switch between US, UK, and other SEMrush regional databases.

SEMrush API calls consume credits that do not regenerate immediately. To prevent your dashboard from exhausting your daily credit allocation, implement response caching in Supabase. Create a Supabase table called semrush_cache with columns: cache_key (text, primary key), data (jsonb), and created_at (timestamptz). The cache key is a hash of the type + target + database parameters. Before calling the SEMrush API, the Edge Function checks if a non-expired cache entry exists for this cache key. Use a cache TTL of 12 hours — SEMrush updates its data roughly once per day for most metrics. On a cache miss, call SEMrush, store the result, and return it. On a cache hit, return the cached result with a note in the response indicating it is cached. This approach can reduce SEMrush API credit consumption by over 90% for dashboards that display the same domains and keywords throughout the day.