How to Integrate Harvest with V0

Open your V0 project and use the chat to generate the time tracking dashboard interface. Be descriptive about the data you want to display — Harvest's API is rich with time entry data (date, hours, notes, project, task, person), project data (budget, spent hours, client), and invoice data (amounts, status, due dates). For a team utilization view, describe a table with team member names in rows and metrics in columns. For a project view, describe progress bars and budget comparison. For an invoice view, describe a kanban board or filterable table with status badges. The more specific you are about the layout, the less iteration you will need. Ask V0 to wire up the components to your planned API routes (/api/harvest/time-entries, /api/harvest/projects, /api/harvest/invoices). Specify the query parameters you want to support — date ranges, user filters, project ID. V0 will generate React components with useEffect hooks that fetch from these routes and display the results. Use Recharts for any charts since it comes pre-installed with V0's default stack.

Create a new file at app/api/harvest/route.ts. This is your server-side proxy to the Harvest API. The Harvest API v2 requires two headers on every request: Authorization: Bearer {token} (your Personal Access Token or OAuth2 access token) and Harvest-Account-ID: {account_id} (your numeric account ID). Both must be present for every API call. The time entries endpoint at https://api.harvestapp.com/v2/time_entries supports rich filtering: you can filter by project_id, user_id, from date (YYYY-MM-DD), to date, and whether entries are billed. The API returns paginated results with a next_page cursor — handle pagination if you need more than the default 100 entries per page. The response includes each time entry's ID, date, hours, notes, billable flag, project object, task object, and user object. Your API route can transform this data before returning it — for example, aggregating hours by user for a utilization view or grouping by project for a budget view. This server-side transformation reduces the amount of data sent to the browser and keeps your components simple.

1import { NextRequest, NextResponse } from 'next/server';
2
3const HARVEST_BASE_URL = 'https://api.harvestapp.com/v2';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const from = searchParams.get('from');
8  const to = searchParams.get('to');
9  const projectId = searchParams.get('project_id');
10  const userId = searchParams.get('user_id');
11
12  const token = process.env.HARVEST_ACCESS_TOKEN;
13  const accountId = process.env.HARVEST_ACCOUNT_ID;
14
15  if (!token || !accountId) {
16    return NextResponse.json(
17      { error: 'Harvest credentials not configured' },
18      { status: 500 }
19    );
20  }
21
22  const params = new URLSearchParams();
23  if (from) params.set('from', from);
24  if (to) params.set('to', to);
25  if (projectId) params.set('project_id', projectId);
26  if (userId) params.set('user_id', userId);
27  params.set('per_page', '100');
28
29  try {
30    const response = await fetch(
31      `${HARVEST_BASE_URL}/time_entries?${params.toString()}`,
32      {
33        headers: {
34          Authorization: `Bearer ${token}`,
35          'Harvest-Account-ID': accountId,
36          'User-Agent': 'MyApp (myapp@example.com)',
37          'Content-Type': 'application/json',
38        },
39      }
40    );
41
42    if (!response.ok) {
43      const error = await response.json();
44      return NextResponse.json(
45        { error: error.message || 'Harvest API error' },
46        { status: response.status }
47      );
48    }
49
50    const data = await response.json();
51    return NextResponse.json(data);
52  } catch (error) {
53    console.error('Harvest API error:', error);
54    return NextResponse.json(
55      { error: 'Failed to fetch time entries' },
56      { status: 500 }
57    );
58  }
59}

Your Harvest Personal Access Token and Account ID must be stored as Vercel environment variables. Go to Vercel Dashboard → Settings → Environment Variables and add two variables. To get your credentials: log in to Harvest at app.harvestapp.com, click your profile icon in the top-right corner, and select Developers. On the Developers page, scroll to the Personal Access Tokens section and click Create New Personal Access Token. Give it a name describing your integration (e.g., 'V0 Dashboard App') and copy the token — you can only see it once, so copy it immediately. For your Account ID: it appears in the URL when you are in Harvest. Navigate to any page in Harvest and look at the URL — it will contain app.harvestapp.com/time/accounts/12345678 where 12345678 is your Account ID. You can also find it in the Developers page. In Vercel, add HARVEST_ACCESS_TOKEN with your PAT value and HARVEST_ACCOUNT_ID with your numeric account ID. Both should be available in All Environments. After adding the variables, redeploy your project to make them available to your API routes.

Expand your Harvest integration by adding additional API routes for projects and invoices, which are commonly needed alongside time entries for a complete dashboard. Create app/api/harvest/projects/route.ts to fetch project data including name, client, budget hours, budget spent, and active status. The Harvest projects endpoint at /v2/projects supports filtering by client_id and is_active. The project report endpoint at /v2/reports/time/projects returns pre-aggregated data with hours and costs by project — useful for dashboard summaries without needing to aggregate time entries yourself. Create app/api/harvest/invoices/route.ts to fetch invoice data including client, total amount, due date, issue date, and payment status (draft, open, paid, overdue). The invoices endpoint at /v2/invoices supports filtering by status, client_id, and date ranges. This data powers invoice pipeline views, accounts receivable summaries, and cash flow forecasts. For each new endpoint, follow the same pattern: read credentials from environment variables, call the Harvest API with both required headers, handle errors, and return the data. For complex integrations combining multiple Harvest data sources into a single dashboard API response, RapidDev's team can help design the data aggregation layer.

1import { NextRequest, NextResponse } from 'next/server';
2
3const HARVEST_BASE_URL = 'https://api.harvestapp.com/v2';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const state = searchParams.get('state'); // open, paid, overdue, draft
8  const clientId = searchParams.get('client_id');
9
10  const token = process.env.HARVEST_ACCESS_TOKEN;
11  const accountId = process.env.HARVEST_ACCOUNT_ID;
12
13  if (!token || !accountId) {
14    return NextResponse.json(
15      { error: 'Harvest credentials not configured' },
16      { status: 500 }
17    );
18  }
19
20  const params = new URLSearchParams();
21  if (state) params.set('state', state);
22  if (clientId) params.set('client_id', clientId);
23  params.set('per_page', '50');
24
25  try {
26    const response = await fetch(
27      `${HARVEST_BASE_URL}/invoices?${params.toString()}`,
28      {
29        headers: {
30          Authorization: `Bearer ${token}`,
31          'Harvest-Account-ID': accountId,
32          'User-Agent': 'MyApp (myapp@example.com)',
33        },
34      }
35    );
36
37    if (!response.ok) {
38      return NextResponse.json(
39        { error: 'Failed to fetch invoices' },
40        { status: response.status }
41      );
42    }
43
44    const data = await response.json();
45    return NextResponse.json(data);
46  } catch (error) {
47    return NextResponse.json(
48      { error: 'Failed to fetch invoice data' },
49      { status: 500 }
50    );
51  }
52}