How to Integrate Pinterest Ads with V0

Open V0 and describe the Pinterest Ads analytics dashboard you want to build. Pinterest's visual format means a good dashboard design should incorporate some visual elements alongside the numbers — Pin thumbnails, color-coded performance indicators, and chart visualizations suited to campaign data. Ask V0 to generate a dashboard with metric summary cards at the top showing total spend, impressions, clicks, and conversions, followed by a sortable campaign data table below. Include a date range picker so users can filter by last 7 days, last 30 days, or a custom range. Ask for a spend trend line chart using recharts (V0 handles this library well). Request status badge components for campaign status (active, paused, archived) with color coding. Make sure V0 generates proper loading skeletons since API calls have latency, and request empty state components for when no campaigns are found. Once the UI is generated, review it in the V0 preview and refine any layout issues before moving on to the API routes.

Before writing any code, you need an access token for the Pinterest Ads API. There are two ways to obtain one. The first and simplest method for a single-account dashboard is to generate a long-lived token directly in the Pinterest Developer portal: go to developers.pinterest.com, log in, navigate to My Apps, create a new app, then use the app's credentials to generate an access token via the OAuth token endpoint. The token has the ads:read scope for fetching analytics data. The second method is implementing a full OAuth 2.0 authorization code flow for multi-account tools — this is more complex and requires redirect URI handling. For most analytics dashboards managing a single Pinterest Ads account, the long-lived token approach is sufficient. In the Pinterest Developer portal, go to your app settings, click 'Generate access token', select the ads:read scope, and copy the token that is generated. This token is tied to your Pinterest account and gives read access to all ad accounts associated with it. Store it securely — treat it like an API key.

Create a Next.js App Router route handler at app/api/pinterest-ads/campaigns/route.ts that calls the Pinterest Ads API v5 to fetch campaign performance data. The Pinterest Ads API base URL is https://api.pinterest.com/v5. To fetch campaigns, call GET /ad_accounts/{ad_account_id}/campaigns. To fetch analytics for those campaigns, call GET /ad_accounts/{ad_account_id}/campaigns/analytics with date range parameters in YYYY-MM-DD format. The analytics endpoint returns metrics per campaign per day. You will need your Pinterest ad account ID — find it in Ads Manager (the number in the URL when you are viewing your ad account). Your route handler should accept query parameters for startDate and endDate and pass them to the Pinterest analytics endpoint. Combine the campaign list (for names and budgets) with the analytics data (for performance metrics) by joining on campaignId. Return a unified array of campaign objects with both static fields and performance metrics to your frontend. Always authenticate using the Bearer token: set the Authorization header to Bearer ${process.env.PINTEREST_ACCESS_TOKEN}.

1// app/api/pinterest-ads/campaigns/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const PINTEREST_API = 'https://api.pinterest.com/v5';
5const AD_ACCOUNT_ID = process.env.PINTEREST_AD_ACCOUNT_ID;
6
7function getHeaders() {
8  return {
9    'Authorization': `Bearer ${process.env.PINTEREST_ACCESS_TOKEN}`,
10    'Content-Type': 'application/json',
11  };
12}
13
14export async function GET(request: NextRequest) {
15  const { searchParams } = new URL(request.url);
16  const startDate = searchParams.get('startDate') || getDefaultStartDate();
17  const endDate = searchParams.get('endDate') || getTodayDate();
18
19  try {
20    // Fetch campaigns list
21    const campaignsResponse = await fetch(
22      `${PINTEREST_API}/ad_accounts/${AD_ACCOUNT_ID}/campaigns?page_size=25`,
23      { headers: getHeaders(), next: { revalidate: 300 } }
24    );
25
26    if (!campaignsResponse.ok) {
27      return NextResponse.json(
28        { error: `Pinterest API error: ${campaignsResponse.status}` },
29        { status: campaignsResponse.status }
30      );
31    }
32
33    const campaignsData = await campaignsResponse.json();
34
35    // Fetch analytics for the date range
36    const analyticsUrl = new URL(
37      `${PINTEREST_API}/ad_accounts/${AD_ACCOUNT_ID}/campaigns/analytics`
38    );
39    analyticsUrl.searchParams.set('start_date', startDate);
40    analyticsUrl.searchParams.set('end_date', endDate);
41    analyticsUrl.searchParams.set('columns', 'SPEND_IN_DOLLAR,IMPRESSION_1,CLICK_TYPE_URL_CLICK,TOTAL_CONVERSIONS');
42    analyticsUrl.searchParams.set('granularity', 'TOTAL');
43
44    const analyticsResponse = await fetch(analyticsUrl.toString(), {
45      headers: getHeaders(),
46    });
47    const analyticsData = await analyticsResponse.json();
48
49    // Merge campaigns with analytics
50    const analyticsMap = new Map(
51      (analyticsData || []).map((a: Record<string, unknown>) => [a.campaign_id, a])
52    );
53
54    const campaigns = (campaignsData.items || []).map((c: Record<string, unknown>) => {
55      const analytics = analyticsMap.get(c.id) as Record<string, unknown> | undefined;
56      return {
57        id: c.id,
58        name: c.name,
59        status: c.status,
60        budget: c.daily_budget,
61        spend: analytics?.SPEND_IN_DOLLAR || 0,
62        impressions: analytics?.IMPRESSION_1 || 0,
63        clicks: analytics?.CLICK_TYPE_URL_CLICK || 0,
64        conversions: analytics?.TOTAL_CONVERSIONS || 0,
65        ctr: analytics?.IMPRESSION_1
66          ? ((analytics.CLICK_TYPE_URL_CLICK as number) / (analytics.IMPRESSION_1 as number) * 100).toFixed(2)
67          : '0.00',
68      };
69    });
70
71    return NextResponse.json({ campaigns });
72  } catch (error) {
73    console.error('Pinterest Ads error:', error);
74    return NextResponse.json({ error: 'Failed to fetch campaigns' }, { status: 500 });
75  }
76}
77
78function getDefaultStartDate() {
79  const d = new Date();
80  d.setDate(d.getDate() - 30);
81  return d.toISOString().split('T')[0];
82}
83
84function getTodayDate() {
85  return new Date().toISOString().split('T')[0];
86}

In the Vercel Dashboard, navigate to your project and click Settings → Environment Variables. Add the following variables. PINTEREST_ACCESS_TOKEN: the long-lived OAuth access token generated from the Pinterest Developer portal. PINTEREST_AD_ACCOUNT_ID: your Pinterest ad account ID — a numeric string found in the URL when viewing your Ads Manager account (e.g., if the URL is ads.pinterest.com/advertiser/123456789/, your account ID is 123456789). Neither of these variables should have the NEXT_PUBLIC_ prefix since they are used only in server-side route handlers and must never appear in browser-accessible JavaScript. Set these variables for all environment scopes: Production, Preview, and Development. For Development, you can use the same credentials since there is no separate sandbox environment for Pinterest Ads (you will be reading real campaign data). After adding the variables, redeploy your Vercel project. Verify the integration is working by navigating to /api/pinterest-ads/campaigns in your browser — you should see real campaign data returned.