Bolt.new AI and Plaid integration: Step-by-Step Guide 2025

 

Setting Up Plaid Dependency and Environment Variables

 

• In your Bolt.new AI project, open or create a package.json file if it doesn’t exist. Since Bolt.new AI lacks a terminal, add your dependencies directly in this file. Ensure you have the Plaid client library listed. Insert the following snippet into your package.json:

  
  {
    "name": "your-project-name",
    "version": "1.0.0",
    "dependencies": {
      "plaid": "^12.0.0", 
      "express": "^4.18.0"
    }
  }
      

• Next, set up your environment variables within your project. Bolt.new AI provides a section in the dashboard to configure secrets or environment variables. Add at least the following keys:

  
  PLAIDCLIENTID=yourplaidclient_id
  PLAIDSECRET=yourplaid_secret
  PLAID_ENV=sandbox
      

  Replace yourplaidclientid and yourplaid_secret with your actual Plaid credentials.

 

Creating the Plaid Integration Module

 

• In your project’s file structure, create a new file called plaidIntegration.ts. This module will handle all interactions with Plaid.
• Insert the following TypeScript code into plaidIntegration.ts:

  
  import { Configuration, PlaidApi, PlaidEnvironments } from 'plaid';
  
  const configuration = new Configuration({
    // Use the environment variable to set the Plaid environment (sandbox, development, production)
    basePath: PlaidEnvironments[process.env.PLAID_ENV as keyof typeof PlaidEnvironments],
    baseOptions: {
      headers: {
        'PLAID-CLIENT-ID': process.env.PLAIDCLIENTID || '',
        'PLAID-SECRET': process.env.PLAID_SECRET || '',
      },
    },
  });
  export const plaidClient = new PlaidApi(configuration);
  /**
  
  Creates a Link token for a user.
  @param userId A unique identifier for the user.
  
   */
  export async function createLinkToken(userId: string): Promise {
    const request = {
      user: {
        clientuserid: userId,
      },
      client_name: 'Your App Name',
      products: ['transactions'], // Update products as needed by your integration
      country_codes: ['US'],
      language: 'en',
    };
    const response = await plaidClient.linkTokenCreate(request);
    return response.data.link_token;
  }
      

  
  This code prepares the Plaid client using credentials from your environment variables and defines a function to generate a link token.
  

 

Integrating Plaid with Your Server Endpoints

 

• In your main server file (for example, app.ts or index.ts), you need to set up an API endpoint that uses the createLinkToken function from your plaidIntegration.ts module.
• Add the following code snippet into your server file:

  
  import express from 'express';
  import { createLinkToken } from './plaidIntegration';
  
  const app = express();
  app.use(express.json());
  // Endpoint to create a Plaid Link token
  app.post('/api/create-link-token', async (req, res) => {
    const userId = req.body.userId;
    if (!userId) {
      return res.status(400).json({ error: 'User ID is required.' });
    }
    try {
      const linkToken = await createLinkToken(userId);
      res.json({ link_token: linkToken });
    } catch (error: any) {
      res.status(500).json({ error: error.message });
    }
  });
  // Set the port from environment or default to 3000
  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => {
    console.log(Server running on port ${PORT});
  });
      

  
  This snippet creates an Express server with a POST endpoint that, when hit with a userId in the body, returns a Plaid link token.
  

 

Linking Your Front-End to the Plaid API

 

• In the part of your Bolt.new AI project that handles front-end interactions, you need to call the /api/create-link-token endpoint to obtain a Plaid Link token.
• For example, if you have a TypeScript file that manages your client-side logic, add the following sample fetch request:

  
  async function fetchLinkToken(userId: string) {
    try {
      const response = await fetch('/api/create-link-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId })
      });
      const data = await response.json();
      if (response.ok) {
        // Use the link token to initialize the Plaid Link flow in your UI
        console.log('Link Token:', data.link_token);
      } else {
        console.error('Error fetching link token:', data.error);
      }
    } catch (err) {
      console.error('Error:', err);
    }
  }
      

  Ensure that you call this function at the appropriate time in your UI workflow (such as when a user clicks a button to connect their bank account).

 

Finalizing and Testing the Integration

 

• Review your files to ensure they are saved: package.json, plaidIntegration.ts, your server file (app.ts or index.ts), and any client-side files.
• In Bolt.new AI, hit the Run button to start your project. The Express server should start, and you can test the endpoints via your front-end integration.
• Open your application in a web browser, trigger the function that fetches your Plaid link token, and verify that you receive a valid token. Use the token to set up the Plaid Link flow in your UI.