How to Integrate Next.js for retail banking with Vercel AI SDK for production AI

Retail banking teams need two things from AI: fast customer-facing experiences and strict control over data, latency, and auditability. Pairing Next.js for retail banking with Vercel AI SDK gives you a frontend and orchestration layer that can power account assistants, fraud triage, and product recommendation flows without turning your stack into a science project.

Prerequisites

• •A Next.js app for retail banking already running in your environment
• •A Vercel project with the Vercel AI SDK installed
• •Python 3.10+ for integration scripts and backend glue code
• •API access to your banking services:
  • •customer profile service
  • •accounts/transactions service
  • •consent/auth service
• •Environment variables configured:
  • •VERCEL_AI_API_KEY
  • •BANKING_API_BASE_URL
  • •BANKING_API_TOKEN
• •A local or staging endpoint exposed by your Next.js app for agent-driven requests
• •Basic familiarity with:
  • •fetch/HTTP APIs
  • •JSON payloads
  • •server-side route handlers

Integration Steps

1. •

   Expose a banking-safe AI endpoint in Next.js

   Your Next.js app should not let the model talk directly to core banking systems. Put a thin server route in front of those systems, then let the Vercel AI SDK call that route.

   import os
   import requests
   
   BANKING_API_BASE_URL = os.environ["BANKING_API_BASE_URL"]
   BANKING_API_TOKEN = os.environ["BANKING_API_TOKEN"]
   
   def get_customer_summary(customer_id: str) -> dict:
       url = f"{BANKING_API_BASE_URL}/customers/{customer_id}/summary"
       headers = {
           "Authorization": f"Bearer {BANKING_API_TOKEN}",
           "Content-Type": "application/json",
       }
       response = requests.get(url, headers=headers, timeout=15)
       response.raise_for_status()
       return response.json()
   

2. •

   Create a tool contract that the Vercel AI SDK can call

   The Vercel AI SDK works best when your tools are explicit and narrow. Define one tool per banking action: balance lookup, transaction search, card status, dispute initiation.

   from typing import Any, Dict
   
   def build_balance_tool_result(customer_id: str) -> Dict[str, Any]:
       summary = get_customer_summary(customer_id)
       return {
           "customerId": customer_id,
           "availableBalance": summary["accounts"]["checking"]["availableBalance"],
           "currency": summary["accounts"]["checking"]["currency"],
           "lastUpdated": summary["lastUpdated"],
       }
   

3. •

   Call the Vercel AI SDK from a Python orchestration service

   In production, I prefer Python for the orchestration layer even if the UI is in Next.js. Your Python service can call the Vercel AI SDK-powered endpoint in your Next.js app, pass structured context, and return a safe response.

   import os
   import requests
   
   NEXTJS_AI_ENDPOINT = os.environ["NEXTJS_AI_ENDPOINT"]
   
   def ask_banking_assistant(message: str, customer_id: str) -> dict:
       payload = {
           "messages": [
               {"role": "system", "content": "You are a retail banking assistant. Never expose sensitive data."},
               {"role": "user", "content": message},
           ],
           "customerId": customer_id,
           "tools": ["get_balance", "recent_transactions"],
       }
   
       response = requests.post(
           NEXTJS_AI_ENDPOINT,
           json=payload,
           timeout=30,
       )
       response.raise_for_status()
       return response.json()
   

4. •

   Wire the Vercel AI SDK route to invoke your banking tools

   In your Next.js route handler, use the Vercel AI SDK’s streamText() or generateText() flow to orchestrate responses. The key is to keep tool execution server-side and deterministic.

   import json
   import requests
   
   def call_vercel_ai_sdk(messages: list[dict], tools: list[dict]) -> dict:
       url = "https://your-vercel-app.vercel.app/api/ai/chat"
       payload = {
           "messages": messages,
           "tools": tools,
       }
   
       response = requests.post(url, json=payload, timeout=30)
       response.raise_for_status()
       return response.json()
   
   if __name__ == "__main__":
       result = call_vercel_ai_sdk(
           messages=[
               {"role": "user", "content": "What is my available checking balance?"}
           ],
           tools=[
               {"name": "get_balance", "description": "Fetch checking account balance"},
           ],
       )
       print(json.dumps(result, indent=2))
   

5. •

   Add policy checks before returning any model output

   Banking workflows need guardrails before anything reaches the customer. Validate that the model output contains no raw account numbers, no PANs, and no unsupported advice.

   import re
   
   SENSITIVE_PATTERNS = [
       r"\b\d{16}\b",  # card number-like values
       r"\b\d{3}-\d{2}-\d{4}\b",  # SSN-like values
     ]
   
   def is_safe_response(text: str) -> bool:
       for pattern in SENSITIVE_PATTERNS:
           if re.search(pattern, text):
               return False
       return True
   
   def finalize_response(ai_result: dict) -> dict:
       content = ai_result.get("content", "")
       if not is_safe_response(content):
           return {
               "status": "blocked",
               "reason": "policy_violation",
           }
       return {
           "status": "ok",
           "content": content,
       }
   

Testing the Integration

Run a simple end-to-end check against your staging endpoints.

def test_banking_ai_flow():
    reply = ask_banking_assistant(
        message="Show me my checking balance and recent card activity.",
        customer_id="cust_10291",
    )

    print("RAW RESPONSE:")
    print(reply)

    final = finalize_response(reply)
    print("FINAL RESPONSE:")
    print(final)

if __name__ == "__main__":
    test_banking_ai_flow()

Expected output:

RAW RESPONSE:
{
  "content": "Your checking account has an available balance of $4,280.12. Recent card activity includes 3 purchases in the last 24 hours.",
  "toolCalls": [
    {"name": "get_balance"},
    {"name": "recent_transactions"}
  ]
}

FINAL RESPONSE:
{
  "status": "ok",
  "content": "Your checking account has an available balance of $4,280.12. Recent card activity includes 3 purchases in the last 24 hours."
}

Real-World Use Cases

• •

  Customer self-service assistant

  • •Answer balance questions, transaction lookups, card status checks, and branch/service FAQs without routing everything to support.
• •

  Fraud triage copilot

  • •Let agents summarize suspicious activity, pull recent transactions, and draft next-step actions while keeping approvals human-controlled.
• •

  Personalized product guidance

  • •Recommend savings accounts, overdraft protection, or credit products based on customer behavior and eligibility rules.

Keep learning

• •The complete AI Agents Roadmap — my full 8-step breakdown
• •Free: The AI Agent Starter Kit — PDF checklist + starter code
• •Work with me — I build AI for banks and insurance companies

By Cyprian Aarons, AI Consultant at Topiax.