How to Integrate Bolt.new with Sprout Social

Sprout Social's API access is not self-serve — it requires applying through their partner program or requesting access as an Enterprise customer. This is the most important step to understand before planning your integration: unlike most APIs where you sign up and get keys immediately, Sprout Social's approval process can take several days to weeks. Start by visiting developer.sproutsocial.com to read the documentation and application requirements. If you're a Sprout Social Enterprise customer, contact your account manager directly — they can often enable API access faster than the public partner program. For developers and agencies building third-party tools, apply at sproutsocial.com/partners with a description of your use case. Once approved, you'll receive Client ID and Client Secret credentials for OAuth 2.0 authentication. Sprout Social uses the Authorization Code OAuth 2.0 flow — users authorize your app through a browser redirect, Sprout sends an authorization code to your callback URL, and your app exchanges it for an access token. The access token is what you include in all subsequent API requests. Store Client ID and Client Secret in your .env file as SPROUT_CLIENT_ID and SPROUT_CLIENT_SECRET. Important: because the OAuth flow requires a redirect to a registered callback URL, you must deploy your Bolt app to get a stable URL before you can test the full authentication flow. During development, you can use a personal access token if Sprout Social provides one, or use an existing valid access token you've already obtained to test the API routes without the full OAuth flow.

1// lib/sproutsocial.ts
2const SPROUT_BASE = 'https://api.sproutsocial.com/v1';
3
4async function sproutRequest<T>(
5  endpoint: string,
6  accessToken?: string,
7  method: string = 'GET',
8  body?: Record<string, unknown>
9): Promise<T> {
10  const token = accessToken || process.env.SPROUT_ACCESS_TOKEN;
11
12  if (!token) {
13    throw new Error('Sprout Social access token is required');
14  }
15
16  const response = await fetch(`${SPROUT_BASE}/${endpoint}`, {
17    method,
18    headers: {
19      Authorization: `Bearer ${token}`,
20      'Content-Type': 'application/json',
21      Accept: 'application/json',
22    },
23    ...(body ? { body: JSON.stringify(body) } : {}),
24  });
25
26  if (!response.ok) {
27    const error = await response.text();
28    throw new Error(`Sprout Social API ${response.status}: ${error}`);
29  }
30
31  return response.json();
32}
33
34export const getProfiles = (token?: string) =>
35  sproutRequest('profiles', token);
36
37export const getProfileAnalytics = (
38  profileId: string,
39  startDate: string,
40  endDate: string,
41  token?: string
42) =>
43  sproutRequest(
44    `analytics/profiles/${profileId}?start=${startDate}&end=${endDate}&fields=engagements,impressions,followers`,
45    token
46  );
47
48export const getTopPosts = (
49  profileId: string,
50  startDate: string,
51  endDate: string,
52  token?: string
53) =>
54  sproutRequest(
55    `posts?profile_ids=${profileId}&start=${startDate}&end=${endDate}&sort=engagement_rate&limit=10`,
56    token
57  );

Sprout Social uses OAuth 2.0 Authorization Code flow — users authorize your app through Sprout's login page and your app receives an authorization code that it exchanges for an access token. Because this flow involves a browser redirect to a callback URL, it requires a deployed app with a stable public URL — the WebContainer's dynamic preview URL cannot be pre-registered as an OAuth redirect URI in Sprout Social. Deploy your Bolt app to Netlify or Bolt Cloud first, then register your deployed URL as the callback URI in Sprout Social's developer settings. The OAuth flow works as follows: your app redirects the user to Sprout Social's authorization URL (https://api.sproutsocial.com/oauth2/authorize) with your Client ID, requested scopes, and callback URL as query parameters. The user logs in to Sprout Social and grants your app permission. Sprout redirects back to your callback URL with an authorization code. Your callback route exchanges the code for an access token via a POST request to Sprout's token endpoint. Store the access token (and refresh token if provided) in the user's session — encrypted cookies or a database row tied to the user's session. For internal tools where you're the only user, you can simplify this by manually generating an access token using the OAuth flow once and storing it as an environment variable. For multi-user apps, implement proper per-user token storage and refresh logic. Sprout Social access tokens expire — implement token refresh logic using the refresh token to request a new access token without requiring the user to log in again.

1// app/api/sproutsocial/callback/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const { searchParams } = new URL(request.url);
6  const code = searchParams.get('code');
7  const error = searchParams.get('error');
8
9  if (error || !code) {
10    return NextResponse.redirect(
11      new URL(`/dashboard?error=${error || 'no_code'}`, request.url)
12    );
13  }
14
15  const params = new URLSearchParams({
16    grant_type: 'authorization_code',
17    client_id: process.env.SPROUT_CLIENT_ID!,
18    client_secret: process.env.SPROUT_CLIENT_SECRET!,
19    code,
20    redirect_uri: `${process.env.APP_URL}/api/sproutsocial/callback`,
21  });
22
23  const tokenResponse = await fetch('https://api.sproutsocial.com/oauth2/token', {
24    method: 'POST',
25    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
26    body: params.toString(),
27  });
28
29  if (!tokenResponse.ok) {
30    return NextResponse.redirect(new URL('/dashboard?error=token_exchange_failed', request.url));
31  }
32
33  const { access_token, refresh_token } = await tokenResponse.json();
34
35  // Store tokens in session or database
36  // For simplicity here: set as HTTP-only cookie
37  const response = NextResponse.redirect(new URL('/dashboard', request.url));
38  response.cookies.set('sprout_token', access_token, {
39    httpOnly: true,
40    secure: true,
41    sameSite: 'lax',
42    maxAge: 3600,
43  });
44
45  return response;
46}

With authentication in place, build the core analytics dashboard that fetches engagement data across all connected social profiles and presents it in a unified view. The Sprout Social API organizes analytics by profile (a connected social account) and time period. Fetch the profile list on dashboard load, then for each profile fetch analytics for the selected time range. Sprout Social's analytics API returns standardized metrics across platforms — impressions, engagements (likes, comments, shares), engagement rate, follower count, link clicks, and more. Display the data in a dashboard layout with: summary KPI cards at the top showing totals across all platforms, a Recharts line chart showing engagement trends over time, a bar chart comparing performance across platforms, and a detailed table of top posts. The cross-platform comparison is where Sprout Social's API shines compared to using individual platform APIs — the data is already normalized into consistent metrics regardless of whether it comes from Twitter, Instagram, Facebook, or LinkedIn. Implement a date range picker (Last 7 days, Last 30 days, Last 90 days) with state that triggers refetches when changed. Fetch analytics for all profiles in parallel using Promise.all() to minimize dashboard load time. Add loading skeleton states for each chart section so the dashboard feels responsive even while data loads. For the KPI cards, calculate percentage change vs the previous equivalent period (if showing last 30 days, compare to the 30 days before that) and show a green/red indicator for the direction of change.

1// app/api/sproutsocial/analytics/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getProfileAnalytics } from '@/lib/sproutsocial';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const profileId = searchParams.get('profile_id');
8  const startDate = searchParams.get('start');
9  const endDate = searchParams.get('end');
10  const token = request.cookies.get('sprout_token')?.value;
11
12  if (!profileId || !startDate || !endDate) {
13    return NextResponse.json(
14      { error: 'profile_id, start, and end are required' },
15      { status: 400 }
16    );
17  }
18
19  try {
20    const data = await getProfileAnalytics(profileId, startDate, endDate, token);
21    return NextResponse.json(data);
22  } catch (error) {
23    console.error('Sprout Social analytics error:', error);
24    return NextResponse.json({ error: 'Failed to fetch analytics' }, { status: 500 });
25  }
26}

If Sprout Social API access is pending or unavailable, you can build an equivalent analytics dashboard using native social platform APIs directly. This approach provides the same data with more direct access but requires separate authentication flows for each platform. Facebook Graph API provides comprehensive analytics for Facebook Pages and Instagram Business accounts — get a Page Access Token from developers.facebook.com and query the /PAGE_ID/insights endpoint for reach, impressions, and engagement metrics. Twitter API v2 (now X API) provides tweet metrics via the /2/users/:id/tweets endpoint with metrics=public_metrics — you'll need API v2 access from the Twitter developer portal. LinkedIn Pages API provides organization analytics at the /organizationalEntityShareStatistics endpoint. Build separate API routes for each platform, then aggregate the results in your dashboard component. This approach has more moving parts (three separate OAuth flows instead of one) but provides more granular control over the data and doesn't require Sprout Social API approval. The WebContainer limitation applies here too: OAuth callback URLs for Facebook, Twitter, and LinkedIn all require registered redirect URIs. The Facebook and LinkedIn flows require a deployed URL for callback registration, though Twitter supports OOB (out-of-band) auth for some use cases. Deploy to Netlify or Bolt Cloud before testing the full OAuth flows for any of these platforms.

1// app/api/social/summary/route.ts — aggregates multiple platform APIs
2import { NextRequest, NextResponse } from 'next/server';
3
4async function getFacebookMetrics(pageId: string) {
5  const token = process.env.FACEBOOK_PAGE_ACCESS_TOKEN;
6  const metric = 'page_impressions,page_engaged_users,page_post_engagements';
7  const res = await fetch(
8    `https://graph.facebook.com/v19.0/${pageId}/insights?metric=${metric}&period=day&access_token=${token}`
9  );
10  return res.json();
11}
12
13async function getTwitterMetrics(userId: string) {
14  const res = await fetch(
15    `https://api.twitter.com/2/users/${userId}/tweets?tweet.fields=public_metrics&max_results=10`,
16    { headers: { Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}` } }
17  );
18  return res.json();
19}
20
21export async function GET(request: NextRequest) {
22  const { searchParams } = new URL(request.url);
23  const facebookPageId = searchParams.get('facebook_page_id');
24  const twitterUserId = searchParams.get('twitter_user_id');
25
26  const results = await Promise.allSettled([
27    facebookPageId ? getFacebookMetrics(facebookPageId) : Promise.resolve(null),
28    twitterUserId ? getTwitterMetrics(twitterUserId) : Promise.resolve(null),
29  ]);
30
31  return NextResponse.json({
32    facebook: results[0].status === 'fulfilled' ? results[0].value : null,
33    twitter: results[1].status === 'fulfilled' ? results[1].value : null,
34  });
35}