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

Why this integration matters

If you’re building retail banking experiences for startups, you need two things working together: a frontend that can handle secure customer interactions and an AI layer that can reason over those interactions. Next.js gives you the app shell for onboarding, account views, and support flows, while Vercel AI SDK handles streaming, tool calls, and agent orchestration.

The useful pattern is simple: let Next.js own the customer-facing banking UI, and let Vercel AI SDK power the assistant that explains balances, routes support requests, or drafts responses from backend banking data.

Prerequisites

• •Node.js 18+ installed
• •Python 3.10+ installed
• •A Next.js app scaffolded with npx create-next-app
• •A Vercel project with AI SDK installed:
  • •npm install ai @ai-sdk/openai
• •A banking API or mock service exposing endpoints for:
  • •customer profile
  • •account balances
  • •transaction history
• •Environment variables configured:
  • •OPENAI_API_KEY
  • •BANKING_API_BASE_URL
  • •BANKING_API_KEY
• •Basic familiarity with:
  • •Next.js App Router
  • •server actions or route handlers
  • •Python requests or httpx

Integration Steps

1. •Set up a Python banking adapter that exposes customer data in a clean contract.

Your Next.js app should not talk directly to every internal banking system. Put a thin Python service in front of those systems so your AI layer gets normalized responses.

from typing import Any, Dict
import os
import requests

BANKING_API_BASE_URL = os.environ["BANKING_API_BASE_URL"]
BANKING_API_KEY = os.environ["BANKING_API_KEY"]

def get_customer_profile(customer_id: str) -> Dict[str, Any]:
    url = f"{BANKING_API_BASE_URL}/customers/{customer_id}"
    headers = {"Authorization": f"Bearer {BANKING_API_KEY}"}
    response = requests.get(url, headers=headers, timeout=10)
    response.raise_for_status()
    return response.json()

def get_account_summary(customer_id: str) -> Dict[str, Any]:
    url = f"{BANKING_API_BASE_URL}/customers/{customer_id}/accounts/summary"
    headers = {"Authorization": f"Bearer {BANKING_API_KEY}"}
    response = requests.get(url, headers=headers, timeout=10)
    response.raise_for_status()
    return response.json()

2. •Expose that adapter through a Python API your Next.js app can call.

A small FastAPI layer is enough. This keeps the banking logic out of your frontend and gives the AI SDK a stable target for tool calls.

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import Any, Dict

app = FastAPI()

class CustomerRequest(BaseModel):
    customer_id: str

@app.post("/banking/profile")
def banking_profile(payload: CustomerRequest) -> Dict[str, Any]:
    try:
        return get_customer_profile(payload.customer_id)
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

@app.post("/banking/summary")
def banking_summary(payload: CustomerRequest) -> Dict[str, Any]:
    try:
        return get_account_summary(payload.customer_id)
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

3. •Create a Next.js route handler that calls your Python banking API.

This is the bridge between your retail banking UI and the backend services. In production, this handler usually sits behind authentication and session checks.

import requests

PYTHON_BANKING_SERVICE = "http://localhost:8000"

def fetch_banking_summary(customer_id: str):
    response = requests.post(
        f"{PYTHON_BANKING_SERVICE}/banking/summary",
        json={"customer_id": customer_id},
        timeout=10,
    )
    response.raise_for_status()
    return response.json()

if __name__ == "__main__":
    summary = fetch_banking_summary("cust_12345")
    print(summary)

In your Next.js app router, the equivalent route would call this backend from server-side code before rendering the dashboard or chat context.

4. •Wire Vercel AI SDK into the assistant flow and connect it to the banking data source.

The AI SDK handles chat streaming and tool execution. Use it to ask questions like “What’s my available balance?” and route those requests through your Python service.

import os
import requests
from typing import Dict, Any

VERCEL_AI_CHAT_URL = "http://localhost:3000/api/chat"

def ask_assistant(message: str, customer_id: str) -> Dict[str, Any]:
    payload = {
        "messages": [
            {"role": "user", "content": message}
        ],
        "customerId": customer_id,
    }
    response = requests.post(VERCEL_AI_CHAT_URL, json=payload, timeout=30)
    response.raise_for_status()
    return response.json()

if __name__ == "__main__":
    result = ask_assistant("Show me my latest account summary", "cust_12345")
    print(result)

On the Next.js side, you’d implement /api/chat with Vercel AI SDK’s streamText() and a tool that calls your Python endpoint:

# Conceptual bridge example for the Python service called by the Next.js AI route.
import requests

def get_summary_tool(customer_id: str):
    r = requests.post(
        "http://localhost:8000/banking/summary",
        json={"customer_id": customer_id},
        timeout=10,
    )
    r.raise_for_status()
    return r.json()

The important part is that Vercel AI SDK orchestrates the conversation while your Python service supplies deterministic banking data.

5. •Add guardrails for retail banking workflows before exposing anything to customers.

Banking assistants need strict controls. Don’t let the model infer balances or fabricate transaction details; force it to call tools and only answer from returned data.

from dataclasses import dataclass

@dataclass
class BankingPolicy:
    allow_balance_lookup: bool = True
    allow_transaction_history: bool = True
    block_sensitive_actions_without_auth: bool = True

def validate_request(customer_authenticated: bool, action: str) -> None:
    if action in {"transfer_funds", "change_pin"} and not customer_authenticated:
        raise PermissionError("Authentication required")

Testing the Integration

Use a simple end-to-end check from Python to verify your backend responds and your assistant endpoint is reachable.

import requests

def test_flow():
    profile_resp = requests.post(
        "http://localhost:8000/banking/profile",
        json={"customer_id": "cust_12345"},
        timeout=10,
    )
    profile_resp.raise_for_status()

    chat_resp = requests.post(
        "http://localhost:3000/api/chat",
        json={
            "messages": [{"role": "user", "content": "Summarize my account status"}],
            "customerId": "cust_12345",
        },
        timeout=30,
    )
    chat_resp.raise_for_status()

    print("Profile OK:", profile_resp.json()["customer_name"])
    print("Chat OK:", chat_resp.json().get("message", "streamed response received"))

test_flow()

Expected output:

Profile OK: Jane Doe
Chat OK: streamed response received

Real-World Use Cases

• •

  Retail onboarding assistant

  • •Guide new customers through KYC steps in Next.js.
  • •Use Vercel AI SDK to answer eligibility questions and explain required documents.
• •

  Account servicing agent

  • •Let users ask about balances, pending transactions, or card status.
  • •Pull live data from Python-backed APIs instead of relying on model memory.
• •

  Support triage for startup banks

  • •Classify incoming issues like failed transfers or login problems.
  • •Route high-risk cases to human ops with full context captured from the AI conversation.

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.