How to Integrate Plaid with V0

Open V0 at v0.dev and describe the personal finance dashboard or bank connection interface you want to build. Plaid integrations have two distinct UI states: the pre-connection state (showing a 'Connect Your Bank' call-to-action) and the post-connection state (showing the actual financial data). Tell V0 about both states so it generates components that handle the transition smoothly. The Plaid Link widget itself is a Plaid-hosted UI component that appears as a modal overlay — your V0 component does not generate the bank login screens, only the surrounding dashboard and the button that triggers Link. Describe what the connected state shows: account balance cards (one card per bank account), a transaction list with merchant, amount, date, and Plaid's automatic category, and any summary charts. Be specific about the API endpoint paths (/api/plaid/link-token for getting the token, /api/plaid/data for fetching account and transaction data after connection). V0 generates the component with React hooks for managing connection state naturally — the Plaid Link SDK is loaded via the react-plaid-link npm package which integrates well with V0-generated React components. After generating, push to GitHub via V0's Git panel.

Create the Next.js API routes that handle the Plaid authentication flow and data retrieval. There are three key routes: first, POST /api/plaid/link-token creates a Link token using your server-side Plaid credentials — this token is safe to send to the browser and is used to initialize the Plaid Link widget. Second, POST /api/plaid/exchange receives the public_token from the browser after the user successfully connects their bank, exchanges it for a permanent access_token using the Plaid secret key (this exchange must happen server-side), and stores the access token for future use. In this tutorial the access token is returned to the client and stored in localStorage or React state for simplicity — production apps should store it in a server-side database keyed to the authenticated user. Third, GET /api/plaid/data uses the stored access_token to fetch account balances and recent transactions. Install the Plaid SDK with npm install plaid. The Plaid SDK is initialized with your client ID and secret — use PlaidEnvironments.sandbox during development and PlaidEnvironments.production when ready for real bank connections. The sandbox environment provides pre-built test accounts (use username user_good, password pass_good in Plaid Link when testing) that return realistic simulated financial data.

1// app/api/plaid/link-token/route.ts
2import { NextResponse } from 'next/server';
3import { Configuration, PlaidApi, PlaidEnvironments, Products, CountryCode } from 'plaid';
4
5const plaidConfig = new Configuration({
6  basePath: PlaidEnvironments[process.env.PLAID_ENV as keyof typeof PlaidEnvironments || 'sandbox'],
7  baseOptions: {
8    headers: {
9      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
10      'PLAID-SECRET': process.env.PLAID_SECRET,
11    },
12  },
13});
14
15const plaidClient = new PlaidApi(plaidConfig);
16
17export async function POST() {
18  if (!process.env.PLAID_CLIENT_ID || !process.env.PLAID_SECRET) {
19    return NextResponse.json(
20      { error: 'Plaid credentials are not configured' },
21      { status: 500 }
22    );
23  }
24
25  try {
26    const response = await plaidClient.linkTokenCreate({
27      user: { client_user_id: 'user-' + Date.now() },
28      client_name: 'My Finance App',
29      products: [Products.Transactions],
30      country_codes: [CountryCode.Us],
31      language: 'en',
32    });
33
34    return NextResponse.json({ link_token: response.data.link_token });
35  } catch (error: any) {
36    console.error('Plaid link token error:', error.response?.data || error.message);
37    return NextResponse.json(
38      { error: 'Failed to create Plaid link token' },
39      { status: 500 }
40    );
41  }
42}

Create the remaining Plaid API routes for token exchange and financial data retrieval. The exchange route is critical — it receives the public_token from the browser and exchanges it server-side for a permanent access_token. The data route uses the access_token to fetch account balances and transactions. Create app/api/plaid/exchange/route.ts for the token exchange and app/api/plaid/data/route.ts for data fetching. For the data route, use plaidClient.accountsBalanceGet({ access_token }) to get real-time account balances and plaidClient.transactionsGet({ access_token, start_date: '2024-01-01', end_date: '2024-12-31' }) for transaction history. Transactions come back with merchant_name, amount (positive for credits, negative for debits in Plaid's convention), date, and personal_finance_category with a primary and detailed category. For local testing, add PLAID_CLIENT_ID, PLAID_SECRET, and PLAID_ENV=sandbox to .env.local. When running Plaid Link in the browser with sandbox credentials, use the test institution 'Plaid Checking' (appears in the search) and enter username user_good, password pass_good to get realistic simulated account data. This gives you a complete working demo without any real bank credentials.

1// app/api/plaid/data/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { Configuration, PlaidApi, PlaidEnvironments } from 'plaid';
4
5const plaidConfig = new Configuration({
6  basePath: PlaidEnvironments[process.env.PLAID_ENV as keyof typeof PlaidEnvironments || 'sandbox'],
7  baseOptions: {
8    headers: {
9      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
10      'PLAID-SECRET': process.env.PLAID_SECRET,
11    },
12  },
13});
14
15const plaidClient = new PlaidApi(plaidConfig);
16
17export async function GET(request: NextRequest) {
18  const { searchParams } = new URL(request.url);
19  const accessToken = searchParams.get('access_token');
20
21  if (!accessToken) {
22    return NextResponse.json({ error: 'access_token is required' }, { status: 400 });
23  }
24
25  try {
26    // Fetch account balances
27    const balancesResponse = await plaidClient.accountsBalanceGet({
28      access_token: accessToken,
29    });
30
31    // Fetch last 30 days of transactions
32    const endDate = new Date().toISOString().split('T')[0];
33    const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
34      .toISOString()
35      .split('T')[0];
36
37    const transactionsResponse = await plaidClient.transactionsGet({
38      access_token: accessToken,
39      start_date: startDate,
40      end_date: endDate,
41    });
42
43    const accounts = balancesResponse.data.accounts.map((account) => ({
44      id: account.account_id,
45      name: account.name,
46      type: account.type,
47      subtype: account.subtype,
48      balance: account.balances.current,
49      currency: account.balances.iso_currency_code || 'USD',
50    }));
51
52    const transactions = transactionsResponse.data.transactions.map((txn) => ({
53      id: txn.transaction_id,
54      merchant: txn.merchant_name || txn.name,
55      amount: txn.amount,
56      date: txn.date,
57      category: txn.personal_finance_category?.primary || 'Other',
58    }));
59
60    return NextResponse.json({ accounts, transactions });
61  } catch (error: any) {
62    console.error('Plaid data fetch error:', error.response?.data || error.message);
63    return NextResponse.json(
64      { error: 'Failed to fetch account data' },
65      { status: 500 }
66    );
67  }
68}

Add Plaid credentials to Vercel and deploy the integration. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add PLAID_CLIENT_ID and PLAID_SECRET from the Plaid Dashboard — never use the NEXT_PUBLIC_ prefix for these, as they must remain server-only. Add PLAID_ENV set to 'sandbox' for development and testing, and 'production' when you have Plaid production access. After adding variables for all scopes (Production, Preview, Development), save and trigger a redeployment. Test the deployed integration: click Connect Bank Account in your deployed app, which should open Plaid Link. In sandbox mode, use the test institution 'Plaid Checking' and credentials user_good / pass_good to connect a simulated account. After connecting, the dashboard should load with realistic simulated balance and transaction data. Moving to production requires applying for Plaid production access through the Plaid Dashboard — Plaid reviews applications and requires you to agree to their API usage agreement, privacy policy, and demonstrate how user data will be handled. For apps handling real financial data, ensure you have reviewed Plaid's compliance requirements and implemented proper access token storage in a database rather than the simplified client-side approach used in this tutorial.