How to Integrate SurveyMonkey with V0

SurveyMonkey uses OAuth2 for API authentication. For integrations where you're accessing your own account's data (rather than multiple users' accounts), you can use a long-lived personal access token rather than implementing the full OAuth2 flow. To create a personal access token, first register a developer app at developer.surveymonkey.com. Log in with your SurveyMonkey credentials, click 'My Apps', then 'Add App'. Give your app a name (e.g., 'My Dashboard Integration'), set the OAuth Redirect URL to your Vercel deployment URL (you can use https://placeholder.vercel.app for now and update it later), and select the scopes your integration needs: surveys_read, responses_read, and users_read are sufficient for a read-only dashboard. After creating the app, go to the app's Settings and find the 'Access Token' section. Click 'Generate Access Token' — this creates a personal token tied to your SurveyMonkey account that grants the permissions you specified. Copy this token immediately; you'll store it as an environment variable in Vercel. For V0 app development, also note your survey IDs from the SurveyMonkey interface (Edit Survey → look at the URL, the number is the survey ID) — you'll need these to test your API route. The SurveyMonkey API base URL is https://api.surveymonkey.com/v3/ and all responses are paginated with a default page size of 50.

Create Next.js API routes that proxy requests to the SurveyMonkey REST API. Because the SurveyMonkey access token grants full read access to your account's surveys and responses, it must never appear in client-side JavaScript. All SurveyMonkey API calls go through these server-side route handlers. Create separate route files for different SurveyMonkey endpoints to keep the code clean. The surveys list endpoint (/api/surveymonkey/surveys) fetches all your surveys with basic metadata. The responses endpoint (/api/surveymonkey/responses) fetches individual responses for a specific survey. The rollup endpoint (/api/surveymonkey/rollup) fetches aggregated answer statistics — perfect for building charts without processing raw data. Each route handler reads the SURVEYMONKEY_ACCESS_TOKEN environment variable and sets it as a Bearer token in the Authorization header. The SurveyMonkey API uses standard HTTP authentication: Authorization: Bearer YOUR_TOKEN_HERE. Add pagination support by forwarding the page and per_page query parameters to SurveyMonkey's API. Their API returns a meta object with total, count, per_page, and links fields for navigating paginated results. Forward these to your frontend so it can implement infinite scroll or page-based navigation. For the rollup endpoint specifically — which returns aggregated data per question — be aware that SurveyMonkey only returns rollup data for simple question types (rating scales, multiple choice, dropdown). Open-ended text questions return individual response text and require client-side aggregation if you want to display them in summary form.

1import { NextRequest, NextResponse } from 'next/server';
2
3const SM_API_BASE = 'https://api.surveymonkey.com/v3';
4
5async function smFetch(path: string, token: string) {
6  const response = await fetch(`${SM_API_BASE}${path}`, {
7    headers: {
8      Authorization: `Bearer ${token}`,
9      'Content-Type': 'application/json',
10    },
11    next: { revalidate: 120 },
12  });
13
14  if (!response.ok) {
15    throw new Error(`SurveyMonkey API error: ${response.status} ${await response.text()}`);
16  }
17
18  return response.json();
19}
20
21// GET /api/surveymonkey/surveys
22export async function GET(request: NextRequest) {
23  const token = process.env.SURVEYMONKEY_ACCESS_TOKEN;
24
25  if (!token) {
26    return NextResponse.json(
27      { error: 'SurveyMonkey access token not configured' },
28      { status: 500 }
29    );
30  }
31
32  const { searchParams } = new URL(request.url);
33  const page = searchParams.get('page') || '1';
34  const perPage = searchParams.get('per_page') || '20';
35
36  try {
37    const data = await smFetch(
38      `/surveys?page=${page}&per_page=${perPage}&include=response_count,date_modified`,
39      token
40    );
41    return NextResponse.json(data);
42  } catch (error) {
43    const message = error instanceof Error ? error.message : 'Unknown error';
44    return NextResponse.json({ error: message }, { status: 500 });
45  }
46}

Build two additional API routes: one for fetching individual survey responses and one for fetching rollup (aggregated) statistics. These cover the most common dashboard needs — the responses route for detailed individual answer views and the rollup route for aggregate charts and summary cards. The responses endpoint at app/api/surveymonkey/responses/route.ts accepts a surveyId query parameter and returns a paginated list of responses. Each response from SurveyMonkey's /surveys/{id}/responses/bulk endpoint includes the respondent's IP, submission date, and an array of answer objects keyed by question ID. You'll need to request the full details with the /bulk endpoint rather than the /responses endpoint to get answer data. The rollup endpoint at app/api/surveymonkey/rollup/route.ts calls /surveys/{id}/rollups, which returns aggregated statistics per question — for multiple choice questions, it shows count and percentage per answer option; for rating scales, it shows average score and distribution. This endpoint powers pie charts, bar charts, and NPS score calculations without requiring you to process hundreds of individual responses. Both routes should validate that the surveyId parameter is present and is a numeric string before forwarding the request to SurveyMonkey. Missing or malformed IDs result in cryptic SurveyMonkey API errors — a frontend validation layer in the route prevents confusing error messages. V0 generates dashboard components that consume these endpoints, giving you a complete survey analytics system without building a separate backend.

1import { NextRequest, NextResponse } from 'next/server';
2
3const SM_API_BASE = 'https://api.surveymonkey.com/v3';
4
5export async function GET(request: NextRequest) {
6  const token = process.env.SURVEYMONKEY_ACCESS_TOKEN;
7
8  if (!token) {
9    return NextResponse.json(
10      { error: 'SurveyMonkey access token not configured' },
11      { status: 500 }
12    );
13  }
14
15  const { searchParams } = new URL(request.url);
16  const surveyId = searchParams.get('surveyId');
17
18  if (!surveyId || !/^\d+$/.test(surveyId)) {
19    return NextResponse.json(
20      { error: 'Valid numeric surveyId query parameter is required' },
21      { status: 400 }
22    );
23  }
24
25  try {
26    // Fetch rollup (aggregate) data
27    const [rollupRes, surveyRes] = await Promise.all([
28      fetch(`${SM_API_BASE}/surveys/${surveyId}/rollups`, {
29        headers: {
30          Authorization: `Bearer ${token}`,
31          'Content-Type': 'application/json',
32        },
33        next: { revalidate: 300 },
34      }),
35      fetch(`${SM_API_BASE}/surveys/${surveyId}/details`, {
36        headers: {
37          Authorization: `Bearer ${token}`,
38          'Content-Type': 'application/json',
39        },
40        next: { revalidate: 300 },
41      }),
42    ]);
43
44    if (!rollupRes.ok) {
45      return NextResponse.json(
46        { error: `SurveyMonkey rollup error: ${rollupRes.status}` },
47        { status: rollupRes.status }
48      );
49    }
50
51    const rollupData = await rollupRes.json();
52    const surveyData = surveyRes.ok ? await surveyRes.json() : null;
53
54    return NextResponse.json({
55      rollup: rollupData,
56      survey: surveyData ? { title: surveyData.title, id: surveyData.id } : null,
57    });
58  } catch (error) {
59    const message = error instanceof Error ? error.message : 'Unknown error';
60    return NextResponse.json({ error: message }, { status: 500 });
61  }
62}

Store your SurveyMonkey access token in Vercel's environment variables so the API routes can authenticate with the SurveyMonkey API. The access token must not have a NEXT_PUBLIC_ prefix — it's a server-only secret that grants full read access to your SurveyMonkey account data. Push your V0 project to GitHub using V0's Git panel. Then in your Vercel project, go to Settings → Environment Variables. Click Add New and set key = SURVEYMONKEY_ACCESS_TOKEN, value = your personal access token from Step 1. Check all three environment scopes: Production, Preview, and Development. Click Save. Then go to Deployments and click Redeploy to apply the variable. For local development, create a .env.local file at your project root with the same variable and add it to .gitignore immediately. Now generate the dashboard UI in V0. Prompt V0 to create the survey dashboard components using the API routes you've built. Be specific: describe the exact data you want to display (response counts, answer percentages, score distributions) and the chart types you want (bar charts, donut charts, data tables). V0's AI understands Recharts and other charting libraries and can generate interactive visualizations. Once V0 creates the components, review the generated fetch calls to ensure they're calling your /api/surveymonkey/* routes rather than the SurveyMonkey API directly.

1# .env.local — never commit this file to git
2SURVEYMONKEY_ACCESS_TOKEN=your_personal_access_token_here

With the API routes created and the access token configured, deploy your app to Vercel. If your V0 project is connected to GitHub, pushing triggers automatic deployment. Otherwise use the Vercel Dashboard → Deployments → Redeploy button or V0's built-in Publish flow. After deployment (typically 30–60 seconds), open the production URL and navigate to your survey dashboard. The page should load your SurveyMonkey surveys from the API route. Click into a survey to see the rollup analytics and response viewer. Verify the data matches what you see in the SurveyMonkey web interface. For debugging, test your API routes directly by opening your-app.vercel.app/api/surveymonkey/surveys in the browser — a successful response returns a JSON array of surveys. If you see a 500 error with 'SurveyMonkey access token not configured', the environment variable hasn't been applied yet (redeploy required). If you see a 401, the token is invalid — regenerate it in your SurveyMonkey developer app settings. Check the Vercel Dashboard → Functions tab to see your API routes listed and review invocation logs. The logs show the exact SurveyMonkey API error if the integration fails. For complex integrations — like building real-time response notification systems, embedding surveys directly in your app, or setting up SurveyMonkey webhooks that trigger server-side processing — RapidDev can help architect the solution for production scale.