How to Integrate Bolt.new with Google Ads

Before writing any code, you need a Google Ads developer token — a prerequisite unique to the Google Ads API that has no equivalent in most other API integrations. A developer token is tied to a Manager account (also called a My Client Center or MCC account), not to a regular advertiser account. If you only have a standard Google Ads account, you must first create a Manager account at ads.google.com/home/tools/manager-accounts/. Once you have a Manager account, navigate to Tools and Settings → Setup → API Center within your Manager account dashboard. Fill in the application details: select your use case (reporting, campaign management, or both), describe your application, and submit the request. Google reviews developer token applications manually — approval typically takes 24 to 72 hours, though it can occasionally take longer. While waiting for approval, you receive a test-account developer token immediately. This test token can only query test accounts (Google Ads test accounts you create in the API Center), but it is sufficient to build and validate your entire integration before approval arrives. Standard access tokens unlock queries against real production campaign data. When your token is approved, it appears as a string in the API Center — copy it and store it securely. This token is added to the request headers of every Google Ads API call and must be kept server-side at all times.

The Google Ads API uses OAuth 2.0 for authentication, meaning users authorize your app to access their Google Ads data. Setting this up requires creating credentials in Google Cloud Console. Start at console.cloud.google.com — create a new project or use an existing one. Enable the Google Ads API: go to APIs and Services → Library, search for 'Google Ads API', and click Enable. Next, create OAuth 2.0 credentials: go to APIs and Services → Credentials → Create Credentials → OAuth 2.0 Client IDs. Choose 'Web application' as the application type. Under Authorized Redirect URIs, add your production callback URL (e.g., `https://your-app.netlify.app/api/auth/callback/google-ads`). During development you can also add `http://localhost:3000/api/auth/callback/google-ads`, but the full OAuth flow still requires a reachable URL for the callback — it will not work inside Bolt's WebContainer preview. After creating the credentials, download the JSON file — it contains your `client_id` and `client_secret`. To obtain a refresh token (which allows server-side API calls without re-prompting the user), use Google's OAuth 2.0 Playground at developers.google.com/oauthplayground. In Step 1, enter the scope `https://www.googleapis.com/auth/adwords`, authorize with the Google account that has access to your Ads account, then exchange the authorization code for a refresh token in Step 2. Copy the refresh token — this is long-lived and lets your API route authenticate silently. Store `client_id`, `client_secret`, and `refresh_token` in your `.env` file.

1# .env
2GOOGLE_ADS_DEVELOPER_TOKEN=your_developer_token_here
3GOOGLE_ADS_CLIENT_ID=your_oauth_client_id.apps.googleusercontent.com
4GOOGLE_ADS_CLIENT_SECRET=your_oauth_client_secret
5GOOGLE_ADS_REFRESH_TOKEN=your_refresh_token_from_oauth_playground
6GOOGLE_ADS_CUSTOMER_ID=1234567890

With credentials in hand, use Bolt's chat to generate the campaign dashboard. Be specific in your prompt — name the API route path, list the GAQL fields you need, specify the chart library (Recharts is built into most Bolt Next.js templates), and mention the environment variable names so Bolt uses exactly what you've defined in your .env file. Bolt generates several files: the Next.js API route at `app/api/google-ads/campaigns/route.ts` that initializes the `google-ads-api` client, constructs the GAQL query, executes the search, and returns structured JSON; a `CampaignDashboard` component that fetches from the API route using `useEffect` and renders the results in a table and chart; and the necessary TypeScript types for the campaign data structure. Review the generated API route carefully — check that the GAQL query includes the fields you need and that the `customer_id` is read from `process.env.GOOGLE_ADS_CUSTOMER_ID`. The `google-ads-api` package abstracts the gRPC layer, but the query syntax itself follows GAQL conventions: `SELECT campaign.name, metrics.impressions, metrics.clicks FROM campaign WHERE campaign.status = 'ENABLED' AND segments.date DURING LAST_30_DAYS`. Bolt often generates a working query but may need minor field name corrections — cross-reference with the Google Ads API field reference if you see 'invalid field' errors.

1// app/api/google-ads/campaigns/route.ts
2import { NextResponse } from 'next/server';
3import { GoogleAdsApi } from 'google-ads-api';
4
5const client = new GoogleAdsApi({
6  client_id: process.env.GOOGLE_ADS_CLIENT_ID!,
7  client_secret: process.env.GOOGLE_ADS_CLIENT_SECRET!,
8  developer_token: process.env.GOOGLE_ADS_DEVELOPER_TOKEN!,
9});
10
11export async function GET() {
12  try {
13    const customer = client.Customer({
14      customer_id: process.env.GOOGLE_ADS_CUSTOMER_ID!,
15      refresh_token: process.env.GOOGLE_ADS_REFRESH_TOKEN!,
16    });
17
18    const campaigns = await customer.query(`
19      SELECT
20        campaign.id,
21        campaign.name,
22        campaign.status,
23        metrics.impressions,
24        metrics.clicks,
25        metrics.cost_micros,
26        metrics.average_cpc,
27        metrics.conversions,
28        metrics.cost_per_conversion
29      FROM campaign
30      WHERE campaign.status = 'ENABLED'
31        AND segments.date DURING LAST_30_DAYS
32      ORDER BY metrics.cost_micros DESC
33    `);
34
35    const data = campaigns.map((row: any) => ({
36      id: row.campaign.id,
37      name: row.campaign.name,
38      status: row.campaign.status,
39      impressions: row.metrics.impressions,
40      clicks: row.metrics.clicks,
41      spend: (row.metrics.cost_micros / 1_000_000).toFixed(2),
42      averageCpc: (row.metrics.average_cpc / 1_000_000).toFixed(2),
43      conversions: row.metrics.conversions,
44      costPerConversion: row.metrics.cost_per_conversion
45        ? (row.metrics.cost_per_conversion / 1_000_000).toFixed(2)
46        : null,
47    }));
48
49    return NextResponse.json({ campaigns: data });
50  } catch (error: any) {
51    console.error('Google Ads API error:', error);
52    return NextResponse.json(
53      { error: error.message || 'Failed to fetch campaign data' },
54      { status: 500 }
55    );
56  }
57}

In Bolt's WebContainer preview, the campaign dashboard can be partially tested — outbound HTTP calls from the Next.js API route to the Google Ads API work correctly because they are outbound connections initiated by the server. However, the OAuth flow (the initial authorization and callback redirect) cannot complete in the preview because the callback URL must be a publicly reachable URL registered in Google Cloud Console, which the WebContainer cannot provide. For the dashboard use case — where you have already obtained a refresh token via the OAuth Playground — the API route works without any interactive OAuth step. Set your .env variables in Bolt's environment and open the preview to load the dashboard. The API route initializes the Google Ads API client using the stored refresh token, runs the GAQL query, and returns data silently. If the API route returns a 500 error in the preview, open the browser console and check the error message. Common issues at this stage: the `google-ads-api` package using a field name that does not match the GAQL specification (check the exact field name at developers.google.com/google-ads/api/fields), the customer ID format being incorrect (should be digits only, no dashes), or the developer token being a test token while querying a non-test account. For the test-account token scenario, create a Google Ads test account in the API Center and use that account's customer ID during development.

1// app/api/google-ads/campaigns/route.ts — date range support
2import { NextRequest, NextResponse } from 'next/server';
3import { GoogleAdsApi } from 'google-ads-api';
4
5const client = new GoogleAdsApi({
6  client_id: process.env.GOOGLE_ADS_CLIENT_ID!,
7  client_secret: process.env.GOOGLE_ADS_CLIENT_SECRET!,
8  developer_token: process.env.GOOGLE_ADS_DEVELOPER_TOKEN!,
9});
10
11const DATE_RANGES: Record<string, string> = {
12  '7': 'LAST_7_DAYS',
13  '30': 'LAST_30_DAYS',
14  '90': 'LAST_90_DAYS',
15};
16
17export async function GET(request: NextRequest) {
18  const { searchParams } = new URL(request.url);
19  const range = searchParams.get('range') ?? '30';
20  const during = DATE_RANGES[range] ?? 'LAST_30_DAYS';
21
22  const customer = client.Customer({
23    customer_id: process.env.GOOGLE_ADS_CUSTOMER_ID!,
24    refresh_token: process.env.GOOGLE_ADS_REFRESH_TOKEN!,
25  });
26
27  const campaigns = await customer.query(`
28    SELECT
29      campaign.id,
30      campaign.name,
31      metrics.impressions,
32      metrics.clicks,
33      metrics.cost_micros,
34      metrics.conversions
35    FROM campaign
36    WHERE campaign.status = 'ENABLED'
37      AND segments.date DURING ${during}
38    ORDER BY metrics.cost_micros DESC
39  `);
40
41  const data = campaigns.map((row: any) => ({
42    id: row.campaign.id,
43    name: row.campaign.name,
44    impressions: row.metrics.impressions,
45    clicks: row.metrics.clicks,
46    spend: (row.metrics.cost_micros / 1_000_000).toFixed(2),
47    conversions: row.metrics.conversions,
48  }));
49
50  return NextResponse.json({ campaigns: data, range: during });
51}

Once the dashboard works in Bolt's preview using a pre-configured refresh token, deploy to Netlify or Vercel to enable the full OAuth flow and make the app accessible to other users. In Netlify, connect your GitHub repository, set the build command to `npm run build`, and add all five environment variables in Site Configuration → Environment Variables: `GOOGLE_ADS_DEVELOPER_TOKEN`, `GOOGLE_ADS_CLIENT_ID`, `GOOGLE_ADS_CLIENT_SECRET`, `GOOGLE_ADS_REFRESH_TOKEN`, and `GOOGLE_ADS_CUSTOMER_ID`. After the first deployment, copy your production URL (e.g., `https://your-app.netlify.app`). Return to Google Cloud Console → APIs and Services → Credentials → your OAuth 2.0 client → Authorized Redirect URIs. Add your production callback URL: `https://your-app.netlify.app/api/auth/callback/google-ads`. Without this step, any attempt to authorize a new Google account will fail with a 'redirect_uri_mismatch' error. If your app is a multi-user tool where each user connects their own Google Ads account, implement a proper OAuth flow in Next.js API routes that stores each user's refresh token in a database such as Supabase. The single-account pattern with a pre-configured refresh token is appropriate for internal dashboards or agency tools where one set of credentials covers all the accounts you need. For SaaS apps where each user manages their own ad account, the full user-facing OAuth flow is required and Bolt can generate it from a single prompt.

1// app/api/auth/google-ads/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const params = new URLSearchParams({
6    client_id: process.env.GOOGLE_ADS_CLIENT_ID!,
7    redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback/google-ads`,
8    response_type: 'code',
9    scope: 'https://www.googleapis.com/auth/adwords',
10    access_type: 'offline',
11    prompt: 'consent',
12  });
13
14  return NextResponse.redirect(
15    `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`
16  );
17}
18
19// app/api/auth/callback/google-ads/route.ts
20import { NextRequest, NextResponse } from 'next/server';
21
22export async function GET(request: NextRequest) {
23  const { searchParams } = new URL(request.url);
24  const code = searchParams.get('code');
25
26  if (!code) {
27    return NextResponse.json({ error: 'No authorization code' }, { status: 400 });
28  }
29
30  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
31    method: 'POST',
32    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
33    body: new URLSearchParams({
34      code,
35      client_id: process.env.GOOGLE_ADS_CLIENT_ID!,
36      client_secret: process.env.GOOGLE_ADS_CLIENT_SECRET!,
37      redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback/google-ads`,
38      grant_type: 'authorization_code',
39    }),
40  });
41
42  const tokens = await tokenResponse.json();
43  // Store tokens.refresh_token in your database linked to the current user
44  return NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_URL}/dashboard`);
45}