How to Integrate Lovable with RescueTime

Log in to your RescueTime account at rescuetime.com. Navigate to the API management page at rescuetime.com/anapi/manage — you can also find this by clicking your username in the top-right corner, selecting 'API Keys' from the profile menu, or visiting Settings → Integrations → API Keys. On the API management page, you will see a section for creating new API keys. Click 'Create a new API key'. You will be prompted to give the key a name (something like 'Lovable Dashboard') and to specify the purpose — select 'For myself' since this key will access your personal data. Leave the scope at the default 'All' to ensure the key can access daily summaries, category data, and productivity scores. Once created, the key appears as a long alphanumeric string. Copy it immediately — RescueTime does not show the full key again after you leave the page. Store it temporarily in a secure location like a password manager. The RescueTime Analytic Data API base URL is https://www.rescuetime.com/anapi/data and all requests use the format: https://www.rescuetime.com/anapi/data?key=YOUR_KEY&format=json&perspective=interval&resolution_time=day.

In your Lovable project, open the Cloud tab by clicking the '+' icon next to the Preview panel at the top of the editor. In the Cloud tab sidebar, click 'Secrets' to open the Secrets management panel. Click 'Add new secret'. Set the Name to RESCUETIME_API_KEY (exactly as written, all uppercase with underscore). Paste your RescueTime API key as the Value. Click Save. This secret is now encrypted and stored server-side in your Lovable Cloud project. It will be injected into Edge Function environments automatically. Your Deno Edge Function code will access it via Deno.env.get('RESCUETIME_API_KEY'). Lovable's security layer — which prevents approximately 1,200 API keys from being hardcoded into application code every day — will flag any attempt to use this value in frontend React code, ensuring your RescueTime key stays protected. Unlike services that require multiple credentials (workspace ID, secret key, etc.), RescueTime only needs a single API key, making the secrets configuration minimal. One secret is all you need for this integration.

The Edge Function acts as a secure intermediary between your Lovable frontend and the RescueTime API. It reads the API key from the Deno environment, constructs authenticated API URLs, fetches data from RescueTime, and returns it to the frontend. Because all authentication happens server-side, the browser never sees the API key. The RescueTime Analytic Data API uses query parameters for both authentication (key) and data selection (perspective, resolution_time, restrict_begin, restrict_end, restrict_kind). The Edge Function translates simple action names from the frontend into properly formatted RescueTime API URLs with all required parameters.

1// supabase/functions/rescuetime-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9const BASE_URL = 'https://www.rescuetime.com/anapi/data';
10
11serve(async (req) => {
12  if (req.method === 'OPTIONS') {
13    return new Response('ok', { headers: corsHeaders });
14  }
15
16  try {
17    const apiKey = Deno.env.get('RESCUETIME_API_KEY');
18    if (!apiKey) {
19      return new Response(
20        JSON.stringify({ error: 'RESCUETIME_API_KEY not configured' }),
21        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      );
23    }
24
25    const { action, payload = {} } = await req.json();
26    const today = new Date().toISOString().split('T')[0];
27    const params = new URLSearchParams({ key: apiKey, format: 'json' });
28
29    switch (action) {
30      case 'get_daily_summary':
31        params.set('perspective', 'interval');
32        params.set('resolution_time', 'day');
33        params.set('restrict_begin', payload.date || today);
34        params.set('restrict_end', payload.date || today);
35        break;
36      case 'get_date_range_summary':
37        params.set('perspective', 'interval');
38        params.set('resolution_time', 'day');
39        params.set('restrict_begin', payload.start_date);
40        params.set('restrict_end', payload.end_date);
41        break;
42      case 'get_category_data':
43        params.set('perspective', 'rank');
44        params.set('resolution_time', 'day');
45        params.set('restrict_kind', 'category');
46        params.set('restrict_begin', payload.start_date || today);
47        params.set('restrict_end', payload.end_date || today);
48        break;
49      case 'get_productivity_data':
50        params.set('perspective', 'rank');
51        params.set('resolution_time', 'day');
52        params.set('restrict_kind', 'productivity');
53        params.set('restrict_begin', payload.start_date || today);
54        params.set('restrict_end', payload.end_date || today);
55        break;
56      case 'get_top_apps':
57        params.set('perspective', 'rank');
58        params.set('resolution_time', 'day');
59        params.set('restrict_kind', 'activity');
60        params.set('restrict_begin', payload.date || today);
61        params.set('restrict_end', payload.date || today);
62        params.set('restrict_begin', payload.date || today);
63        break;
64      default:
65        return new Response(
66          JSON.stringify({ error: `Unknown action: ${action}` }),
67          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
68        );
69    }
70
71    const res = await fetch(`${BASE_URL}?${params.toString()}`);
72    const data = await res.json();
73
74    return new Response(JSON.stringify(data), {
75      status: res.status,
76      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
77    });
78  } catch (err) {
79    return new Response(
80      JSON.stringify({ error: err.message }),
81      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
82    );
83  }
84});

With the Edge Function in place, ask Lovable to build the main dashboard page. The dashboard should fetch daily summary data when it loads and display the key productivity metrics that RescueTime tracks: Productivity Pulse score, total time logged, productive versus distracting time breakdown, and a list of top applications. The design should make the Pulse score visually prominent since it is the single most useful number RescueTime produces — a 0-100 daily focus quality rating. The dashboard should also show a 30-day trend line so users can see their productivity patterns over time, not just today's snapshot. This requires fetching a date range summary and rendering it as a chart using shadcn/ui's built-in chart components which wrap Recharts.