# How to Integrate Lovable with RescueTime

- Tool: Lovable
- Difficulty: Intermediate
- Time required: 40 minutes
- Last updated: March 2026

## TL;DR

Integrate RescueTime with Lovable by building a Supabase Edge Function that proxies the RescueTime Analytic Data API using your personal API key. Store the key in Cloud → Secrets, create an Edge Function to fetch daily summaries, productivity scores, and category breakdowns, then prompt Lovable to generate a personal productivity dashboard with charts and trend analysis.

## Build a Personal Productivity Dashboard with RescueTime and Lovable

RescueTime distinguishes itself from manual time trackers by running completely automatically. Once installed on your computer or mobile device, it silently categorizes every application, website, and document you interact with — no start/stop buttons required. This automatic approach generates highly accurate data about how you actually spend your time, including idle periods, distracted browsing, and deep focus sessions. The result is a Productivity Pulse score (0-100) for each day that reflects your overall focus quality.

Integrating RescueTime data into a Lovable app lets you build custom productivity dashboards that go beyond what RescueTime's own interface offers. You can combine RescueTime data with other metrics stored in Supabase, create goal tracking interfaces, build weekly review pages for personal retrospectives, or surface productivity insights in team management tools. Because RescueTime tracks activity passively, the data is always available without any manual input from the user.

The RescueTime Analytic Data API uses a simple query-parameter authentication pattern: append ?key=YOUR_API_KEY to any request. The API returns JSON data about daily summaries, productivity scores, top applications and websites, and time spent in different categories. The Lovable Edge Function pattern keeps this key server-side, proxying requests safely while your frontend displays the results in rich charts and summary cards.

## Before you start

- A RescueTime account with the desktop or mobile client installed and running for at least a few days (to have data to display)
- Your RescueTime API key — found at rescuetime.com/anapi/manage under 'Create a new API key'
- A Lovable project with Lovable Cloud enabled
- Basic familiarity with Lovable's Cloud → Secrets panel
- RescueTime Premium recommended for full category and application-level data (free plan may have limited API access)

## Step-by-step guide

### 1. Generate your RescueTime API key

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.

**Expected result:** You have a RescueTime API key ready to add to Cloud Secrets. The key grants read access to your personal productivity and time-use data.

### 2. Store the RescueTime API key in Cloud Secrets

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.

**Expected result:** RESCUETIME_API_KEY appears in your Cloud → Secrets panel with its value masked. The secret is ready to be consumed by Edge Functions.

### 3. Create the RescueTime Edge Function proxy

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.

```
// supabase/functions/rescuetime-proxy/index.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
};

const BASE_URL = 'https://www.rescuetime.com/anapi/data';

serve(async (req) => {
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders });
  }

  try {
    const apiKey = Deno.env.get('RESCUETIME_API_KEY');
    if (!apiKey) {
      return new Response(
        JSON.stringify({ error: 'RESCUETIME_API_KEY not configured' }),
        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
      );
    }

    const { action, payload = {} } = await req.json();
    const today = new Date().toISOString().split('T')[0];
    const params = new URLSearchParams({ key: apiKey, format: 'json' });

    switch (action) {
      case 'get_daily_summary':
        params.set('perspective', 'interval');
        params.set('resolution_time', 'day');
        params.set('restrict_begin', payload.date || today);
        params.set('restrict_end', payload.date || today);
        break;
      case 'get_date_range_summary':
        params.set('perspective', 'interval');
        params.set('resolution_time', 'day');
        params.set('restrict_begin', payload.start_date);
        params.set('restrict_end', payload.end_date);
        break;
      case 'get_category_data':
        params.set('perspective', 'rank');
        params.set('resolution_time', 'day');
        params.set('restrict_kind', 'category');
        params.set('restrict_begin', payload.start_date || today);
        params.set('restrict_end', payload.end_date || today);
        break;
      case 'get_productivity_data':
        params.set('perspective', 'rank');
        params.set('resolution_time', 'day');
        params.set('restrict_kind', 'productivity');
        params.set('restrict_begin', payload.start_date || today);
        params.set('restrict_end', payload.end_date || today);
        break;
      case 'get_top_apps':
        params.set('perspective', 'rank');
        params.set('resolution_time', 'day');
        params.set('restrict_kind', 'activity');
        params.set('restrict_begin', payload.date || today);
        params.set('restrict_end', payload.date || today);
        params.set('restrict_begin', payload.date || today);
        break;
      default:
        return new Response(
          JSON.stringify({ error: `Unknown action: ${action}` }),
          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
        );
    }

    const res = await fetch(`${BASE_URL}?${params.toString()}`);
    const data = await res.json();

    return new Response(JSON.stringify(data), {
      status: res.status,
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  } catch (err) {
    return new Response(
      JSON.stringify({ error: err.message }),
      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
    );
  }
});
```

**Expected result:** Lovable creates and deploys the rescuetime-proxy Edge Function. It appears in Cloud → Logs and is ready to receive requests from your frontend components.

### 4. Build the productivity dashboard UI

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.

**Expected result:** A productivity dashboard renders with your real RescueTime data. The Pulse score gauge shows today's focus quality and the 30-day trend line displays your historical pattern.

## Best practices

- Always store your RescueTime API key in Cloud → Secrets, never in source code or Lovable's chat prompt — the key grants full read access to all your tracked activity data.
- Cache RescueTime data in your Supabase database nightly using a scheduled Edge Function or pg_cron, since historical data does not change and caching eliminates repeated API calls for trend charts.
- Handle the RescueTime API's rows/columns response format by building a reusable parser that maps row arrays to named objects before passing data to React components.
- Show an informative empty state when no data is available for a date range — RescueTime only has data for days when the client was actively running on a device.
- Display the Productivity Pulse score with contextual benchmarks (e.g., 'Your average is 68, above the 60 typical for knowledge workers') to make the score meaningful to users who are new to the concept.
- Respect that RescueTime data is personal and often sensitive — if building a shared team dashboard, clearly communicate what data is being displayed and ensure each user only sees their own data using Supabase RLS policies.
- Use date range queries rather than single-day queries whenever possible to minimize API calls — fetching 30 days in one request is more efficient than 30 individual daily requests.

## Use cases

### Personal daily focus score dashboard

Build a dashboard that displays your RescueTime Productivity Pulse for today and the past 30 days as a trend line chart. See your total productive hours versus distracting hours side by side, along with the top five most-used applications and websites. This gives you a daily habit tracker view of your focus quality without manually logging anything.

Prompt example:

```
Create a personal productivity dashboard that calls our rescuetime-proxy Edge Function to fetch today's daily summary data. Show the Productivity Pulse score (0-100) in a large circular gauge at the top. Below that show two columns: 'Productive Hours' and 'Distracting Hours' as numbers. Add a line chart showing the Productivity Pulse score for the past 30 days. At the bottom show a top 5 list of applications/websites used today by time spent. Use a clean dark theme with green for productive time and red for distracting time.
```

### Weekly productivity review with category breakdown

Create a weekly review page that aggregates RescueTime category data across a full week and presents it as a pie chart and detail table. Categories include Software Development, Communication, Social Media, and others that RescueTime assigns automatically. Use this for weekly retrospectives to identify patterns in how time is being distributed across different types of work.

Prompt example:

```
Build a Weekly Review page that fetches a week of RescueTime category data via the Edge Function. Show a date range picker defaulting to the current week. Display a donut chart of time split between RescueTime's major categories (Very Productive, Productive, Neutral, Distracting, Very Distracting). Below the chart show a detailed table with category name, hours spent, and color-coded productivity level. Add a week-over-week comparison showing the change in productive hours versus last week. Include a text summary at the top like 'You spent X hours in deep work this week, up Y% from last week.'
```

### Productivity trend tracker with daily goals

Build a goal-setting and tracking interface where users set a daily productive hours target stored in Supabase, then automatically compare actual RescueTime data against that goal each day. Display a calendar view showing which days hit the goal (green), missed it (red), or came close (yellow), creating a visual habit streak tracker driven entirely by automatic RescueTime data.

Prompt example:

```
Create a Productivity Goals page. Add a 'Daily Goal' input where I can set a target number of productive hours (saved to Supabase). Fetch the past 30 days of RescueTime daily summary data via the Edge Function. Display a calendar grid for the current month where each day shows the actual productive hours and is colored green if the goal was met, yellow if within 30 minutes of the goal, and red if missed. Below the calendar show the current streak of consecutive days meeting the goal and the all-time best streak. Show the goal completion percentage for the current month.
```

## Troubleshooting

### Edge Function returns 'Error 400: Bad Request' from the RescueTime API

Cause: The request parameters are malformed. Common causes include missing required parameters (key, format), invalid date formats (RescueTime requires YYYY-MM-DD), or an unsupported combination of perspective and restrict_kind parameters.

Solution: Verify that date parameters are formatted as YYYY-MM-DD strings with no time component. Check that perspective is set to either 'interval' or 'rank' — these are the only two supported values. If using restrict_kind, confirm the value is one of: 'activity', 'category', 'productivity', 'document', 'efficiency'. Review the full URL being constructed in the Edge Function by logging it temporarily.

```
const date = new Date(inputDate).toISOString().split('T')[0]; // Ensures YYYY-MM-DD format
```

### API returns 'premium required' error for category or application data

Cause: Your RescueTime account is on the free plan. The Analytic Data API's restrict_kind=category and restrict_kind=activity endpoints require a RescueTime Premium subscription. Free accounts can only access the basic daily summary data.

Solution: Upgrade to RescueTime Premium to access full API capabilities, or limit your integration to the basic daily summary endpoint (get_daily_summary and get_date_range_summary) which work on free accounts. You can build a useful productivity trend dashboard using only the daily summary data even on the free tier.

### Dashboard shows no data for today even though RescueTime is actively running

Cause: RescueTime processes and syncs activity data with a delay. Data for the current day may not be fully available until a sync occurs, which typically happens every few hours but can be delayed. Additionally, the API uses your account's timezone, which may differ from the UTC dates your Edge Function is generating.

Solution: Add a manual 'Sync' button in your app that triggers a RescueTime manual sync via the API endpoint GET /anapi/start_focustime (premium). For the timezone issue, ensure you are generating date strings in the user's local timezone rather than UTC. You can pass the date as a parameter from the frontend where the browser knows the local date.

```
const localDate = new Date().toLocaleDateString('en-CA'); // Returns YYYY-MM-DD in local timezone
```

### The productivity data rows array is empty even with correct dates

Cause: RescueTime only returns data for days where the client was active and logged activity. If the RescueTime desktop or mobile app was not running on a particular day, no data exists for that date and the API returns an empty rows array rather than an error.

Solution: Add null-checking and empty-state handling in your frontend for every data fetch. When rows is empty, display a message like 'No data recorded for this period — make sure RescueTime is running on your device.' Also verify that the RescueTime client is installed and enabled on the device generating the data you expect to see.

## Frequently asked questions

### Does RescueTime integration require premium?

The basic daily summary and productivity pulse data are available on the free RescueTime plan via the API. However, detailed category breakdowns, application-level data, and the restrict_kind=activity endpoint require RescueTime Premium. If you are on the free plan, you can still build a useful trend dashboard using daily totals and productivity scores.

### Can I track multiple users' RescueTime data in a shared team dashboard?

RescueTime's Analytic Data API is personal — each API key only accesses the data for the account that generated it. For a team dashboard, each team member would need to provide their own API key, which you would store as separate secrets. RescueTime does not offer a multi-user API for aggregating team data unless you are using their enterprise plan with admin API access.

### How current is the data returned by the RescueTime API?

RescueTime syncs activity data from the desktop client periodically — typically every few hours, but the frequency depends on your plan and settings. Data for today may be incomplete until the next sync. Historical data from previous days is fully synced and accurate. There is no real-time streaming API, so RescueTime integration is best suited for daily summary views rather than minute-by-minute activity feeds.

### Is it possible to write data back to RescueTime from Lovable?

The RescueTime Analytic Data API is primarily read-only for time tracking data. You can use the API to start and stop FocusTime sessions (premium feature) which blocks distracting sites. Manual time entries via the API are not supported — RescueTime is designed around automatic passive tracking. If you need writeable time tracking, consider Toggl Track or Clockify which both support creating time entries via their APIs.

### Can I combine RescueTime data with other metrics in my Lovable app?

Yes, this is one of the most powerful reasons to build a custom dashboard. You can fetch RescueTime data via the Edge Function, store it in a Supabase table, and join it with other metrics like GitHub commits, calendar events, or manual mood entries to build a holistic personal performance dashboard. For complex multi-source integrations, RapidDev's team can help design the data aggregation architecture.

---

Source: https://www.rapidevelopers.com/lovable-integration/rescuetime
© RapidDev — https://www.rapidevelopers.com/lovable-integration/rescuetime