How to Integrate Bolt.new with RescueTime

RescueTime provides API keys for personal data access through their API management page. Unlike OAuth-based APIs where you request access to another user's data, RescueTime's personal API key gives you access to your own account's data only. Navigate to rescuetime.com/anapi/manage while logged in to your RescueTime account. If you have a free RescueTime Lite account, API access is available but limited to 3 months of historical data and the overview data type. The RescueTime Premium plan ($12/month or $78/year as of 2026) unlocks the full API with all data types, unlimited history, and higher query frequency. On the API management page, you will see your existing API key or an option to create one. Click 'Create new API key' and give it a descriptive label like 'Bolt Dashboard'. The key is displayed immediately — it is a long alphanumeric string like 'BuHXXX'. Copy it right away and store it in your password manager. Unlike some APIs that show the key only once, RescueTime allows you to view it again later on the API management page, but it is good practice to save it immediately. Note that this is a personal API key tied to your account — it provides read access to all your RescueTime data. Never share it publicly or commit it to source control. RescueTime's API does not support OAuth on behalf of other users without building a formal RescueTime connected application.

Add your RescueTime API key to the .env file in your Bolt project as RESCUETIME_API_KEY. This is a server-side-only variable — do not use the VITE_ or NEXT_PUBLIC_ prefix because your API key should never be exposed in browser-side JavaScript. All RescueTime API calls go through your server-side API routes. The RescueTime Analytic Data API endpoint is https://www.rescuetime.com/anapi/data with GET parameters. The key parameters are: key (your API key), format=json (request JSON instead of CSV), perspective (interval for time-based data or rank for sorted summaries), resolution_time (minute, hour, day, week, month — determines data granularity), time_scope (today, yesterday, week, month, year, or a specific date range), restrict_kind (the data category: overview for the productivity summary, category for category breakdown, activity for individual app/website data, productivity for the productivity pulse). For building a productivity dashboard, the most useful combination is restrict_kind=productivity with resolution_time=day to get daily productivity scores. The response is a JSON object with rows_headers (column names array) and rows (array of data rows). The column order matters: for productivity data, the columns are typically [Date, Time Spent Seconds, Number of People, Efficiency (Pulse)]. Map these by index when processing the response. Prompt Bolt to create a base utility function that handles the common API call pattern with error handling.

1// lib/rescuetime.ts
2export const RESCUETIME_API_BASE = 'https://www.rescuetime.com/anapi/data';
3
4export interface RescueTimeResponse {
5  rows_headers: string[];
6  rows: (string | number)[][];
7  notes: string;
8}
9
10export async function fetchRescueTime(params: Record<string, string>): Promise<RescueTimeResponse> {
11  const url = new URL(RESCUETIME_API_BASE);
12  url.searchParams.set('key', process.env.RESCUETIME_API_KEY!);
13  url.searchParams.set('format', 'json');
14  Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
15
16  const response = await fetch(url.toString(), {
17    next: { revalidate: 300 }, // Cache for 5 minutes
18  });
19
20  if (!response.ok) {
21    throw new Error(`RescueTime API error: ${response.status} ${response.statusText}`);
22  }
23
24  const data = await response.json();
25
26  if (data.error) {
27    throw new Error(`RescueTime error: ${data.error}`);
28  }
29
30  return data;
31}

The daily productivity summary is the most useful view for a RescueTime dashboard — it tells you at a glance how productive today was. The best query for this uses restrict_kind=efficiency with perspective=rank and time_scope=day (or 'today'). Alternatively, restrict_kind=overview with perspective=rank shows all tracked time grouped into productivity categories. The overview data structure lists rows with columns: date, time_spent (seconds), number_of_people, productivity_pulse, category, activity, and document. The productivity_pulse column uses a 5-point scale: 2 (very productive), 1 (productive), 0 (neutral), -1 (distracting), -2 (very distracting). Group the rows by productivity level and sum the time_spent to get totals for each category. Convert seconds to hours and minutes for display. The total productive hours are the sum of time_spent for rows with productivity_pulse > 0. The productivity pulse score (shown as 0-100 in RescueTime's UI) is calculated as (average_productivity + 2) / 4 * 100 across all tracked time. Build an API route that performs this aggregation and returns clean summary data for the dashboard component. Add caching with revalidate: 300 since the data updates every few minutes regardless.

1// app/api/rescuetime/daily/route.ts
2import { NextResponse } from 'next/server';
3import { fetchRescueTime } from '@/lib/rescuetime';
4
5export async function GET() {
6  try {
7    const data = await fetchRescueTime({
8      perspective: 'rank',
9      restrict_kind: 'overview',
10      time_scope: 'today',
11    });
12
13    const rows = data.rows;
14
15    let productiveSeconds = 0;
16    let neutralSeconds = 0;
17    let distractingSeconds = 0;
18    let totalWeightedPulse = 0;
19    let totalSeconds = 0;
20    const categoryTotals: Record<string, number> = {};
21
22    for (const row of rows) {
23      const timeSpent = row[1] as number;
24      const pulse = row[3] as number;
25      const category = row[4] as string;
26
27      totalSeconds += timeSpent;
28      totalWeightedPulse += pulse * timeSpent;
29      categoryTotals[category] = (categoryTotals[category] || 0) + timeSpent;
30
31      if (pulse > 0) productiveSeconds += timeSpent;
32      else if (pulse === 0) neutralSeconds += timeSpent;
33      else distractingSeconds += timeSpent;
34    }
35
36    const avgPulse = totalSeconds > 0 ? totalWeightedPulse / totalSeconds : 0;
37    const productivityScore = Math.round(((avgPulse + 2) / 4) * 100);
38
39    const topCategory = Object.entries(categoryTotals)
40      .sort(([, a], [, b]) => b - a)[0]?.[0] || 'None';
41
42    return NextResponse.json({
43      productiveHours: Math.round(productiveSeconds / 36) / 100,
44      neutralHours: Math.round(neutralSeconds / 36) / 100,
45      distractingHours: Math.round(distractingSeconds / 36) / 100,
46      totalTrackedHours: Math.round(totalSeconds / 36) / 100,
47      productivityScore,
48      topCategory,
49    });
50  } catch (error) {
51    const message = error instanceof Error ? error.message : 'Failed to fetch RescueTime data';
52    return NextResponse.json({ error: message }, { status: 500 });
53  }
54}

With the API routes in place, build the dashboard UI using Bolt's AI. The main /productivity page should have a clean header showing today's date and a productivity score meter — display the 0-100 score as a large number with a colored ring (green for 70+, yellow for 40-70, red for below 40). Below the score, show four stat cards: Total Tracked Time, Productive Time (green), Neutral Time (gray), and Distracting Time (red). Add a Recharts BarChart below the stats showing a stacked bar with productive/neutral/distracting for each of the last 7 days — fetch this from /api/rescuetime/trends if you have built that route, or skip it initially and add it in a follow-up prompt. For the category breakdown, use a Recharts PieChart with outer radius as a donut and labels showing the percentage. RescueTime categories include human-readable names like 'Software Development', 'Reference & Learning', 'Communication & Scheduling', 'Social Media', 'Entertainment', which can be colored intuitively. Connect to the /api/rescuetime/daily route with a useEffect on the client side. Since all RescueTime API calls are outbound GET requests, this dashboard works completely in Bolt's WebContainer during development — you see your own real RescueTime data immediately. No deployment is needed to build and test the full dashboard experience.

1// Helper to format seconds as '3h 24m'
2export function formatDuration(seconds: number): string {
3  const hours = Math.floor(seconds / 3600);
4  const minutes = Math.floor((seconds % 3600) / 60);
5  if (hours === 0) return `${minutes}m`;
6  if (minutes === 0) return `${hours}h`;
7  return `${hours}h ${minutes}m`;
8}
9
10// Productivity score color
11export function getScoreColor(score: number): string {
12  if (score >= 70) return '#22c55e'; // green-500
13  if (score >= 40) return '#eab308'; // yellow-500
14  return '#ef4444'; // red-500
15}