How to Integrate Mint with V0

Start by asking V0 to generate the frontend UI components for your personal finance dashboard. This step creates the visual shell before wiring up real data from Plaid. Working with mock data first lets you validate the design and user experience before dealing with API complexity. In V0's chat, describe the dashboard layout you want. A typical Mint-style dashboard includes a sidebar with linked accounts showing balances, a main content area with spending summaries, a transaction list, and budget progress indicators. V0 will generate these as React components with Tailwind CSS styling and mock data arrays that you will replace with real Plaid data in subsequent steps. Ask V0 to build the Plaid Link button component — a button that triggers the Plaid Link modal for connecting bank accounts. This button will call your API route to get a Plaid link_token, then open the Plaid Link widget. The V0 prompt should specify that this button needs to call a `/api/plaid/create-link-token` endpoint and handle the OAuth callback. V0 will generate a client component with the button logic and a placeholder for the Plaid Link SDK integration. Also generate a transaction list component with columns for date, merchant name, category (with color-coded badge), and amount (red for debits, green for credits). Ask V0 to make this list sortable and filterable by category and date range. This component will receive real data from your Plaid transactions API route once the full integration is complete.

Since Mint no longer provides an API, Plaid is the best replacement for financial data aggregation. Before writing any code, you need to set up a Plaid account and understand how the authentication flow works — it is different from a typical REST API because it involves a three-step token exchange to protect user banking credentials. Go to dashboard.plaid.com and create a free account. Plaid provides a Sandbox environment where you can test with fake bank accounts using test credentials (username: `user_good`, password: `pass_good`) without needing real bank access. From your Plaid dashboard, navigate to Team Settings → Keys and note your `client_id` and `secret` for the Sandbox environment. The Plaid auth flow works like this: First, your server creates a short-lived `link_token` by calling the Plaid API with your credentials and the user's ID. Second, your client uses this `link_token` to open the Plaid Link widget — a modal that handles the bank login securely within Plaid's infrastructure (your app never sees the user's banking password). Third, after the user connects their account, Plaid returns a `public_token` to your client. Fourth, your client sends this `public_token` to your server, which exchanges it for a permanent `access_token` by calling the Plaid API. Fifth, your server stores this `access_token` (in your database) and uses it for all future API calls to fetch transactions, balances, etc. This token exchange architecture means your Next.js API routes need to handle four distinct operations: create link token, exchange public token, get accounts/balances, and get transactions. Each is a separate API route.

1// Install required packages:
2// npm install plaid react-plaid-link
3
4// .env.local (also set in Vercel Dashboard)
5// PLAID_CLIENT_ID=your_client_id_here
6// PLAID_SECRET=your_sandbox_secret_here
7// PLAID_ENV=sandbox  (change to development or production when ready)

Now create the Next.js API routes that handle secure communication with the Plaid API. All Plaid API calls must be server-side — your secret key must never reach the browser. You need four route handlers organized under `app/api/plaid/`. The first route (`create-link-token/route.ts`) accepts a POST request with a user ID, calls the Plaid API to create a link token, and returns it to the client. The link token is what initializes the Plaid Link widget on the frontend. It is short-lived (30 minutes) and can only be used once. The second route (`exchange-token/route.ts`) accepts the `public_token` that Plaid Link returns after the user connects their bank. It calls the Plaid API to exchange this temporary public token for a permanent `access_token` and the associated `item_id`. You should store both in your database (or temporarily in a secure HTTP-only cookie for simpler setups) — you will need the `access_token` for all future data fetches for this user. The third route (`accounts/route.ts`) uses the stored `access_token` to call Plaid's accounts endpoint and return account names, types, and current balances. This populates the sidebar account list in your dashboard. The fourth route (`transactions/route.ts`) fetches transaction history using the `access_token`. Plaid returns up to 500 transactions per request with pagination. Each transaction includes merchant name, amount, date, and Plaid's automatic category classification — which you can use to replicate Mint's category-based spending analysis. All routes read credentials from `process.env.PLAID_CLIENT_ID` and `process.env.PLAID_SECRET`, which you will add to Vercel Dashboard → Settings → Environment Variables before deploying.

1// app/api/plaid/create-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(request: Request) {
18  try {
19    const { userId } = await request.json()
20
21    const response = await plaidClient.linkTokenCreate({
22      user: { client_user_id: userId },
23      client_name: 'My Finance App',
24      products: [Products.Transactions],
25      country_codes: [CountryCode.Us],
26      language: 'en',
27    })
28
29    return NextResponse.json({ link_token: response.data.link_token })
30  } catch (error) {
31    console.error('Plaid link token error:', error)
32    return NextResponse.json({ error: 'Failed to create link token' }, { status: 500 })
33  }
34}
35
36// app/api/plaid/exchange-token/route.ts
37export async function POST(request: Request) {
38  try {
39    const { public_token } = await request.json()
40
41    const response = await plaidClient.itemPublicTokenExchange({ public_token })
42    const { access_token, item_id } = response.data
43
44    // In production: store access_token securely in your database
45    // Never return the access_token to the client
46    return NextResponse.json({ success: true, item_id })
47  } catch (error) {
48    return NextResponse.json({ error: 'Token exchange failed' }, { status: 500 })
49  }
50}
51
52// app/api/plaid/transactions/route.ts
53export async function POST(request: Request) {
54  try {
55    const { access_token } = await request.json()
56
57    const endDate = new Date().toISOString().split('T')[0]
58    const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
59
60    const response = await plaidClient.transactionsGet({
61      access_token,
62      start_date: startDate,
63      end_date: endDate,
64    })
65
66    return NextResponse.json({
67      transactions: response.data.transactions,
68      accounts: response.data.accounts,
69    })
70  } catch (error) {
71    return NextResponse.json({ error: 'Failed to fetch transactions' }, { status: 500 })
72  }
73}

Before deploying, configure your Plaid credentials as environment variables in the Vercel Dashboard. These credentials must never be committed to your GitHub repository or included in client-side code. Go to your Vercel project at vercel.com/dashboard, select your project, then navigate to Settings → Environment Variables. Add three variables: `PLAID_CLIENT_ID` with your Plaid client ID value, `PLAID_SECRET` with your Plaid sandbox secret, and `PLAID_ENV` with the value `sandbox`. Apply all three to Production, Preview, and Development environments. Click Save after adding each variable. Once variables are saved, push your code to GitHub (via V0's Git panel, or directly). Vercel will automatically trigger a new deployment that includes your environment variables. The deployment typically completes in 60-90 seconds for a Next.js app of this size. After deployment, test the Plaid Link flow using Plaid's sandbox test credentials: open your deployed app, click the Connect Bank Account button, and when the Plaid Link modal appears, use the institution 'Chase' (or any sandbox institution), enter username `user_good` and password `pass_good`. Complete the flow and verify that your dashboard displays the mock Plaid sandbox account balances and transactions. For production deployment with real bank accounts, you need to request Production access from Plaid, which involves a compliance review and billing setup. Until then, the Sandbox environment gives you a fully functional development and testing experience without real financial data.

1// Environment variables to add in Vercel Dashboard → Settings → Environment Variables:
2// PLAID_CLIENT_ID = your_client_id_from_plaid_dashboard
3// PLAID_SECRET = your_sandbox_secret_from_plaid_dashboard  
4// PLAID_ENV = sandbox
5
6// Client-side Plaid Link integration
7// app/components/plaid-link-button.tsx
8'use client'
9import { useCallback, useState } from 'react'
10import { usePlaidLink } from 'react-plaid-link'
11
12interface PlaidLinkButtonProps {
13  userId: string
14  onSuccess: (itemId: string) => void
15}
16
17export function PlaidLinkButton({ userId, onSuccess }: PlaidLinkButtonProps) {
18  const [linkToken, setLinkToken] = useState<string | null>(null)
19  const [loading, setLoading] = useState(false)
20
21  const getLinkToken = useCallback(async () => {
22    setLoading(true)
23    const response = await fetch('/api/plaid/create-link-token', {
24      method: 'POST',
25      headers: { 'Content-Type': 'application/json' },
26      body: JSON.stringify({ userId }),
27    })
28    const data = await response.json()
29    setLinkToken(data.link_token)
30    setLoading(false)
31  }, [userId])
32
33  const { open, ready } = usePlaidLink({
34    token: linkToken,
35    onSuccess: async (publicToken) => {
36      const res = await fetch('/api/plaid/exchange-token', {
37        method: 'POST',
38        headers: { 'Content-Type': 'application/json' },
39        body: JSON.stringify({ public_token: publicToken }),
40      })
41      const data = await res.json()
42      if (data.item_id) onSuccess(data.item_id)
43    },
44  })
45
46  return (
47    <button
48      onClick={linkToken ? () => open() : getLinkToken}
49      disabled={!ready && !!linkToken}
50      className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-500 transition-colors disabled:opacity-50"
51    >
52      {loading ? 'Loading...' : '+ Connect Account'}
53    </button>
54  )
55}